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.
How to install ionic?
- 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.
- Open a terminal or command to install Cordova and Ionic using following command:
- 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
- If you already have Cordova and Ionic installed on your computer, make sure you update to the latest version:
- npm update -g cordova ionic
sudo npm update -g cordova ionic
Creating an Ionic Application
- Open a new terminal or a command and navigate to the directory using CD <desired-directory> command, where you want to create your project
- Using the Ionic CLI, create an application named <any-name> using following command:
- ionic start <project-name> (ex. ionic start first-application)
- The above command will start the process
- When asked select your favorite JS framework (ex. Angular, React etc.)
- Once done , navigate to the <project-name> folder (ex. first-application)
- cd <project-name> (ex. cd first-application)
Running an Ionic Application
- Start the application in a browser using ionic serve command.
- Run locally in web browser by visiting http://localhost:8100
- With ionic serve running, continue developing your app. As you save your changes, the app reloads with those changes applied.
Generating new features
- By running ionic generate command on Ionic CLI, a selection prompt is displayed which lists the available features that can be generated.
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.
- Visit https://ionicframework.com/docs/components
- Select desired component
- Copy the code and use it