Full Ionic Framework Setup In Ubuntu Step-by-step tutorial

Ionic Framework is useful for building mobile apps like Android and iOS. This post will help you to install Node.js, Cordova and Ionic framework on your system in Ubuntu.

As Ionic Framework depends on cordova, you need to install it first. To install Cordova, make sure you have Node.js installed. Following step by step guide shows what to do to install ionic so that you can build your brand new ionic app right away. This post is intentionally made precise rather explaining much stuffs. Lets get going!

  • Install JDK 8:

sudo add-apt-repository ppa:webupd8team/java  sudo apt-get update  sudo apt-get install oracle-java8-installer  sudo apt-get install oracle-java8-set-default
  • Install Node.js:

If you don’t have cURL installed, then install it first:

If you want to install cURL from repositories, the cURL is in Ubuntu repositories.

To install or update nvm:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

or Wget:

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

then –

sudo apt-get install curl

Run the following set of commands to install curl 7.50.3 on Ubuntu 16.04 in Terminal.
The same procedure can be followed for Ubuntu 15.04, Ubuntu 14.04 and other Ubuntu Derivatives:

 wget http://curl.haxx.se/download/curl-7.50.3.tar.gz

 tar -xvf curl-7.50.3.tar.gz

 cd curl-7.50.3/

 ./configure
 make

sudo make install

Once installed We Can verify cURL using:

 curl –version
Node.js

Node.js is a free, open-source and cross-platform Javascript run-time environment to execute server-side Javascript code. It can be used to develop intensive and dynamic web applications such as video streaming sites and single-page applications. Here the first command will install some required packages on the system. The second command will add PPA for node.js to your system. sudo apt-get install python-software-properties python g++ make sudo add-apt-repository ppa:chris-lea/node.js

Preliminary Step for Installing Node:

First, log in to your server as your non-root user. Before doing anything else, let’s update the package database:

sudo apt update && sudo apt upgrade -y

There are a few methods which can be used to install Node.js on Ubuntu. We shall look at two methods.

Method 1 : Installing Bundled Node.js for Ubuntu 

You will usually need npm as well, so to install Node.js and npm via Ubuntu default depositories, execute:

sudo apt install nodejs npm

Once the installation is completed, you may want to verify the version of Node.js installed:

:~ $ nodejs -v
 [secondary_label output] v9.2.1

You can also check the version of npm installed:

:~ $ npm -v  5.5.1

Method 2 : Installing Latest Node.js 9.x  on Ubuntu 

Instead of installing from Ubuntu default depositories, you may want to install the latest version of Node.js. To do that, you need to add the PPA (Personal Package Archive) maintained by NodeSource for Ubuntu.

curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash -

After adding the PPA, you can proceed to install Node.js which also includes npm when you install using this method:

sudo apt install -y nodejs

After the installation is completed, you can verify the version of Node.js installed:

node -v
[secondary_label output]
 v9.3.0

You can also check the version of npm installed:

 npm -v 
[secondary_label output] 5.5.1

For Method 2, in order to allow some npm packages to work (like compiling code from source), you need to install the build-essential package:

sudo apt install build-essential

Method 3 : Installing Latest Node.js using NVM

If you require to install multiple, self-contained versions of Node.js, then you need to use the nvm (Node.js version manager) method. Using the nvm, you can install and select which Node.js version to use.

Firstly, we need to install some requisite packages from the Ubuntu repositories in order for nvm to work:

sudo apt install build-essential libssl-dev

Once completed, we want to download and execute the nvm installation script. The current version is <^>v0.33.2<^>, which you may want to substitute with the latest version by checking out their GitHub page.

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

The script will create and clone the nvm repository into ~/.nvm directory inside your home directory. It will also add source lines into your profile (either ~/.bashrc, ~/.bash_profile or ~/.profile).

After the nvm installation is completed, you need to log out from your Ubuntu and log in again in order for nvm to work properly.

Next, we want to find out what versions of Node.js are available for installation:

nvm ls-remote
[secondary_label output]. . .        v8.8.0        
v8.8.1          v8.9.0   (LTS: Carbon)         v8.9.1   (LTS: Carbon)
v8.9.2   (LTS: Carbon)
v8.9.3   (Latest LTS: Carbon)
v9.0.0
v9.1.0
v9.2.0
v9.2.1
->     v9.3.0

