IONIC - 2.2 Installing IONIC

Click here for more videos available on our youtube channel !

Now that Node.js is installed, we can install Ionic on our system. To do that, we use a CLI: CLI stands for Command Line Interface, the tool that lets us interact with our system from the terminal. We go to the official Ionic installation page and copy the install command, then paste it into our terminal.

The command to install the Ionic CLI globally is:

npm install -g @ionic/cli

On macOS or Linux, prefix it with sudo if needed and enter your password when prompted; on Windows the sudo prefix is not required. Once the installation is complete, the Ionic CLI is available from anywhere in the terminal: we can use it to create new Ionic projects, run them, build apps and so on.

Creating and running your first Ionic project

In the terminal, navigate to the folder where you want your new Ionic project to live, then run ionic start. The CLI asks a few questions. First, the project name: I chose ionic-angular-course, but feel free to pick any name. Then you choose the framework you want to work with, for example Angular or React. Finally, you pick a starter template: blank for a totally empty project to build from scratch, sidemenu for a page with a side menu, or tabs for an app with a tab menu. We pick blank, which generates a new project and installs all dependencies, including Angular and the Ionic libraries. This download takes a moment, so let it finish before going further.

Once it is done, navigate into the newly created project folder and run:

ionic serve

The Ionic CLI then starts a development server that runs your application, and you can see your first Ionic app in the browser. That is it for this first part on installing and starting an Ionic project. If you run into issues during the installation, do not hesitate to rewatch the video and to check the documentation — sites like Stack Overflow are also a great help. In the next video, we will start customizing this Ionic application.

Summary

Learn how to install the Ionic CLI (Command Line Interface) on your system using npm, which enables you to interact with and manage Ionic projects. After installation, create a new Ionic project by running `ionic start`, selecting your preferred framework (Angular, React, or Vue) and choosing a starter template (blank, sidemenu, or tabs). Finally, launch your development server with `ionic serve` to run your application locally and begin development.

Key points

  • Ionic CLI (Command Line Interface) is a tool that allows you to interact with your system and manage Ionic projects from the terminal
  • Install Ionic globally using npm with the command: sudo npm install -g ionic (sudo required on Mac/Linux; not on Windows)
  • Verify installation by running 'ionic --version' to confirm the CLI is available system-wide
  • Create new projects using 'ionic start' which prompts you to name your project and select a framework (Angular recommended for most use cases)
  • Choose a starter template: blank (empty project), sidemenu (pre-built side navigation), or tabs (pre-built tab navigation UI)
  • Run 'ionic serve' to start the development server and test your application in a browser during development

FAQ

Is Node.js installation required before installing Ionic?

Yes, Node.js must be installed first as it provides npm (Node Package Manager), which is used to install Ionic globally on your system.

Do I need to use 'sudo' when installing Ionic?

On Mac and Linux, you need 'sudo' for the npm installation command. Windows users do not need 'sudo' as they have different permission handling.

What is the difference between the starter templates (blank, sidemenu, tabs)?

The 'blank' template is an empty project allowing you to build from scratch. 'Sidemenu' includes a pre-built side navigation menu, while 'tabs' includes a tab-based navigation UI, both providing helpful starting points for common UI patterns.