Explains all the steps required to create the Hello World application using Ionic 4

Hello Ionic
Hello Ionic
March 10, 2019

This post explains all the steps required to create the Hello World application using Ionic 4. The steps should be the same for other versions of Ionic.

It assumes that the latest version of Node.js and npm are installed on the system. You can follow this tutorial 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.

Write a Comment

Click on the captcha image to get new code.
Discussion Forum by DISQUS