For enthusiastic developers, staying trendy and innovative can give them not only bread and butter, but also help them live their dreams. Mark Zuckerberg, Steve Jobs and Bill Gates are living examples of exemplary innovation. For those who want to step on this path, knowing Ionic will bring them closer to their dreams, since it is a disrupting technology at the moment. Therefore, it is our dedicated endeavour to help folks understand the way to kick-start and jump to new heights in their journey of app and website development. In this tutorial, newbies will learn about ways to setup the Iconic on their computer for app and website development. With the help of this tutorial, you can easily create apps for iOS and Android.
First and foremost, you will require a computer running either of the operating systems; Windows, MAC OS, or Linux. But we are sure you already have that since you have stumbled upon this tutorial.
We will be using web technologies to build apps using Ionic so you will require the web development tools to be installed on your computer. The tools include an Internet browser, Google Chrome is preferable, to run and debug the apps you code. You will also require a text editor to write the code, some good ones are Sublime, Atom or Visual Studio Code. However, if you are completely new to development, we recommend using Visual Studio Code as it is the most commonly used text editor and comes completely free of cost.
With these basic set of tools installed on your computer, you are ready to begin setting up Ionic for your machine., so let’s begin without wasting any more time.
Setting up Dependencies and Installing Ionic
Setting up the Dependencies to create a complete ionic development environment is a bit of a hassle as there is no single package available. You will have to install all the required dependencies individually on your machine. So let’s get started.
It is highly recommended by us as well as Ionic developers that you install the latest available LTS version of Node.js as it will have a long-term support along with improved stability as compared to the current version. You can see in the above image that the LTS is 8.9.1, it may be different right now as it keeps getting updated so if you encounter a newer version, there is no need to worry. Just make sure that you are installing the LTS version only.
Download the package and install it by going through the instructions thoroughly one by one. Let’s continue to the next step after installation of Node.js.
Installing Cordova and Ionic
Now that we have finished installing Node.js, its time for the real deal; Installing Cordova and Ionic. Now, you may find this a little bit tricky if you are new in this field but just read the instructions carefully and you will find that they are quite easy to do.
We will be using a terminal to install Cordova and ionic. The terminal is basically a CUI (Command Line Interface) in which you can give commands to your computer in text form. So let’s see how to install Cordova and Ionic using the terminal on Windows, Mac, and Linux.
Installing on Windows
Just open the start menu and search for Command Prompt with the search bar and open it. This is the terminal for a Windows PC.
Enter the following command into CMD and press enter.
npm install-g cordova ionic
That’s it, you are done.
We are using the Node package manager in Windows referenced to with npm to install both Cordova and Ionic on the PC.
Installing on Mac and Linux
Search for Terminal on your Mac/Linux and open it. Now you will be presented with an interface with a blinking underscore, that’s where we will type the commands and execute them.
Just write the below command on your terminal and press enter.
sudonpm install-g cordova ionic
After pressing enter, it may ask you for a password. Simply enter the one you use to log on to your Mac or Linux at the startup. Press Enter, and that is it, you have successfully installed Cordova and Ionic on your Mac/Linux.
We are using the SUDO command on Mac and Linux to install Cordova and Ionic. SUDO command allows administrator privileges to the terminal so that the install process can be authorized.
After executing the respective command on Windows, Mac or Linux, you will see something like this.
It could take some time before the installation is complete, so instead of getting worried about it, just sit back and relax.
Now that we have installed both Cordova and Ionic on our system, let’s get to the next part where we will teach you how to install the additional software and development kits you will require to create apps for both Android and iOS.
Platform Specific Setup
If you only want to create Ionic apps, you can just do it by using the packages and web tools we have already installed. You can just jump right into building your first Ionic Project below.
However, if you are keen to run apps on a real Android or iOS device, you will need to install the platform-specific requirements. Let’s see how to just set these up.
First and foremost, you will need the Java Development Kit 8 or later, more commonly referred to as JDK. Just go to the JDK website and download the appropriate package according to your machine’s software and hardware configuration. Accept the license agreement and follow the installation instructions.
After completing the installation for JDK, Android Studio will be required to compile and Android App package. Android Studio is an integrated development environment designed by Google specifically to test and create apps for Android.
You are now all set to start with your Android apps.
Setting up the environment for iOS Apps
iOS App development with Ionic has a restriction that you can only do it on a computer running the Mac OS, which is only made by Apple. You will not be able to compile or build iOS apps from a computer which is running Linux or Windows. Although, you can code the app on any system and later test it on a machine running Mac OS.
To compile iOS apps on Mac OS, you will need Apple’s own IDE, the Xcode. To install Xcode, simply open the App Store on your Mac and install Xcode by searching it from the search bar. Xcode is a free download so you won’t have to pay any money for it.
After the installation of Xcode, you will need to install and enable some command line tools for it through the terminal as we did before. Open the terminal and enter the following command.
Press enter. This will enable additional tools that will be used by Cordova to build iOS projects.
You will also need to run the following command to successfully build iOS projects.
sudonpm install-g ios-deploy
You are now ready to begin with your iOS projects.
Building your first Ionic Project
Ionic uses the command line interface to create, test and build Ionic applications, more specifically this is known as the Ionic CLI i.e. Ionic Command Line Interface. We have already installed it in previous steps. Now you will have to open the Command Prompt or Terminal again depending on which Operating System you are using.
Now, before we get into it, We would like to share some thoughts about the CLI with you. You may find the Command Line Interface hard, so hard that it may make you want to stop learning the thing in the first place. We want you to know that it gets amazingly handy once you have memorized the commands. Just embrace the tool and don’t be scared of it. With some time and practice, you will find that CUIs are easier to work with GUIs. So let’s get started.
The first step we need to do is to tell the computer where we want to save our project, the exact location. In this example, we are saving it on the desktop. You can do it simply by entering the following command.
Now that we have set the destination path for saving our project on the desktop we have a few options to select from to decide which type of Ionic application we want to create. These categories are termed as Ionic Project Templates. For the basic level, there are three types; Black Template, Tabs Template, SideMenu Template. We will be using the Tabs Template for our example.
Now, we need to decide a name for our Ionic project, we are calling it DemoApp for this example. Now the exact command to create a new project DemoApp with the tabs template and saving it on the desktop is written below. You can execute the same on your system.
ionic start DemoApp tabs
After hitting enter, it may take a while for the command to complete its execution so just relax and let it do its work. It will also download the required template packages and dependencies so you must have a working internet connection. The speed will majorly depend on it.
You might be asked if you would like to install the Ionic Pro SDK and connect your app to it. Simply answer NO and press enter to continue the installation. Once all the downloads and installation have been completed, you will see something similar to the screenshot below.
That’s it, you have successfully begun your first Ionic project. Now, let’s see how to run an Ionic app below.
How to run Ionic App
Navigate to the project folder we just created via CLI, in this case, DemoApp by using the below command.
Now that we are inside the project folder, execute either of the two commands given below.
1. ionic serve
2. ionic lab
The aforementioned ionic server and ionic lab commands are used to compile an application and start a local development server which will allow you to view your Ionic app in the web browser as shown below.
The above image is a result of running the ionic lab command, the ionic project has been compiled as a web app.
As a Beginner, everybody faces many problems when getting started with a new programming or scripting language from scratch. Especially with the CLI or the syntax parts. But it all gets easier with time and practice. We advise you to start with the very basics when developing your first app instead of trying to make an app which could change the world. You may already have the idea to do it but you will need proper experience to implement it in the correct way. Hurrying up things while developing something is not the good way to go so just keep practicing and you shall reach your goals.
We hope we were able to help you with this tutorial.
Thanks for reading.