Here, we will discuss how to set up your machine for developing ionic applications, start a new project, and test your ionic project in local browsers.
Getting Node and NPM
Most of the tooling in the CLI is based on Node and is managed through npm. The quickest way to get Node and NPM installed on your machine is through the
NodeJS installer. Be sure to install the LTS version of Node. Close any terminals/command prompts you may have open, run the installer, and launch a new terminal window. To verify you have everything installed correctly, you can run
npm --version and
node --version. If this causes errors, please resolve before moving on. --source
(Ionicframework.com)
Installing Ionic and Cordova using NPM
Here is the process to install ionic and cordova step by step
Step 1
Open your command prompt (Better to run as Administrator)
Step 2
Type this line in command prompt and press enter.
- npm install -g ionic cordova
Wait for a while to complete the process. It will install ionic cordova globally in your pc.
Step 3
Once it is done, your cordova plugin is ready and you can create a new application using CLI. If you want to create an application in C drive then in your command prompt type
c: and type
- ionic start myFirstApp blank
Ionic start will create a new application and I am using myFirstApp as my application name. You can use your own app name. Blank will create a new blank application (No templates). You can use different types of templates. Here are some examples
- ionic start myFirstApp blank
- ionic start myFirstApp tabs
- ionic start myFirstApp sidemenu
- ionic start myFirstApp super
- ionic start myFirstApp conference
- ionic start myFirstApp tutorial
- ionic start myFirstApp aws
- Blank : A blank starter project
- Tabs : A starting project with a simple tabbed interface
- Sidemenu : A starting project with a side menu with navigation in the content area
- Super : A starting project complete with pre-built pages, providers and best practices for Ionic development.
- Conference : A project that demonstrates a realworld application
- Tutorial : A tutorial based project that goes along with the Ionic documentation
- Aws : AWS Mobile Hub Starter
Step 4
Now you have to choose if your new app with Cordova will target native iOS and Android. If you want to install iOS and Android plugins then type Y and press enter and if you dont want to install iOS and Android plugin then type N. (Currently I am installing Android and iOS plugin.)
After finishing installing iOS and Android plugin it will ask you to install the free Ionic Pro SDK and connect your app. Currently I am not installing any Pro SDK right now. Now your application is ready. You can modify your application as you want with any text editor like: Visual Studio, Visual Studio Code, Notepad ++ e.t.c.
Step 5
To run your app,
cd into the directory that was created and then run the
ionic serve -l command to test your app right in the browser!
- cd myFirstApp
- ionic serve -l
#HappyCoding