Basic Environment Setup

Before we can install and start building an application with the Ionic CLI - the command line interface provided by Ionic to help create and build apps - we need to get everything set up on our computer first. The key things we will need to do are:

• Install NodeJS (you may already have this installed)
• Install the Ionic CLI
• Install Xcode (if you want to build iOS applications locally) - requires macOS
• Install Android Studio (if you want to build Android applications locally)

In this lesson, we will focus on setting up Node and the Ionic CLI. Since we will be using Capacitor throughout this course, you may still need to update your version of NodeJS even if you have it installed already - I recommend making sure you are using whatever the current LTS version of NodeJS is listed on nodejs.org. We will discuss the actual installation steps in a moment.

We will focus on setting up Xcode and Android Studio in separate lessons. If you don’t want to bother with installing/setting up Xcode and Android studio now, you don’t have to. This is only required for creating the native builds that will run on devices and can be submitted to the Apple App Store and Google Play. If you just want to jump in and start learning Ionic, this step can be done much later (and if you are just interested in creating a Progressive Web Application, you won’t ever need to install Xcode or Android Studio at all).

An important thing to note is that macOS is required to install Xcode and create native builds with Capacitor. This could be your own Mac computer, one you borrow from a friend or even a virtual macOS machine that you might access through the Internet. There is no getting around the fact that the Mac operating system is required in some capacity to build native builds for iOS, though. Ionic does provide a paid service called Appflow that can perform the iOS builds for you (so that you don’t need a Mac yourself), so that is an option if you don’t have a Mac but want to build iOS applications. Appflow is also a great option in general for managing builds and deploys for both iOS and Android (even if you do have a Mac).

Installing Node (for Windows users)

You will find when working in web development that most of what you find is oriented toward a macOS/Linux environment. If you are using a Windows machine, and some tutorial tells you to run a command in the terminal, you might often be disappointed when it doesn’t actually work for you.

IMPORTANT: If you are using a macOS or Linux-based operating system, then you can skip straight to the Installing Node Installing Node (for macOS/Linux) section that follows this one.

In the past, it has been awkward to do web development on Windows but now with WSL (Windows Subsystem for Linux) things are a lot easier. There are some steps required to get set up though. I would recommend:

1. Watching this video for a general introduction and advice. This video contains additional tips you don’t specifically need but are great quality-of-life improvements
2. Reading this article for Angular-specific steps you can follow

Make sure to follow the steps outlined for installing Node on Windows. When completing this course, you should use WSL and not the standard Windows terminal.

Installing Node (for macOS/Linux)

If you are using macOS/Linux then you will generally have an easier time getting set up. To install Node, all you need to do is visit the NodeJS website and download the LTS version of node.

Installing n

It is also a good idea to install the n package. This is a version manager for Node, and allows you to easily switch to whatever version of Node you want to use. Capacitor requires at least Node version 8.6.0 for example (this shouldn’t be a problem for you if you already have the latest LTS version), but other tools you use may require different versions. Using n allows you to run a one-line command to switch between versions. To install n just run the following command (after installing NodeJS):

npm install -g n

Then you can switch to whatever Node version you like using the following command format:

n 14.15.1

As a default, you should use whatever the current LTS version is (as listed on the website).

Install the Ionic CLI (Command Line Interface)

Once you have NodeJS installed, you will be able to access the node package manager or npm through your command terminal. This will allow you to install the Ionic CLI.

Keep in mind that the Ionic framework and the Ionic CLI are two different things. You aren’t actually installing the Ionic framework, just the CLI. After you have installed the CLI, you will use it to generate a project that includes the Ionic framework.

Install the Ionic CLI by running the following command in your terminal:

npm install -g @ionic/cli

It is better to install global packages like this with standard permissions, but if you get permission errors you can also force an install with:

sudo npm install -g @ionic/cli

To ensure that the Ionic CLI has been installed successfully, you can run the following command to check:

ionic --version

This should output the current version of the Ionic CLI that you have installed. If you are having trouble with your installation, you can always run the doctor command to attempt to check automatically for issues:

ionic doctor check

and you can use the following command to attempt to automatically fix issues:

ionic doctor treat

If you are still having trouble, a good step for flushing out issues is to completely uninstall the Ionic CLI:

npm uninstall -g @ionic/cli

and then try again after ensuring you have an appropriate version of NodeJS and npm installed. To see a full list of commands available you can also run:

ionic help

But we won’t need to use many of these.