Build you first simple Ionic application ( Ionic 4 ) on windows environment

About Ionic Framework

Ionic Framework is an open-source UI framework that is best for developing cross-platform native and web applications (Hybrid applications) with great UI Experience. You can use a single code base to build android, ios, and web platforms. We can build an ionic app with Angular, React, Vue, or plain JavaScript. We will create simple applications to understand this framework. 

Pre-requirements 

To get started with Ionic Framework you have to install node.js and npm (Nodejs package manager). 

01. Install node.js 

Install node js from the official download page.

Note: LTS versions of the node.js is recommended for maximum compatibility and try to install it. 

02. Install npm 

npm(node package manager) is bundled with node.js and you just have to verify it after install node.js by using the following commands on your windows CLI (command line interface).

node --version
npm  --version

Installation

We have to install Ionic command-line utility (Ionic CLI) to easily create and develop ionic apps. 

- Install Ionic CLI

npm install -g @ionic/cli

Note: If you have previous versions of Ionic CLI you have to uninstall it using following command and re install CLI using above command.

- Uninstall Ionic CLI

npm uninstall -g ionic

Create your first APP

You can use the following command to generate an Ionic app and it has several options also.

01. Run following command.

ionic start

02. Pick a framework when prompt.

 (Select Angular for this which we will develop with now)

03. Enter the Project name.

(Type mySampleApp for now)

04. Select starter template (Select 'tabs' for now) You will have the following options.

(tabs, sidemenu, blank, list & my-first-app) to select.

CLI Option
Type of project
tabs
A starting project with a simple tabbed interface
sidemenu
A starting project with a side menu with navigation in the content area
blank
A blank starter project
list
A starting project with a list
my-first-app
An example application that builds a camera with gallery

When prompt for the following message you can type "Y" to integrate the app with native on later. 

Note: Integrate your new app with Capacitor to target native iOS and Android? (y/N) 

Once complete the setup process you will see a screen like follows.

Then navigate to the newly created project folder from Ionic CLI (mySampleApp) and run the following command.

To navigate the project folder: 

cd mySampleApp

Run the application

ionic serve

 

Once you run the app you will see the following message in windows CLI and the default web browser will open with http://localhost:8100 url. 

Great job! You just created your first ionic app with angular. 

Full video

Enjoy and please comment below if you have any questions. We will help you as we can. :)