If you have used the app builder, you are probably already familiar with modules (read the Modules General Info guide for more). In addition to the default modules, you can also create your own custom modules by using Steroids, Supersonic and any other HTML5 libraries you like.
For example, changing
window.location to an URL on the Internet seems to work in the Simulator while developing, but will cause an error in the final app. Generally speaking though, anything that affects what happens inside the iFrame should work great.
To get started, you need to have Node.js and the latest version of Steroids CLI installed. Please follow the Steroids Install Wizard for installation instructions, or update your existing installation with
npm install steroids -g. Remember to do
steroids login if you did not do it already during the wizard.
If you are not familiar with Steroids and Supersonic, we recommend that you go through the Supersonic First Mile tutorials first.
npm install bower -g npm install grunt-cli -g
Once you have Steroids CLI, Grunt and Bower set up, you need to initialize a custom module project. Do this by running the following command:
steroids module create myFirstModule
Steroids will create the module project in the
myFirstModule/ directory and install a bunch of npm and Bower dependencies. Once done, go to the module project directory:
(Don't about what goes where yet – we'll guide you through it, and the module project structure explained in detail in the Custom module Project structure.)
During the module development, in order to access the data from your composer app, we need "credentials" (e.g. app id, authentication token and etc). These credentials are stored in your module project and are used to connect to the cloud and retrieve data, as if the module was running inside the real app.
To do this go to Composer 2, and select the Module development / Connect module to application from the top bar (or just click here). This will open up a wizard interface where you can choose which app and user you want to use as the base of the new module's development. It is recommended to use an app that you have created specifically for testing purposes.
The module connection wizard will ask for an app and user to use as the development module's configuration
Finally, click "Generate command", then copy and paste the command from there to terminal and run it The command will look something like:
steroids module init --app-id=14106 --api-key=30829705b66fbc8b6296edf9e7327b4b4cc918e8f3f563cc0722a4de56878c1b --auth-token=e757b975dc71612cf1f3cc12f4e945672 --user-id=15533 --envApiHost=https://env-api.appgyver.com
Be sure to run the command in the root of your module project directory!
After running the command, your module project is connected to your app's backend as the user you specified in the wizard, and has access to all data from it (provided the chosen user has the proper permissions).
Keep things up to date
After connecting your module project to a Composer 2 application, changes to the Composer 2 application will not automatically propagate to the local project. This means that whenever you edit the application (e.g. add sections or edit data resources) you have to manually pull the changes into your local project. To do so, run
steroids module refresh in the module project root.
Once you have created your module and connected it to the Composer backend, you are ready to fire up the module development environment.
steroids connect --watch=src
After connecting, you have access to the module development environment.