Software setup

Now we are going to set up all the required software needed to develop and run an Ionic app smoothly.

Install Node.js

Since Ionic uses Node.js for its CLI as well as for the build tasks, we will first install the same as follows:

1. Navigate to https://nodejs.org/.
2. Click on the Install button on the homepage and an installer for your OS will automatically be downloaded. Or you can navigate to https://nodejs.org/download/ and download a specific copy.
3. Install Node.js by executing the downloaded installer.

To verify that Node.js has been successfully installed, open a new Terminal (*nix systems) or Prompt (Windows systems) and run the following command:

 node -v

Now you should see the version of Node.js. Now execute the following command:

 npm -v

You should see the npm version:

npm is a Node Package Manager that we will be using to download various dependencies for our Ionic Project.

Note

You need Node.js only during the development. The version specified in the preceding image is only for illustration. You may have the same version or the latest version of the software. This applies to all the images that show the software version in this chapter.

Install Git

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. In our case, we will be using a package manager named Bower, which uses Git to download the required libraries. Also, the Ionic CLI uses Git to download the project templates.

To install Git, navigate to http://git-scm.com/downloads and download the installer for your platform. Once you have successfully installed it, you can navigate to your terminal/prompt and run the following command:

git --version

You should see the following output:

Install Bower

We are going to use Bower (http://bower.io/) to manage our application library dependencies. Bower is a package manager similar to npm but a linear/flat version of it. This kind of package manager is more suitable for downloading the assets needed for web development.

Bower is built on top of Node.js. To install Bower globally from the terminal/prompt you need to run the following command:

 npm install bower -g

We are installing a node module named Bower globally. Hence, the –g flag. On *nix systems, you may need to use sudo to run this command:

sudo npm install bower –g

Note

If you need sudo for running the preceding command, please recheck your npm installation. Refer to http://competa.com/blog/2014/12/how-to-run-npm-without-sudo/ for more information on sudo less npm global installs.

Once Bower is successfully installed, you can verify the same by running the following command:

bower -v

Install Gulp

Next, we are going to install Gulp (http://gulpjs.com/), which is a build system that is developed on top of Node.js. Automating a lot of monotonous, tedious tasks can be taken care of by Gulp.

For instance, when your web project is ready to go live, you would want to minify the CSS, JS, and HTML, optimize the images for the Web, and push the code to your production environment; in that case, Gulp would be your go-to tool.

There are a lot of plugins in Gulp that automate most of your monotonous tasks, and it is heavily driven by the open source community. In Ionic, we will be using Gulp primarily to convert SCSS code to CSS. We use the SCSS code to customize the Ionic visual elements. We will talk more about that in Chapter 4, Ionic and SCSS.

To install gulp globally run the following command:

npm install gulp -g

For *nix systems, run this:

sudo npm install gulp -g

Once Gulp is successfully installed, you can verify the same by running this command:

gulp -v

Install Sublime Text

This is a totally optional installation. Everyone has their own preferred text editor. After running around many text editors, I fell in love with Sublime Text, purely for its simplicity and the number of Plug and Play packages.

Note

If you would like to give this editor a try, you can navigate to http://www.sublimetext.com/3 to download Sublime Text 3.

Install Cordova and Ionic CLI

Finally, to complete the Ionic setup, we will install the Ionic CLI. Ionic CLI is a wrapper around the Cordova CLI with some additional features.

Note

All the code examples in this book use Cordova version 5.0.0, Ionic CLI version 1.5.0, and Ionic version 1.0.0 (uranium-unicorn).

To install the Ionic CLI run the following command:

npm install cordova@5.0.0 ionic@1.5.0 -g

To verify the install run the following command:

cordova –v

You can also run this:

ionic –v

To get a feel of what Ionic CLI is packed with, run:

 ionic

You should see a list of tasks as seen in the following screenshot:

Note

There are a few more tasks apart from the ones seen in the preceding screenshot.

You can read through the tasks and explanations to get an idea about what they do. Also, note that some of the tasks are still in beta as of today.

With this, we have completed the installation of all the software needed to develop apps with Ionic.