The latest version at the time of writing this tutorial is v9.3.0. You may see newer versions instead. To install Node.js v9.3.0, enter:

nvm install <^>9.3.0<^>

You may replace 9.3.0 with whichever version number you require. You can also repeat installing other versions as you wish.

By default, nvm will use the most recently installed version. If you want to switch to another version, for example 9.0.0, use the following command:

nvm use <^>9.0.0<^>

To check which versions have been installed, enter:

nvm ls

You can make any installation as the default version. For instance, if you want to make 9.0.0 as the default version:

nvm alias default <^>9.0.0<^>

You can also select the default version by executing:

nvm use default

We have seen three methods to install Node.js on your Ubuntu server. While Method 1 is the easiest, you may want to choose Method 2 if you want to get the latest version of Node.js. If you need to run multiple versions of Node.js, then you need to use Method 3 to install.

  •  Install Cordova:

    Now use the following command to install Cordova on your system using npm command. It will install all other required node modules on your system.

 sudo npm install -g cordova

If you are running a 64-bit version of Ubuntu, you’ll need to install the 32-bit libraries since Android is only 32-bit at the moment.

sudo apt-get install ia32-libs  

If you are on Ubuntu 13.04 or greater, `ia32-libs` has been removed. You can use the following packages instead:

sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0  
  • Install Ionic Framework:

Ionic provides and commands line utility for creating packages, build and start applications. Use NPM command to install Ionic framework on your system.

sudo npm install -g ionic

After completing the installation of the Ionic framework, use following command to check installed version.

ionic -v

3.1.9
  • Create Your Project:

Now, its time to create a new cordova project:

ionic start <projectname> blank

If you get Error: Cannot find module ‘xmlbuilder’, follow this step:

* Remove nodejs
* Delete the /usr/lib/node_modules (/usr/local/lib/node_modules) folder
* Reinstall nodejs
* Clear the npm cache (npm cache clean)
* Reinstalling ionic

  • Run App with Browser:

Go to your project root and run:

ionic serve

This will run demo app on your browser. While app is running, you can use following commands to do specific tasks needed:

  #restart or r to restart the client app from the root

#goto or g and a url to have the app navigate to the given url

#consolelogs or c to enable/disable console log output

  #serverlogs or s to enable/disable server log output

  #quit or q to shutdown the server and exit

If you are ok with web view of your app, then you’re done. Above steps are all you needed. But if you want to test your app on emulator/real device, keep moving..

  • Install Android Studio/ Android SDK to work for Android:

Make sure you’ve Oracle JDK 8 installed in your system

Download and install android SDK from official site:

Go to the location where you set to download the file.

  1. Rigth click the file[.tgz] and select Extract
    Here
    .

  2. Now you can see that a file called android-sdk-linux appears as if the following.
  3. Enter the folder android-sdk-linux.

  4. Enter the folder tools and then copy the folder location.

  5. Press the keys CTRL + ALT + T to open a terminal and then use the following command. Where /home/ep/Downloads/android-sdk-linux/tools is the location I copied previously. You can just type cd and right click to past the location to the terminal.

cd
/home/ep/Downloads/android-sdk-linux/tools
./android

Now the Android
SDK Manager
will be run.

Installing Packages

Click
Install [Number] packages....Click Accept
License
and then click Install.

Wait for the installation process

Finally, this message will be shown.

 

Editing “.bashrc”

Press CTRL + ALT + T to open a new terminal and type : gedit
~/.bashrc

Now the following text will appear.

 

Add the following to the top of the entire text and then save it. (Do not close the file)

export PATH=${PATH}:~/android-sdk-linux/tools export PATH=${PATH}:~/android-sdk-linux/platform-tools

[Recommended] Move the whole file android-sdk-linux to your eclipse’s workspace and under a folder that you create named Android. Moreover, you have to copy the location.

Now back to the “.bashrc” file and the replace the ‘~’ with the location you copied previously and then save it and close it.

  • Logout and relogin into Ubuntu.

 

We have now completely installed ionic into our ubuntu system and set up every essential configurations.

 

Thanks

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *