Create an Apache Cordova app
This tutorial shows you how to add a cloud-based backend service to an Apache Cordova mobile app by using an Azure mobile app backend. You create both a new mobile app backend and a simple Todo list Apache Cordova app that stores app data in Azure.
Completing this tutorial is a prerequisite for all other Apache Cordova tutorials about using the Mobile Apps feature in Azure App Service.
To complete this tutorial, you need the following prerequisites:
- A PC with Visual Studio Community 2017 or newer.
- Visual Studio Tools for Apache Cordova.
- An active Azure account.
You may also bypass Visual Studio and use the Apache Cordova command line directly. Using the command line is useful when completing the tutorial on a Mac computer. Compiling Apache Cordova client applications using the command line is not covered by this tutorial.
Create an Azure mobile app backend
Sign in to the Azure portal.
Click Create a resource.
In the search box, type Mobile Apps.
In the results list, select Mobile Apps Quickstart, and then select Create.
Choose a unique App name. This will also be part of the domain name for your App Service.
Under Resource Group, select an existing resource group or create a new one (using the same name as your app).
Click Create. Wait a few minutes for the service to be deployed successfully before proceeding. Watch the Notifications (bell) icon in the portal header for status updates.
Configure the server project
Click the App Services button, select your Mobile Apps back end, select Quickstart, and then select your client platform (iOS, Android, Xamarin, Cordova).
If a database connection is not configured, create one by doing the following:
a. Create a new SQL database and server. You may need to leave the connection string name field to the default value of MS_TableConnectionString in order to complete step 3 below.
b. Wait until the data connection is successfully created.
c. Data connection must be successful.
Under 2. Create a table API, select Node.js for Backend language.
Accept the acknowledgment, and then select Create TodoItem table. This action creates a new to-do item table in your database.
Switching an existing back end to Node.js overwrites all contents. To create a .NET back end instead, see Work with the .NET back-end server SDK for Mobile Apps.
Download and run the Apache Cordova app
- Visit the Azure portal.
- Click App Services > the backend that you created.
- In the mobile app settings, click Quickstart > Cordova.
- Under Configure your client application, select Create a New App, then click Download.
- Unpack the downloaded ZIP file to a directory on your hard drive, navigate to the solution file (.sln) and open it using Visual Studio.
- In Visual Studio, choose the solution platform (Android, iOS, or Windows) from the drop-down next to the start arrow. Select a specific deployment device or emulator by clicking the drop-down on the green arrow. You can use the default Android platform and Ripple emulator. More advanced tutorials (for example, push notifications) require you to select a supported device or emulator.
- To build and run your Cordova app, press F5 or click the green arrow. If you see a security dialog in the emulator requesting access to the network, accept it.
- After the app is started on the device or emulator, type meaningful text in Enter new text, such as Complete the tutorial and then click the Add button.
The backend inserts data from the request into the TodoItem table in the SQL Database, and returns information about the newly stored items back to the mobile app. The mobile app displays this data in the list.
You can repeat steps 3 through 5 for other platforms.
Now that you completed this quick start tutorial, move on to one of the following tutorials:
- Add Offline Data to your Apache Cordova app.
- Add Authentication to your Apache Cordova app.
- Add Push Notifications to your Apache Cordova app.
Learn more about key concepts with Azure App Service.
Learn how to use the SDKs.
We'd love to hear your thoughts. Choose the type you'd like to provide:
Our feedback system is built on GitHub Issues. Read more on our blog.