Hello Ionic

By bhagwatchouhan
Hello Ionic

This post explains all the steps required to create, build, and deploy the Hello World application using Ionic 4 on both Windows 10 and Ubuntu 18.04 LTS. The steps should be the same for other versions of Ionic, Windows and Linux.

 

It assumes that the latest version of Node.js and npm are installed on the system. You can follow How To Install Node.js On Windows and How To Install Node.js on Ubuntu to install the recent version of Node.js and npm package manager.

 

Install Ionic CLI

 

Ionic provides Command Line Interface(CLI) utility offering the wide range of dev tools and help options. Using CLI is the preferred way since it saves time to do repetitive tasks. Use the below-mentioned command to globally install Ionic CLI.

 

// Install Ionic CLI globally using -g option
npm install -g ionic

 

Create App

 

Ionic provides several pre-made app templates. The most popular starter apps are blank, tabs and sidemenu. We will start with the blank app template as shown below.

 

// Install app using blank template
ionic start hello blank

 

The app progress while installation will look similar to the one shown in Fig 1.

 

Installation Progress

Fig 1

 

It will take some time to install all the dependencies. In the end, it asks to connect the App with the Ionic Appflow SDK. We can choose either of the options. The app installation completes after choosing either Yes or No.

 

Run the App

 

In this step, we will execute the app created in the previous step using the commands as shown below.

 

// Execute the hello app
cd hello
ionic serve

 

The above command will start a local server on localhost on port 8100 and open the app using the default browser - http://localhost:8100.

 

It might show security warning as shown in Fig 2. Select private networks and discard public networks.

 

Security Warning

Fig 2

 

The console should look like the one shown in Fig 3 after a successful build of the app.

 

Build Success

Fig 3

 

The app in the browser should look like the one shown in Fig 4.

 

Application

Fig 4

 

Resolve Issues

 

You might see the error Cannot GET / in the browser in case Python and Windows Build Tools for Node.js are not installed. Follow below-listed steps in such case to install the missing tools.

 

// Close the Command Line Tools of Windows and re-start it with Administrator privileges

// Optional commands in case ionic serve does not work out of box and browser shows the error
Cannot GET /

// Press Ctrl + C to stop the hello app

// Install windows build tools
npm install --global windows-build-tools

// remove node_modules directory from hello app and run npm install to re-install all dependencies
npm install

 

The above commands will install Python and Visual Studio Build Tools. Once the installation completes, remove and re-install node dependencies.

 

Hello Ionic

 

In this step, we will modify the home screen and write our greeting message. The server on console must be kept running. It will detect the change done by us and re-build and deploy the app where required. Accordingly, the browser will be refreshed.

 

Open the file hello/src/app/home/home.page.html and update the content as shown below.

 

<ion-header>
  <ion-toolbar>
    <ion-title>
      Hello Ionic
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  It's so easy !!
</ion-content>

 

The output on the browser looks like the one shown in Fig 5.

 

Hello Ionic

Fig 5

 

These are the very basic steps to create and execute the first app using Ionic.

 

share on :

Profile picture for user bhagwatchouhan
bhagwatchouhan