Ionic From Scratch: Getting Started With Ionic
So you’ve heard about Ionic and you’re wondering how to get started? In this tutorial you will learn how to set up an Ionic development environment on your computer, as well as how to create an Ionic project.
Requirements for Coding an Ionic App
Well, congratulations, if you are viewing this article via a computer you have one of the most important prerequisites for developing Ionic apps: you will require a physical personal computer (PC) to do so. This can be a computer running Windows, Mac, or Linux.
Since we build Ionic apps using web technologies, you will also need web development tools installed. This includes a web browser (preferably Google Chrome) to run and debug our apps, and a text editor (such as Sublime, Atom, or Visual Studio Code) to write and edit our code. If you are new to development, I would recommend Visual Studio Code as it is commonly used and free.
With these basic requirements installed on your computer, let’s go ahead and install the dependencies we need to build Ionic apps.
Setting Up Dependencies and Installing Ionic
Unfortunately, there is no single installer package that automatically installs an Ionic development environment on your computer. Regardless of your operating system, you have to install each of the required dependencies manually. So let’s go ahead and get started setting up our Ionic development environment.
Ionic recommends that, when installing Node.js, you should select the most recent Long Term Support (LTS) version. In my case, as you can see above, that’s version 8.9.1 LTS. Ionic recommends using LTS versions as they are more stable.
So simply download the LTS version, go through the installer instructions, and once the installation is finished you’ll be ready to continue with the next step.
Installing Cordova and Ionic
With Node.js installed, you’re now ready to install Cordova and Ionic. Here is where things might get a little bit tricky for some, especially those that have never worked with the Command Line Interface (CLI) before. It might all look a bit daunting at first, and you might feel as if you are going to end up breaking something on your beloved computer! Well, you won’t, so just relax and try to follow along.
On Mac and Linux, search for Terminal, which is the CLI we will be using to install Cordova and Ionic. On Windows, search for Command Prompt. This is the equivalent to Terminal on a Windows PC.
Installing on Mac and Linux
With Terminal opened on Mac or Linux, type the following command and run it by pressing Enter on your keyboard.
sudo npm install -g cordova ionic
Thereafter, you might be prompted to enter a password, If so, enter the password you use to log in to your computer and press Enter again.
Installing on Windows
From the Command Prompt on Windows, type the following command and run it by pressing Enter on your keyboard.
npm install -g cordova ionic
As you might have noticed, we are using the Node Package Manager (npm) to install both Ionic and Cordova above, so it is of the utmost importance to install Node.js first! You might have also noticed that on Mac and Linux we are using
sudo in front of our command. This is necessary to allow the installation of Ionic and Cordova globally on these systems.
The install process can take a few minutes, depending on your internet connection, but once it’s done you should see something like this:
Cool, so with Ionic and Cordova successfully installed, let’s move on over to the next section and install additional software we’ll need to successfully build our iOS and Android apps from our Ionic projects.
You don’t necessarily have to install these software tools right now; you can carry on building Ionic apps using web technologies we discussed earlier on. So feel free to skip this part if you are keen to just jump right in and create your first Ionic project.
However, if you want to run your apps on a real mobile device like an Android phone or iPhone, you’ll eventually have to install the platform-specific tools for those platforms. We’ll look more closely at developing for Android and iOS devices in future tutorials.
Setup for Android Apps
If you want to be able to compile Android apps from your Ionic project, you’ll need to first install the Java Development Kit (JDK) 8 or later. Go to the JDK website, accept the license agreement, and select the relevant download option based on your operating system. Then follow the install instructions.
After you’ve successfully installed the JDK, you need to also install Android Studio, the Android IDE (integrated development environment).
With these two packages installed, you’ll be able to compile and package an Android app from your Ionic project.
Setup for iOS Apps
Building iOS apps from your Ionic projects is only possible on a Mac OS computer, unfortunately, which means you will be unable to compile or build iOS apps from a computer running Windows or Linux. (Though you can code your app now on a Windows computer, and later build it for iOS from a Mac.)
In order to compile iOS apps on your Mac OS, you will need to install Xcode. Simply head over to the AppStore on your Mac and search for Xcode. This is a free download.
After you have successfully installed Xcode, you will also need to install additional command line tools for Xcode. In order to do this, open Terminal and run the following command.
This will install additional tools Cordova will use to build your iOS projects.
To be able to build your iOS projects from the command line, you will also need to run the following command.
sudo npm install -g ios-deploy
With everything set up, you’re ready to build iOS apps from your Ionic projects.
Creating Your First Ionic Project
Ionic uses the command line—and in particular the Ionic CLI, which was automatically installed during our setup process—to create, test and build your Ionic applications. So have the courage again to open up Terminal or Command Prompt (depending on your operating system).
A quick word of advice before we continue: learn to embrace the Ionic CLI tool. It has now officially become your new friend, so learn to love it!
The first thing we need to do is specify where we want to save our Ionic project. For the purpose of this exercise, we’ll simply save it onto our desktop. So navigate to the desktop with the following command.
We have a few options for the type of Ionic application we’d like to create, and these are categorized as Ionic project templates. For the beginner, three types of templates exist: a Blank template, a Tabs template, and a SideMenu template. We will be using the tabs template in this example, so let’s go ahead and create our project.
We are going to be calling our Ionic project DemoApp. So to create our DemoApp project using the tabs template and save it onto our desktop, we need to run the following command in our CLI.
ionic start DemoApp tabs
This command will take a little while to run as it downloads all your project template packages and application dependencies. During the install you might be asked if you would like to install the free Ionic Pro SDK and connect your app. Answer No and press Enter again to continue with the install. Once installation is complete, you should see something like this:
Congratulations! You’ve successfully created your first Ionic project.
Run Your Ionic App
With the project setup complete, we are now ready to view our Ionic application. To do so, navigate to your newly created project folder via the CLI by running
cd ./DemoApp and once inside this folder run either
ionic serve or
ionic serve and
ionic lab are Ionic CLI commands that will compile your application and start up a local dev server, allowing you to view your Ionic application inside a web browser on your computer.
In the image above, I’ve run the ionic lab command, and as you can see, I’m able to view my Ionic project compiled as a web app. We still haven’t managed to compile it as a native application as yet, but we will do so in later tutorials.
I remember that when I started developing Ionic apps, it was very confusing at first, especially having to do a lot of the initial work via the CLI. As someone that was not accustomed to working with the CLI at all, this was a scary journey for me—so I can imagine how some of you might be feeling out there. My advice to you is embrace it—you’ll get more comfortable and used to it as you go along, and don’t worry, you won’t break anything on your beloved computer!
We’ve covered a lot of ground in this post, but with this knowledge you’re over one of the biggest hurdles to coding Ionic apps. Stay tuned for the next post in this series!
Until then, check out some of our other great posts about coding Ionic apps, or try one of our comprehensive video courses on Ionic app development!
Ionic 2Easy Mobile Apps With Ionic Creator
IonicGet Started With Ionic 2
App Templates15 Best Ionic App Templates
Ionic 2Introduction to Ionic 2