The great thing about Ionic is that with one codebase, you can build for any platform using just HTML, CSS, and JavaScript. Follow along as we learn the fundamentals of Ionic app development by creating a real app step by step.

List of tools that we required to start development with the ionic framework.

Node & NPM:- As a node is the basic building block of most of the application. Henceforth, we required this for ionic development too. We need to install the node in our system over to run NPM commands, Also by installing this we will able to use many built-in features by running few simple NPM commands.

To check whether not node is installed on your system, run the following command in the command prompt.

Command:- To check the current version of Node and NPM
⦁ node --version
⦁ NPM --version

This command will show your current installed version of a node in your system.

Ionic CLI:- Ionic CLI is basically used to develop any ionic app. The ionic command-line utility is also the main tool through which we can run the app and connect with other services such as ionic app flow.

To install the Ionic CLI, once after installing the node from the official site. Open the command prompt and run the following command init.

Command:- To install “ionic/CLI” in the system
⦁ NPM install -g @ionic/cli

Note:- Here -g option means, the ionic/CLI is going to install on a global level.

If you have already installed an older version of ionic in your system then, you need to uninstall the older version of ionic first due to a change in the package name.

⦁ npm uninstall -g ionic
⦁ npm install -g @ionic/CLI 

Visual Studio Code:- visual studio is just a code editor powered by Microsoft. It's one of the best editors available in the market. It gives you the freedom to works with various programming languages as well as scripting languages like C#, javascript, Angular framework, and many more. I personally recommend using visual studio code, as I’m going to use this tool throughout the tutorials.

Quick Summary of the above steps: To set up the ionic environment on our system, we need three tools. Node and npm package manager, Ionic CLI, and an editor here I’m using visual studio code, but you can use whatever you're like.

As we have set up the environment successfully. It’s time to create our first ionic application. For this, firstly you need to switch to the directory where you want to create your ionic project. Once you will be on the desired folder/directory, run the following command in the command prompt. 

Syntax:- Ionic start {Name of your project} tabs
Command:- To create a new ionic application
⦁ ionic start HackHackathon tabs

Once you run this command, ionic CLI asks you few questions like, what framework you gonna use with your ionic application. Here in this tutorial, we gonna use Angular. So I’m going to select angular here.

Next, it's going to ask you, do you want to integrate “Capacitor” to target native ios and android?

Select “No” for now. Basically, the capacitor is a plugin that provides abilities to our ionic app to interact with native features of android and iOS devices. Such as working with the camera, mobile storage, location, and much more. But we not going to the complexity of android/ios features right now so select “no”. we will install this later.

Once after selecting the No for the above question and press enter, ionic CLI starts the creation of our project this may going to take some time to create the application for the first time as it will create lots and files and dependencies that we gonna need in our application.
Once the project is created successfully, navigation the project directory using a command prompt and run the following command to lunch our first ionic application.

Command:- To run the ionic application

⦁ ionic serve 

 Great!!! You have successfully created your first ionic application.

Also Learn:

How to use inner Join in Linq c#