Ionic Framework

What is Ionic Framework

What is Ionic Framework?

Ionic Framework is an open source mobile UI toolkit for building high quality, cross-platform native and web app UI experiences. It helps us to move faster with a single codebase, running everywhere, Ionic also offers a library of mobile-optimized UI components, gestures, and tools for building fast, highly interactive apps. You can create, build, test, and deploy your applications with a powerful CLI, using your favorite JS frameworks.

Since Ionic is built on top of Angular, React JS and Apache Cordova, you will need to have basic knowledge about these technologies. You also need to be familiar with HTML, CSS and JavaScript to start using it.

How to install ionic?

  1. You should have an up-to-date version of Node.js installed on your system. If you don’t, you can install it from here.
  2. Open a terminal or command to install Cordova and Ionic using following command:
  3. npm install -g cordova ionic

On a Mac, you may have to use sudo depending on your system configuration:

sudo npm install -g cordova ionic

  1. If you already have Cordova and Ionic installed on your computer, make sure you update to the latest version:
  2. npm update -g cordova ionic


sudo npm update -g cordova ionic

Creating an Ionic Application

  1. Open a new terminal or a command and navigate to the directory using CD <desired-directory>  command, where you want to create your project
  2. Using the Ionic CLI, create an application named <any-name> using following command:
  3. ionic start <project-name> (ex. ionic start first-application)
  4. The above command will start the process
  5. When asked select your favorite JS framework (ex.  Angular, React etc.)
  6. Once done , navigate to the <project-name> folder (ex. first-application)
  7. cd <project-name> (ex. cd first-application)

Running an Ionic Application

  1. Start the application in a browser using ionic serve command.

ionic serve

  1. Run locally in web browser by visiting  http://localhost:8100
  2. With ionic serve running, continue developing your app. As you save your changes, the app reloads with those changes applied.

Generating new features

  1. By running ionic generate command on Ionic CLI, a selection prompt is displayed which lists the available features that can be generated.

ionic generate

Adding user interface component to Ionic

Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your application. Ionic provides a number of components, including cards, lists, and tabs. 

  1. Visit
  2. Select desired component
  3. Copy the code and use it 

Leave a Reply

Your email address will not be published. Required fields are marked *