How to Build Hybrid Mobile Application Using Cordova on Cloud

by Ahmed Khan  September 6, 2016

Given the recent changes in the server stack, you can now use NPM projects on Cloudways. In this tutorial, I am going to setup Cordova on Cloudways. Next, I will build an hybrid mobile application on Cloudways using Cordova and deploy it on an Android phone. Let’s get started.

hybrid mobile app using cordova on cloud

What is Cordova

Apache Cordova provides a set of APIs that enables you to develop an application using HTML, CSS and JS. Cordova has a command line interface where you can develop applications for Android,IOS, Windows Phone and other mobile OS.

Before setting up Cordova, make sure you have launched a PHP Stack Application on Cloudways. If you don’t have account on Cloudways Sign Up Now.

Once done, you will be redirected to Launch a new server instance. From the drop-down menu, select PHP Stack.

Fill in the Application name and Server name.

Next, select the hosting provider and the server location nearest to the users and click Launch Server.

Wait for Cloudways to setup a server for you.

Setting Up Cordova On Cloudways

Setting up Cordova on Cloudways is quite easy. Following are the prerequisites for the process:

  1. JDK
  2. Android Environment
  3. Cordova

Make sure that you are signed in to your Cloudways account. On the platform, launch ssh terminal and then head to public_html folder of the PHP Stack Application.This is the folder where Cordova would be set up. Now use the following command to reach the folder:

Now in this folder type the following command to install Cordova.

installing cordova

Wait for npm to finish installation for cordova. Once the installation finish, go to private_html folder using the following command.

In this folder, I will setup JDK, Android Environment and set up their HOME_PATHS. Now, type the following command to download JDK in this folder.

installing jdk on linux

Once the download finishes, type the following command to un-tar the file.

untar jdk

Next, setup the JAVA_HOME path for Cordova. Type the following command to access the JDK folder

Type following command to get the full path for JDK.

setting java_home in linux

Copy the full path, paste it after JAVA_HOME and press Enter

Now let’s install Android Environment. For this, type the following command to go back to private_html folder.

Go to the Android Studio download page, scroll down to the end of the page where it says Get just the command line tools and copy the URL for Linux Android.

download android command tool for linux

Now in ssh, type the following command to download it to private_html folder.

wget android

Now type the following command to un-tar the file.

untar android tool

Type the following command to go into the Android folder

Type the following to command to get the full path for the folder

setting android home in linux

Now type the following command to set ANDROID_HOME path.

Next, update android tools so that it can install android SDKs and its tools. Type the following command to update it.

updating android sdk in linux

Wait for Android to update its SDK and platform tools.

updating android sdk

At this point, all the requirements for Cordova are in place. It is time to create a startup app using Cordova and build an Android app.

Creating A Demo Cordova App

Type the following command to access public_html folder where Cordova is installed

Let’s add a path for Cordova bin folder to the pre-defined PATH so I can use Cordova CLI directly. Type the following command to go into Cordova bin folder.

Now in the folder, type the following command to set up Cordova’s path

Next, type the following command to go back to root of public_html and create a project with the name firstapp

creating cordova project

Type to following command to go to the app folder.

Let’s check this app in the browser. Open the staging URL of PHP stack application where you are creating the app. Add the following line to the URL

Once you hit Enter, you will see the Cordova Hello World page.

cordova hello word web

Now that the Hello World Cordova app is up and running, it is time to connect it to Android platform and create the apk file for it.

In the firstapp folder, type the following command to add Android platform to the Cordova app.

adding android on cordova application

Once the command finishes its process, type the following command to build the Android app

build android apk using cordova

Wait till Cordova finishes building the Android application. Once done, head to the folder which appears after the process finishes.

android apk path cordova

Now .apk has been created. Download it on your phone using FilleZilla and run it.

running cordova app on android

This is the first screen that appears when the app launches. This means that the app has been created without any issues.

Conclusion:

In this tutorial, I demonstrated how you can get benefit from npm on Cloudways. I started with setting up Cordova on cloud, built a hybrid mobile app and deployed it to an Android phone. In case of any questions or suggestion, feel free to comment below. 🙂

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About Ahmed Khan

Ahmed was a PHP community expert at Cloudways - A Managed PHP Hosting Cloud Platform. He is a software engineer with extensive knowledge in PHP and SEO. He loves watching Game of Thrones is his free time. Follow Ahmed on Twitter to stay updated with his works. You can email him at ahmed.khan@cloudways.com

Stay Connected:

You Might Also Like...