Getting Started With Ionic 3 With Typescript

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.
  1. 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 
  1. 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
  1. ionic start myFirstApp blank  
  2. ionic start myFirstApp tabs  
  3. ionic start myFirstApp sidemenu  
  4. ionic start myFirstApp super  
  5. ionic start myFirstApp conference  
  6. ionic start myFirstApp tutorial  
  7. 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! 
  1. cd myFirstApp
  2. ionic serve -l
 #HappyCoding
X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now