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.
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 firstname.lastname@example.org: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
Finally, build a deployable version of the app into the /dist directory by running.
If you are not using one of our templates, use whatever build mechanisms you have set up.
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:
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.
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.
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