In this tutorial i will give you detail information about how to create Ionic App from scratch




Installing Ionic

Ionic apps are created and developed primarily through the Ionic command line utility (the “CLI”), and use Cordova to build/deploy as a native app. This means we need to install a few utilities to get developing.

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 errors, please resolve before moving on.

Ionic CLI and Cordova

With Node and NPM setup, let’s install the Ionic and Cordova CLI.

$ npm install -g ionic cordova

Note: The -g means this is a global install, so for Windows you will need to open an Admin command prompt. For Mac/Linux, you might need to run the command with sudo.

Starting a New Ionic App

To start a new app, open your terminal/command prompt and run:

$ ionic start MyIonicProject tutorial --type=ionic-angular

  • start will tell the CLI create a new app.
  • MyIonicProject will be the directory name and the app name from your project.
  • tutorial will be the starter template for your project.

    • Along with creating your project, this will also install node modules for the application, and prompt you if you want Cordova set up.

    Along with the tutorial template, Ionic also provides the following official templates:


  • tabs : a simple 3 tab layout
  • sidemenu: a layout with a swipable menu on the side
  • blank: a bare starter with a single page
  • super: starter project with over 14 ready to use page designs
  • tutorial: a guided starter project

    • If you don’t specify a template at the start, you will be prompted to pick one.

    Viewing the app in a browser

    Now, you can cd into the folder that was created. To get a quick preview of your app in the browser, use the serve command.

    $ cd MyIonicProject/
        $ ionic serve


    I have put my project name "news"


    Follow up below for all the process

    /news/src/app/app.module.ts

    /news/src/app/app.component.ts

    /news/src/pages/home/home.ts

    /news/src/pages/home/page.ts

    /news/src/pages/home/home.html

    Note: you can clone my repo and get whole code run on your local

    after cloning the code you just have to run npm install inside project folder

    After that run following command this will run code on your local

    ionic serve

    you can see this on your browser




    Thank you for reading this article if you want whole code of this tutorial so you can get it from my git repo https://github.com/Bharat12321/ionic-news-app you can directly fork from there & run on your local system.

    After cloning the code on your local follow the instructions given below

    Run the command:

    ionic serve

    this will install all dependency on your local

    and run your code on the http://localhost:8100

    Now if you want to generate the apk for android device to run this application on your phone so you can follow below steps:

    :- First make sure to install android studio on your system. you can download it from official website for your os

    :- Install java jdk on your machine

    :- Make sure you have set ANDROID_HOME & JAVA_HOME correctly after installing them both.

    :- Add platform for android

    ionic cordova platform add android

    :- Build (prepare + compile) an Ionic project for a given platform

    ionic cordova build android

    Hurray you can see your apk file in path: platforms\android\build\outputs\apk


    Thanks for reading my article please share with your friends on social network