Cordova App Templates
The Apache Cordova version 6.0.0 was released in 2016 in Utah. This version added a new feature to Cordova applications. Along with the updation of default platform versions, a new template feature was added to the Cordova CLI that allows users to create an app using the templates.
Building a user interface (UI) is a crucial part of any mobile application. A set of UI components, tools, and frameworks are already available for building any mobile app using native development. But in the case of Cordova, we don’t have sufficient tools that can be used to develop a mobile app. So, the usage of templates becomes necessary to simplify the process of mobile app development.
These templates use a preexisting code that helps the user to start a project from a particular point. It creates a new application from the templates that share sample applications in a much easier way. It can be used for training purposes to keep the copies of a demo app at different stages of the development.
Downloading Templates
These templates are hosted at npm and git URLs. You can easily download these templates from the official websites by searching the keyword cordova:template on npm. You can also use templates from your local filesystem.
Supported Cordova Version
Before using the templates for your app, first, you have to check the Cordova version installed in your system because this feature was added in version 6.0.0, thereby, we must have to use the same or higher version to support this feature. Below is the command that shows the current version of cordova:
If the returned version is 6.0.0 or higher, you can use this feature for your app.
Creating a Cordova template:
We can create a new Cordova project by specifying the –template during the create command with followed template source.
The below commands creates a cordova project from NPM package, Git repository, or local path:
These specific commands create a new Cordova app named “app” in a folder of the same name and use the templates from the mentioned sources (i.e., npm, git, or local filesystem).
The content of the app will set into a below structure. When using the templates, all the contents available in the template_src are used for creating a new application.
template_package/
├── index.js (required)
├── package.json (optional)
└── template_src/ (required)
└── DATA OF APP TEMPLATE
- index.js file must define a reference to template_src
- package.json must define a reference to index.js
At last, to end the template, you can simply manipulate the package.json file and type the keyword “cordova:template“.
You have successfully made a template for your Cordova app. You can also share your templates on npm so that the user can develop an app in a simplified manner.
Creating a Cordova Template using Git Repository
In this section, we are creating a Cordova template by using the Git Repository. But before going ahead, firstly, we have to create an app that can be used as a template and need to store it in the respective format of a git repository.
For doing this, we create a new Cordova project by typing the below command on command prompt:
Here, we add iOS and Android platforms for the Cordova app by typing the below command:
Note that here we are using –save for each platform. This –save keyword adds an entry into the config.xml file of the app. This file is responsible for informing Cordova about the platform used by the app.
If you want to create a Cordova app using the templates from the Git repository, type the below command on the command prompt:
When we execute the above command, Cordova CLI creates a new app and shows the below output:
Make sure that the following is present in the root of the git repository:
www – This folder contains the necessary files of an app like HTML, CSS, and JavaScript.
config.xml – This file stores the essential plugins and platform of an app. If you want to learn more about the config.xml file, you can click on the link: https://tutoraspire.com/cordova-config-xml-file
If you’re going to make any changes in the app, you can simply do it by applying those changes inside the www folder.
To run the app, we need to download the correct plugins and platform dependencies. Type the below command to run the app:
If Cordova does not have the required platforms and plugins, it will download them for us:
The above commands install the required plugins and platforms for the application.