New Component Guide Overview

For a one-time purpose, you may want to use the function component and combinations of other core components in the Apps Editor.

But it`s a good idea to make some logic easily reusable and maybe earn decent money on selling components.

If you are familiar with JavaScript follow this tutorial to create a new component for the Applications Editor.

Component Project Structure

When creating a new component app project you get three basic files in its folder:

Plus the Apps Editor will add

  • app-component.json - a file that allows you to test your component before releasing it.

If your project contains more than one component it should have a separate folder for each of them.

This is the folder of a new components project: toupper. It contains the src subfolder.

There are config.json and app-component.json files in it, plus the next subfolder: components. We have two components in this project so we have subfolders for each of them (you can use the same folder for all components files in the project if you want).

On that level, there are component.html and component.js files.

In each component`s folder, there is a folder for an icon file. You don`t need separate component folders if you have only one in the project. And you may have no need in the icon folder and file if you use Font Awesome pics (see New Component Style Guide).