Creating a Cordova Project Using Visual Studio Code

Perform the following steps to create a Cordova project using Visual Studio Code:

Install NodeJS (if it is not already installed on your machine).
Visit https://nodejs.org to download the latest Node installation package.
Using the Node Package Manager (npm), install the Cordova libraries globally if they are not already installed on your machine.
Use the command npm install –g cordova to download and install Cordova globally on your machine.
Set up your build environment depending on your platform:
- For iOS devices
  Set up your iOS build environment on a Mac system, if it is not already configured. Refer to the Cordova reference guide for iOS development at https://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html.
- For Android devices
  Set up your Android build environment either on a Mac or Windows machine, if it is not already configured. Refer to the Cordova reference guide for Android development at https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html.
Create your Cordova project using the Unisys Cordova project template, depending on your platform.
For Windows, perform the following:
1. When ePortal Developer is installed, a node package called “unisys-hybrid-cordova-template.tar.gz” is placed in the “<ePortal Developer Installation Directory>\Packages” folder. This package must be installed globally on your system using the following Node Package Manager (npm) command:
```
npm install –g <ePortal Developer Installation Directory>\Packages\unisys-hybrid-cordova-template.tar.gz
```
  Note: If you have an older version of this template already installed on your system, then you must uninstall it before the new version is installed. Execute the following command to uninstall the previous template:
```
npm uninstall -g unisys-hybrid-cordova-template
```
2. After the node package is installed globally on Windows, the contents of the package are placed in the “Users\<username>\AppData\Roaming\npm\node_modules” folder. After running the Node Package Manager (npm) command, a folder called “Unisys-cordova-template” is created, containing Unisys modules that can be used as a template to create a Cordova project with ePortal capabilities.
3. From the command prompt or Terminal window of Visual Studio Code, go to the directory where the Cordova project folder will be created (for example, C:\CordovaProjects).
4. Use the following syntax to create a new Cordova project folder with the Unisys Cordova template that was previously installed:
```
cordova create <project folder> <package id> <display name>  --template <template location>\unisys-hybrid-cordova-template
```
  For example:
```
cordova create myApp  com.unisys.myApp MyApplication --template C:\Users\John\AppData\Roaming\npm\node_modules\unisys-hybrid-cordova-template
```
  This creates a basic Cordova project, and also applies the files contained in the Unisys template to the project folder.
  Note: If you do not need to use the ePortal components supplied in the template for loading a website into a WebView, then execute the Cordova create command without the template option.
For Mac OS X, perform the following:
1. After installing ePortal Developer on Windows, copy the node package called “unisys-hybrid-cordova-template.tar.gz” from the “<ePortal Developer Installation Directory>\Packages” folder to a suitable location on the Mac (for example, /Users/<username>/Downloads). The package must be installed globally on your system using the following Node Package Manager (npm) command:
```
npm install –g <location of package on Mac OS X>/unisys-hybrid-cordova-template.tar.gz
```
  For example:
```
npm install –g /Users/john/Downloads/unisys-hybrid-cordova-template.tar.gz
```
  Note: If an older version of this template is already installed in your system, then before installing the new version, you must uninstall it. Execute the following command to uninstall the previous template:
```
npm uninstall -g unisys-hybrid-cordova-template
```
  After the node package is installed globally on Mac OS X, the contents of the package are placed in the hidden folder “/usr/local/lib/node_modules”.
2. From a Terminal window on the Mac, go to the directory where the Cordova project folder will be created (for example, /Users/<username>/Documents/CordovaProjects).
3. Use the following syntax to create a new Cordova project folder with the Unisys Cordova template that was previously installed:
```
cordova create <project folder> <package id> <display name>  --template <template location>/unisys-hybrid-cordova-template
```
  For example:
```
cordova create myApp  com.unisys.myApp MyApplication --template /usr/local/lib/node_modules/unisys-hybrid-cordova-template
```
  This creates a basic Cordova project, and also applies the files contained in the Unisys template to the project folder.
  Note: If you do not want to use the ePortal components supplied in the template for loading a website into a WebView, then execute the Cordova create command without the template option.
Load the project in Visual Studio Code.
After creating the Cordova project folder using the Unisys template, the files from the Unisys template are applied to the project. You can open the project folder in Visual Studio Code.
Open the file called “index.html” from the “www” folder and update the following HTML tag in the Body section of the document:
```
<div data-url="URL of the Website to be loaded" data-mvc-spa="false" class="apploading"></div>
```
Modify this statement as follows:
- Update the data-url property to include the url of the website to be loaded into the WebView on the mobile device (for example, https://myCompany/mySite).
- Update the data-mvc-url property to specify whether it is a Unisys MVC Single Page application being loaded (data-mvc-spa=”true”) or if it is a standard website being loaded (data-mcv-spa=”false”).
The App title can also be modified by changing the default value of the title tag,
```
<title>*** YOUR APP TITLE HERE*** </title>
```
Add the required platforms to your Cordova project.
Before testing your application, add the platform (iOS, Android or both) to the Cordova project using the following Cordova command from either the command prompt or Integrated Terminal in Visual Studio Code:
- For iOS development: Cordova platform add ios
- For Android development: Cordova platform add android
Develop your Cordova project using HTML, CSS, or Javascript technologies.
Debug and test your Cordova application. See Debugging and Testing Your Project for more information on debugging an application.