Edit

Build an Apache Cordova app with Azure Mobile Apps

  • Article

This tutorial shows you how to add a cloud-based backend service to an Apache Cordova cross-platform app by using Azure Mobile Apps and an Azure mobile app backend. You'll create both a new mobile app backend and a simple Todo list app that stores app data in Azure.

Complete this tutorial before continuing with other Apache Cordova tutorials about using the Mobile Apps feature in Azure App Service.

Prerequisites

To complete this tutorial, you need:

This tutorial can be completed on either Windows or Mac systems. The iOS version of the app can only be run on a Mac. This tutorial uses Windows (with the app running on Android) only.

Apache Cordova 8.1.2 or earlier required

Apache Cordova released an incompatible change to the tool in v9.0.0. If you have Apache Cordova v9.0.0 or later installed, the plugin won't work, complaining of a dependency problem with the q module.

Visual Studio Code

There is an Apache Cordova extension for Visual Studio Code that allows you to run the application with debugging. Visual Studio Code is highly recommended for Apache Cordova development.

Install Gradle

The most common error when configuring Apache Cordova on Windows is the installing Gradle. This is installed by default using Android Studio but is not available for normal usage. Download and unpack the latest release, then add the bin directory to your PATH manually.

Download the Apache Cordova quickstart project

The Apache Cordova quickstart project is located in the samples/cordova folder of the azure/azure-mobile-apps GitHub repository. You can download the repository as a ZIP file, then unpack it. The files will be created in the azure-mobile-apps-main folder.

Once downloaded, open a Terminal and change directory to the location of the files.

Deploy the backend service

To deploy the quickstart service, first login to Azure with the Azure CLI:

az login

A web browser will be opened to complete the authorization.

If necessary, select a subscription.

Create a resource group

Type the following to create a resource group:

az group create -l westus -n zumo-quickstart

This command creates a resource group called zumo-quickstart to hold all the resources we create. Replace westus with another region if you do not have access to the westus region or you prefer a region closer to you.

Deploy the backend to Azure

The service is composed of the following resources:

  • An App Service Hosting Plan on the Free plan.
  • A web-site hosted within the App Service Hosting plan.
  • An Azure SQL server.
  • An Azure SQL database in the Basic tier (incurs cost).

The Azure SQL database is the only resource that incurs cost. For details, see Pricing.

To deploy the resources, type the following commands:

cd samples/nodejs
az deployment group create -n ZumoQuickstart -g zumo-quickstart --template-file ./azuredeploy.json

Once complete, run the following command to see the outputs:

az deployment group show -n ZumoQuickstart -g zumo-quickstart --query properties.outputs

This command shows information about your deployment that you need in developing your mobile application. The database username and password are useful for accessing the database through the Azure portal. The name of the App Service is used below, and the public endpoint is embedded in your code later on.

Finally, deploy the Azure Mobile Apps server to the created App Service:

az webapp deployment source config-zip -g zumo-quickstart --name zumo-XXXXXXXX --src ./zumoserver.zip

Replace zumo-XXXXXXXX with the name of your App Service; shown in the list of outputs. Within 2-3 minutes, your Azure Mobile Apps server will be ready to use. You can use a web browser to confirm that the backend is working. Point your web browser to your public endpoint with /tables/TodoItem appended to it (for example, https://zumo-XXXXXXXX.azurewebsites.net/tables/TodoItem). The browser will display an error about a missing X-ZUMO-VERSION parameter if the server is working properly.

Deleting the resources

Once you have completed the quickstart tutorial, you can delete the resources with az group delete -n zumo-quickstart.

The tutorial is comprised of three parts (including this section). Do not delete the resources before completing the tutorial.

Configure the Apache Cordova quickstart project

Run npm install to install all dependencies.

Add a platform to the project. For example, to add the Android platform, use:

cordova platform add android

You can add browser, android, and ios as needed. The browser platform will not work with offline sync enabled. Once you have added all the platforms you wish to use, run cordova requirements to ensure all requirements have been met.

Open the www/js/index.js file in a text editor. Edit the definition of BackendUrl to show your backend URL. For example, if your backend URL was https://zumo-abcd1234.azurewebsites.net, then the Backend URL would look like this:

    var BackendUrl = "https://zumo-abcd1234.azurewebsites.net";

Save the file. Open the www/index.html file in a text editor. Edit the Content-Security-Policy to update the URL to match your backend URL; for example:

<meta http-equiv="Content-Security-Policy" 
    content="default-src 'self' data: gap: https://zumo-abcd1234.azurewebsites.net; style-src 'self'; media-src *;">

To build the app, use the following command:

cordova build

Run the app

If running from a browser (using cordova platform add browser), then you must enable CORS support within Azure App Service. To do this, run the following command:

az webapp cors add -g zumo-quickstart --name ZUMOAPPNAME --allowed-origins "*"

Replace the ZUMPAPPNAME with the name of your Azure App Service mobile backend. Once the backend is configured, run the following command:

cordova run android

Once the initial startup is complete, you can add and delete items from the list. Todo items are stored in the Azure SQL instance connected to your Azure Mobile Apps backend.

If the emulator does not automatically start, open Android Studio, then select Configure > AVD Manager. You can now start the emulator manually. If you run adb devices -l, you should see your selected emulated device. You should now be able to run cordova run android.

Apache Cordova App

Next steps

Continue on to implement offline data synchronization.