What is Ionic?

Ionic Framework makes it easy to build high-performance mobile and Progressive Web Apps (or PWAs) that look and feel beautiful on any platform or device.

Getting Started with Ionic Framework

Getting difficulties in setting up Ionic Framework? In this tutorial you will learn how to set up the Ionic environment on your localhost and starting an Ionic Project.

Setting Up Dependencies and Installing Ionic

Unfortunately, there is no single installer package that automatically installs an Ionic development environment on your computer. In setting up the environment we need to install each of the dependencies manually. So let’s go ahead and start setting up our Ionic development environment.

Install Node.js

The first dependency we need to install for ionic framework is Node.js, which is a server-side JavaScript framework. We will be using Node.js for its node package manager (npm), which will allow us to install all the packages and tools we need for our projects. We will also use Node.js to run a development server service that will let us preview apps in the browser.

Here’s the abbreviated guide on how to download and install Node.js , highlighting the major steps:

1. Open the official page for Node.js downloads and download Node.js for Windows by clicking the “Windows Installer” option.
2. Run the downloaded Node.js .msi Installer – including accepting the license, selecting the destination, and authenticating for the install.
   • This requires Administrator privileges, and you may need to authenticate
3. To ensure Node.js has been installed, run node -v in your terminal – you should get something like v8.11.3&
4. Update your version of npm with npm install npm –global
   • This requires Administrator privileges, and you may need to authenticate.
5. Congratulations – the installation process of Node.js is complete and now you are ready to start building!

Install Ionic

Finally you can install ionic as a Node.js package through the Node Package Manager (npm) directly from our command line.

npm install -g cordova ionic

Thereafter, you might have to enter a password. If so, enter the password you use to log into your computer and press Enter again.  

Install JAVA JDK and the latest version of Android Studio for android development

If you want to be able to compile Android apps from your Ionic project, first of all you’ll need to 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).

After installing these 2 packages, you’ll be able to compile and package an Android app from your Ionic project.

Setting up Environment Variables :

Java JDK

Thereafter installing the Java Development Kit (JDK) you’ll be setting the  JAVA_HOME environment variable or after installing the Java Runtime Environment (JRE) you will follow the same steps but set the JRE_HOME environment variable instead.

Set the JAVA_HOME Variable

1. Locate your Java installation directory.
2. If you didn’t change the path during installation, it’ll be something like C:\Program Files\Java\jdk1.8.0_181

   You can also type where java at the command prompt.

3. In Windows 8 – Go to Control Panel > System > Advanced System Settings
4. Click the Environment Variables button.
5. Under System Variables, click New.
6. In the Variable Name field, enter either:
   • JAVA_HOME if you installed the JDK (Java Development Kit)
     or
   •  JRE_HOME if you installed the JRE (Java Runtime Environment)
7. In the Variable Value field, enter your JDK or JRE installation path .
8. If the path contains spaces, use the shortened path name. For example, C:\Program Files\Java\jdk1.8.0_181
    
9. Click OK and Apply Changes as prompted

You’ll need to close and re-open any command windows that were open before you made these changes because there’s no way to reload environment variables from an active command prompt. If the changes don’t take effect after reopening the command window, restart Windows.

Set the JAVA_HOME variable via the command line

If you would prefer to set the JAVA_HOME (or JRE_HOME) variable via the command line:

1. Open Command Prompt (make sure you Run as administrator so you’re able to add a system environment variable).
2. Set the value of the environment variable to your JDK (or JRE) installation path as follows:
   setx -m JAVA_HOME “C:\Program Files\Java\jdk1.8.0_XX
   If the path contains spaces, use the shortened path name.
3. Restart Command Prompt to reload the environment variables then use the following command to check if it’s been added correctly.
   echo %JAVA_HOME%
   You should see the path to your JDK (or JRE) installation.

Node.js

1. Right click on My-PC and click on properties -> click on Advanced system settings -> Click on the tab Advanced -> Click on Environmental Variables… -> Select the User variable name as PATH and click on EDIT -> Set the Variable Value as = C:\Program Files\nodejs

Ionic

1. Right click on My-PC and click on properties -> click on Advanced system settings -> Click on the tab Advanced -> Click on Environmental Variables… -> Under “System Variables” variable name as PATH and click on EDIT -> Set the Variable Value as = C:\Users\”Computer username that you have used”\AppData\Roaming\npm;
2. You can add multiple variable values under a single variable name  separating them by a ;  (semicolon).

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.

Even i had difficulties initially as i was not familiar with cmd (command prompt) and its commands on how to change a directory thus i’ll make it easy for you all through proper explanation and screenshots:

So now how to save an ionic project in an ionic directory on desktop :

• cd is the command used to change a directory, as when i started my command prompt i was in system32 folder thus i used the command cd.. to get 1 step back in the directory.
• From C: drive i went into users using the command cd users and got into the desktop section Now once you are here :
  C:\Users\”PC user”\Desktop Go and create a ionictuts folder on your desktop where you will be saving ionic project.
• Once the folder is created again use the command cd ionictuts to get into the application folder.
• Now start a new Ionic Project using the command : ionic start [<name>] [<template>]

Input	Description
name	The name of your project directory
template	The starter template to use (e.g. blank, tabs; use --list to see all)

Run your Ionic App

1. Once you are in the app directory you can run the command ionic start DemoApp tabs to start a demo project.
   During the project creation it will ask you :
   • Integrate your new app with Cordova to target iOS and Android? Click on Y and press enter.
   • Install the free Ionic Pro SDK and connect your app? Click on Y and press enter.
   • What would you like to do? Link and existing app on Ionic Pro or create a new app on Ionic Pro.
     In my case ill be linking an existing app, you can create a new app by using the 2nd option. For this you need to create an Ionic Pro account first.
   • Which git host would you like to use i prefer using GitHub. In order to connect your existing app to github repository you can go to the following link : Working with GIT 
2. Thereafter get into the DemoApp Folder by using the command cd DemoApp                                            
3. And then finally run the command ionic serve in order to start the app.
   

The final project will automatically pop up:

Conclusion

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!