The AppGyver Enterprise Documentation

Welcome to the AppGyver Enterprise Builder Documentation. Information about the different aspects of Enterprise Builder's functions may be found in the guides presented here. More guides and tutorials will be added in the following weeks.

Feel free to suggest edits on any parts of the documentation that feel unclear.

Get Started    

Getting Started

Learn how to initialize a new module project and use the development environment to create custom modules

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.

Technically, a module is a self-contained HTML5 document that is rendered inside an iFrame and can communicate with the parent application via a special JavaScript API bridge. A module can contain HTML, CSS, JavaScript, images and other assets without conflicting with the rest of the app.

iFrame limitations

Since each module is displayed within an iFrame and further inside the Composer 2 app structure, some JavaScript calls don't behave as expected, especially when deployed as part of an actual Composer 2 app.

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.

Setting Up the Tools

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.

If you are not familiar with Steroids and Supersonic, we recommend that you go through the Supersonic First Mile tutorials first.

Module development also requires global installs of Grunt and Bower. Install them by running:

npm install bower -g
npm install grunt-cli -g

Creating the Custom Module Project

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:

cd myFirstModule

(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.)

Connecting your Module to the Backend (Development)

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

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.

Connecting to the development environment

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.

Getting Started

Learn how to initialize a new module project and use the development environment to create custom modules