Apache Cordova

Applications built with <form.io> can be deployed using Apache Cordova. Apache Cordova allows compiling web applications into binary apps that can be run on modern mobile devices such as iOS and Android phones. The applications are then distributed as mobile applications instead of being published on the web.

Project Setup

The first step in generating a Cordova based application is to ensure that you have cloned and built your form.io project. If you are using one of our templates as a starting point this should be fairly straightforward. We’ll be using formio-app-todo as a demo for how to do this.

First, clone the app and install the required dependencies. You can follow the steps in the portal at Launch->Local App Development.

git clone git@github.com:formio/formio-app-todo.git
cd formio-app-todo
npm install -g bower
npm install
bower install

Next make sure you’ve created a todo app on form.io and update the config to point to your project url.

In the /src/config.js file.

var APP_URL = 'https://yourappurl.form.io';

You can test out the app by running

gulp serve

Finally, build a deployable version of the app into the /dist directory by running.

gulp build

If you are not using one of our templates, use whatever build mechanisms you have set up.

Cordova Install

The next step is to ensure that Cordova is installed on your computer so that you can create the cordova project and begin compiling to apps.

You can follow the more detailed instructions of how to install Cordova at Create your first Cordova app

Here are the basic steps. Run them from the root of your form.io project

# Install cordova's command line
npm install -g cordova
# Create the cordova project in the cordova directory
cordova create cordova
# Change to the cordova directory to make further changes
cd cordova
# Add iOS and Android platforms
cordova platform add ios --save
cordova platform add android --save

Next you’ll want to install all the pre-requisites for building the applications. To check which pre-requisites are needed and their current status, run:

cordova requirements

Install the pre-requisites and rerun the command until all pre-requisites are met.

For information on installing the pre-requisites, see Cordova’s documentation at

Cordova should now be ready to build applications.

Plugins

Cordova uses plugins to connect some device capabilities to your web application. In order to take advantage of these capabilities, you’ll need to install the corresponding plugins.

If you have any file fields inside your application, you’ll want to allow the app to access files, media and the camera so files can be uploaded to it. Use these plugins

cordova plugin add cordova-plugin-file --save
cordova plugin add cordova-plugin-media --save
cordova plugin add cordova-plugin-camera --save
cordova plugin add cordova-plugin-file-transfer --save

If your application uses gps to track the current location, you’ll want this plugin.

cordova plugin add cordova-plugin-geolocation --save

If your application is using the offline mode plugin, you’ll want to add support for indexedDB to iOS and older devices with this plugin.

cordova plugin add cordova-plugin-indexeddb-async --save

There are many more plugins available at Cordova Plugins.

Compiling

In order to compile mobile applications with your project inside of it, you will need to build the project and then copy the resulting files into the cordova’s www directory. If you are using one of our templates and followed the steps above to create the cordova project in the cordova directory, you can do this by running the following commands from your application’s root.

gulp build
rm -rf cordova/www
cp -r dist cordova/www

Each time you make a change to your application and want to deploy those changes you will need to re-build and re-copy the source into the cordova www directory.

Finally, run the compilation for each platform you want to support.

cordova build ios
cordova build android

And emulate the apps to preview them.

cordova emulate ios
cordova emulate android

For complete documentation on compiling cordova applications, see Cordova Build