Building mobile apps locally with Cordova CLI

20

Features on these Courses

Stats

26,328 visits, 34,373 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 13 Oct, 2017. Last updated 14 Feb, 2019

Both Construct 2 and Construct 3 export Android and iOS apps using a technology called Cordova. This is a library that helps build and run mobile apps. Advanced users who are familiar with command-line tools can use the Cordova Command-line-interface (CLI) to manually build Android and iOS apps locally. This allows full control over the build process, such as full integration of custom Cordova plugins.

Construct 3 has its own mobile app build service. For most users this is the recommended way to build mobile apps. However there are limits on which third-party Cordova plugins can be used, and the build involves uploading your project and downloading an APK, which can be slow with large projects or slow connections. Using the Cordova CLI allows offline builds and use of any third-party Cordova plugins.

This tutorial works with both Construct 2 r246+ and Construct 3, since they export similar files. Any differences between the two will be noted.

Setting up Cordova

To set up the Cordova CLI on your computer, you'll first need to install Node.js. Then install the cordova module using npm. For Windows, use the command:

npm install -g cordova

On macOS or Linux use the command:

sudo npm install -g cordova

For more information, see the section Installing the Cordova CLI in the Cordova documentation.

At this point you should be able to enter the command cordova in a command prompt or terminal, and see that it prints help text about using Cordova.

Android setup

For Android builds, you'll need to install the JDK (Java Development Kit) and Android Studio. For more information see the Cordova Android Platform Guide.

iOS setup

For iOS builds you'll need to install Xcode from the App Store, as well as the ios-deploy npm module via npm install -g ios-deploy. Note you can only build iOS apps on a Mac. For more information see the Cordova iOS Platform Guide.

Exporting from Construct

Construct 2

In Construct 2, choose the Cordova option when exporting. It is strongly recommended to enable the Use WKWebView on iOS option for best performance, and to set a minimum Android version of 5.0 or above to reduce the size of the APK file. (Supporting Android 4.x requires bundling Crosswalk which significantly increases the APK file size.) Construct 2 will export the files to a folder on your computer.

Construct 3

In Construct 3, choose the Android (Cordova) or iOS (Cordova) options when exporting, depending on which platform you want to build for.

In the Cordova options dialog, choose Cordova project for Android build or iOS build. Construct 3 will export a zip file. Extract this zip file to a folder on your computer.

Preparing Cordova project

By now you should have a folder with config.xml in it (and possibly some other files), and a www subfolder. Open a command prompt with the current directory set to the location config.xml is in. Use the following command to prepare a full Cordova project based on the exported files:

cordova prepare

This may take a while as it fetches dependencies and configures the project.

Once it's done, if this is your first build, you might want to check you have the right software installed. You can do this with:

cordova requirements

Cordova will then tell you if it has everything it needs. If anything is missing you might have to go back and install something else. Cordova should provide instructions if so.

Building apps

To build the app, simply use:

cordova build

Testing on Android

The Cordova build command will generate a debug APK for Android. For information on testing debug APKs, see the section Testing a debug APK in the tutorial Building Android apps (APKs).

Cordova also generates an Android Studio project. If you're already familiar with Android Studio, you may prefer to continue working from there.

Testing on iOS

For iOS, if you are on a Windows or Linux machine, it will generate an Xcode project that you can then take to a Mac. On a Mac, the build command will create a debug .app file. However it's probably easier to use Xcode for testing. Be sure to sign in to your Apple Developer account in Xcode's preferences, and open the .xcworkspace file. An easy way to test is to enable Automatically manage signing in the project's settings, set the Team, connect up an iOS device, and click the Run button. You may need to have your provisioning profiles and certificates already set up though. Visit the Apple Developer site to set these up.

For more information you can also see the tutorial iOS application development and publishing with Xcode.

Next steps

From here on in you're using developer tools, so it's best to refer to their documentation. Check out the Cordova CLI reference, and the Cordova Android platform guide and iOS platform guide. Android developers may want to also take a look at the Android Studio user guide and the Google Play Console Help Center. iOS developers may also want to take a look at the Xcode help and iTunes Connect Developer Help. Happy publishing!

  • 2 Comments

  • Order by
Want to leave a comment? Login or Register an account!