Ubuntu Environment Setup for Ionic Development

Arjun Panicker
Software Analyst
July 13, 2018
Rate this article
Views    2824

Ionic is an open source mobile app development framework that makes it easy to build top quality apps in very less amount of time. It has a set of components which are mostly mobile view oriented and easy to integrate and even has a very good cloud platform for Ionic project management called Ionic Pro.

For more information on Ionic, please head over to its Wiki Page or to its official website.

I know that there is a proper documentation for installing and setting up the environment for ionic but that is not OS specific. In this post, I will walk you through most of the steps required to set up the environment in Ubuntu as I myself faced many challenges during that time.

Starting off with the installation of your favorite code editor and/ or IDE. I personally prefer VS Code by Microsoft which is open source, mostly because of the vast plugin resources it has and a powerful backing by Microsoft.

Okay, so we can download the installer package from the VS Code official website. Follow the steps to successfully install VS Code.

  1. Download the “.deb” file (for Ubuntu).
  2. open your downloads folder and right click there and select the option to open the terminal there.
  3. Run the following command in terminal to install VSC
    sudo dpkg -i <filename>
  4. This will install the VSCode for you. You can use the tab key to get the filename.

Next, we will install NodeJS. At the time of writing this blog, the stable release of NodeJS is v8.11.3 LTS and v10.6.0 is the current. If you are an experienced NodeJS developer, you can go with the current version else, go with the LTS (Long Term Support) version.

  1. From Ubuntu v16.04, NodeJS default PPA (Personal Package Archives) is shipped with it.
  2. So, you can directly run the following command to install both NodeJs and NPM (Node Package Manager)
    sudo apt-get update
    sudo apt-get install nodejs npm
  3. To check whether NodeJs is properly installed or not, run the following command to check the version installed.
    nodejs -v

If it returns some version number, NodeJS has been installed properly. For further configurations or if you want to use a different PPA for NodeJS, head over here to check out how to install NodeJS using different PPA. Now, we can get started installing ionic and its dependencies.’

First off, you should know that ionic contains its own CLI for generating the boilerplate code for developers and many templates are available to for selection. Run the following command to install ionic:
npm install -g ionic
Now, let’s start installing the dependencies required for ionic for building Android targetted applications.

  1. First, it requires JAVA 8 or above to run. webupd8team provides a good PPA to get the java installer package. To install Java from this PPA, we must first set this PPA in our machine. To do so, invoke the following command:
    sudo add-apt-repository ppa:webupd8team/java
  2. Now, you have to update your source list so that the PPA addition can also take effect after which you can download the java package.
    sudo apt update;  
    sudo apt install oracle-java8-installer

    To install Java 9, make java8 ->java9.

  3. Follow the onscreen steps to complete the installation.
  4. To check whether the environment variables are inserted properly, this PPA has a method to check whether it exists or not.
    sudo apt install oracle-java8-set-default
  5. You can check the installation by running the following command:
    java -version
    If you have installed JDK 8, then it will output:

    java version "1.8.0_171"

Next, we will install Gradle, which is a package manager and build tool just like NPM. It uses an SDK manager called SDKMAN!. The installation instructions for the same can be found here.

Note: If you don’t have ‘curl’ package installed, you can install the same by running the following command in the terminal:
sudo apt install curl -y
Next, we will install the Android studio.

    1. Go to this website and download the package for Ubuntu.
    2. This page contains a good enough guide explaining the installation procedure for Android Studio.

Cordova’s CLI tools require some environment variables to be set in order to function correctly. The CLI will attempt to set these variables for you, but in certain cases you may need to set them manually. The following variables should be updated:

    1. Set the JAVA_HOME environment variable to the location of your JDK installation
    2. Set the ANDROID_HOME environment variable to the location of your Android SDK installation
  1. It is also recommended that you add the Android SDK’s toolstools/bin, and platform-tools directories to your PATH

The environment variables in Ubuntu are set in a file called environment.

    1. Open your terminal and execute the following command to open the environment file.
      sudo -H gedit /etc/environment
    2. This file only accepts variable assignments like:
      VARNAME="my value"
    3. You need to log out from current user and login again so environment variables changes take place.

Head over to this page to know more about setting environment variables in ubuntu.

 

That’s it! Now we are ready to start ionic development. Head over to ionic’s get started guide to start your journey into hybrid app development using Angular.

Subscribe To Our Newsletter
Loading

Leave a comment