Skip to content

Instantly share code, notes, and snippets.

@rupeshtiwari
Last active December 7, 2023 01:31
Show Gist options
  • Save rupeshtiwari/a4b78077a6bfb6db88bcb09c469372db to your computer and use it in GitHub Desktop.
Save rupeshtiwari/a4b78077a6bfb6db88bcb09c469372db to your computer and use it in GitHub Desktop.
Getting Started with Cordova | Create Your First Android/IOS Application
.vscode/settings.json

Step by Step Cordova Installation Guide on Windows Machine

Please follow the steps to get Cordova installed and ready for your upcoming android ios apps.

👉🏻 Prerequisites

Before starting lets make sure you have installed and confirmed below softwares.

  • Install Node.js ( get the download file from http://nodejs.org)
  • Confirm Node.js is installed by running node --version
  • Install Git ( get the download file from http://git-scm.com. ) Node & GIt installation confirmation

👉🏻 Installing Cordova on Windows. Step#1

  • Install Cordova Npm Package Run the script to install Cordova in your windows machine

    npm i -g cordova

    👉Note: Make sure you open cmd / powershell on administrator mode

    installing cordova on windows

  • Confirm Cordova is installed by running cordova --version check cordova version

👉🏻 Installing Java Development Kit (JDK) on Windows. Step#2

Install JDK 8 & Configure Environment Variables

  1. Download the JDK 8 EXE and install it on your local machine. In order for installing go to Download Java Development Kit JDK 8.0 from here!
  • Add User/System Windows Env Variables

    • Add the jdk bin folder path (C:\Program Files\Java\jdk1.8.0_211\bin) in both user and system path in Windows Environment Variables.

      • Search for edit environment variables in windows
      • configuring environment variables for jdk bin folder configuring environment variables for jdk bin folder
  • Create JAVA_HOME User/System Variable in Windows Env Variable with Value being the installed location of the JDK for me it is C:\Program Files\Java\jdk1.8.0_211

    confirm java home on environment variables

👉🏻 Install Android Studio. Step #3

Please use your own folder path while updating environment variables.

Step 1. Download Android Studio Go to Android Studio Download Page and download android studio exe file. https://developer.android.com/studio/index.html

Android Studio Download Page

Install android studio Now!

Step 2. Update Window Environment Variables by adding sdk tools & platform-tools folder path that is below 2 Entries in User Variables

  • C:\Users\rtiwari\AppData\Local\Android\Sdk\tools
  • C:\Users\rtiwari\AppData\Local\Android\Sdk\platform-tools add tools and platform tools in environment variables

Step 3. Create ANDROID_SDK_ROOT a new User & System Windows Env Variable Variables pointing to ANDROID SDK folder: C:\Users\rupesh\AppData\Local\Android\Sdk

Android sdk root windows env variables

👉Note: You may need to restart your machine after changing user environment variables.

👉🏻 Install Gradle. Step#4

As of Cordova-Android 6.4.0, Gradle is now required to be installed to build Android.

Step 1. Download the latest Gradle distribution

Download Graddle

Step 2. Copy Gradle Bin to c:\Gradle

Create a new directory C:\Gradle with File Explorer and copy gradle-5.4.1 folder into it. Copy Gradle Bin

Step 3. Configure your system environment for Gradle.

In File Explorer right-click on the This PC (or Computer) icon, then click Properties -> Advanced System Settings -> Environmental Variables.

Under System Variables select Path, then click Edit. Add an entry for C:\Gradle\gradle-5.4.1\bin. Click OK to save.

Configure your system environment

👉🏻 Confirm Paths & Installations Step#5

👉Note: Before Confirming your paths and installations please restart your machine ignore if you already restarted after adding windows environment variables.

1. Confirm JAVA_HOME path.

Run below script in admin powershell to check JAVA_HOME path.

$ENV:JAVA_HOME

Confirm JAVA_HOME path

2. Confirm ANDROID_SDK_ROOT path.

Run below script in admin powershell to check ANDROID_SDK_ROOT path.

$ENV:ANDROID_SDK_ROOT

Confirm ANDROID_SDK_ROOT path from powershell

3. Confirm JDK 8 Installation

  • Run below script to check JDK Installed:

    • Run Below SCRIPT on Admin Command Prompt/Powershell
    javac -version

    confirming java jdk installation

4. Confirm Android Studio is installed by running below script

adb version

You should see this output: Android Debug Bridge version 1.0.41 Version 28.0.3-5475833

android studio installation confirmation

Create your First Android App using Cordova

👉🏻Step1 Create a Cordova Project

In order to publish your android app you need to first create an cordova project.

Cordova app naming convention is as described below: Cordova App Naming convention

<appname com.domain.project appname>

Example :product-mart com.rupeshtiwari.productmart product-mart

Go to desired folder location where you want to create project. Open powershell/cmd in admin mode.

🏃🏻Run below script to create project

cordova create product-mart com.rupeshtiwari.productmart product-mart

Create Cordova Project Run Script

Open project in Visual Studio Code

Open project in Visual Studio Code

🏃🏻Run npm i to install dependencies.

👉🏻Step2 Add Platform Folders

1. Add Android Platform

🏃🏻Run below script to create android platform

cordova platform add android

 Add Android Platform Script

👮🏻 Check Android folder is created under platform folder

Android platform folder explore

2. Add Browser Platform

🏃🏻Run below script to create Browser platform

cordova platform add browser

 Add Android browser Script

👮🏻 Check Browsers folder created under platform folder

Android bro browser explore

@ientropic
Copy link

Is there a second part to this? It stops after adding the browser platform.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment