Installing ionic 2 SDK and Dev Tools on Ubuntu 14.04 LTS

The very first step in developing any application or software is to get started with the development environment, which usually consists of operating system, application framework, SDK, code editor etc. Here we will look at development environment which consists of “ionic 2 SDK and Dev Tools” and Installing ionic 2 SDK and Dev Tools on Ubuntu 14.04 LTS.

I will capture the ionic 2 SDK and Dev tools with respect to how it is setup on Ubuntu 14.04 LTS. I will keep this post updated from time to time as and when ionic 2 framework progresses forward.

Refer Here: Official Documentation of Installing Ionic

So Lets get started:

What ionic 2 SDK and Dev Tools are required?

While I am writing this post ionic 2 is still in Beta Phase. I have installed in my demo installation ionic@2.0.0-beta.35 release. Ionic 2 is quickly moving towards RC releases, which are definitely going to be production worthy in very near future. This doesn’t mean that you can’t start building or experimenting with the applications using ionic 2. Following list will capture the ionic 2 SDK and Dev tools, lets have a look –

SDK/Tool/Platform Version Remarks
OS Platform Ubuntu 14.04 Also likely to work with all releases after Ubuntu 12.04 LTS. Recommended to Choose LTS releases only.
NodeJS  v5.12.0 As of now, Version 5.x and above can be used.
npm (Node Package Manager) 3.8.6 As of now, Version 3.x and above can be used.
 Apache Cordova  6.3.0  5.x and above can be used

Installing NodeJS and NPM Package Manager

NodeJS is the run time environment for developing server-side web applications. Node Server is used by ionic 2 applications for rendering the apps while in development phase. Simplest way to install node is to download node packages from https://nodejs.org/en/. You can download the LTS versions, or the latest versions.

Please note that NPM comes as part of the Nodejs package and separate installation is not required.

Now once package is downloaded, untar the package and copy to /opt/node-xxx directory.

# tar -zxvf node-v5.12.0-linux-x64.tar.gz
# ls
node-v5.12.0-linux-x64 node-v5.12.0-linux-x64.tar.gz
# mv node-v5.12.0-linux-x64 /opt/node512/

You can check the versions of installed node and npm applications, but before that you need to update the PATH variable so that your command line shell can find the installed applications.

To do so, open ~/.bash_profile

# vim ~/.bash_profile

and add following line

PATH=$PATH:/opt/node512/bin

Close and save the file and source the file into your bash or shell environment –

# source ~/.bash_profile

Now you can check the versions of node and npm, by using following commands

# node --version
 v5.12.0
 #npm --version
 3.8.6

Now, we can move to the next step of installing Ionic 2 framework

Installing Ionic 2

# npm install -g ionic@beta
/opt/node512/bin/ionic -> /opt/node512/lib/node_modules/ionic/bin/ionic
/opt/node512/lib
`-- ionic@2.0.0-beta.35

As we can see above, ionic version 2.0.0-beta.35 has been installed. Once ionic 2 is installed, its time to create our first Ionic application.

root:demo# ionic start cutePuppyPics --v2
Creating Ionic app in folder /home/ajay/a/ionic2/demo/cutePuppyPics based on tabs project

Downloading: https://github.com/driftyco/ionic2-app-base/archive/master.zip

[=============================] 100% 0.0s

Downloading: https://github.com/driftyco/ionic2-starter-tabs/archive/master.zip

[=============================] 100% 0.0s

Installing npm packages...

Adding initial native plugin

[=============================] 100% 0.0

Saving your Ionic app state of platforms and plugins
Saved platform
Saved plugins
Saved package.json

♬ ♫ ♬ ♫ Your Ionic app is ready to go! ♬ ♫ ♬ ♫

Make sure to cd into your new app directory:
cd cutePuppyPics

To run your app in the browser (great for initial development):
ionic serve

To run on iOS:
ionic run ios
To run on Android:
ionic run android

To test your app on a device easily, try Ionic View:
http://view.ionic.io

Building an Enterprise App? We can help!
http://ionic.io/enterprise

New! Add push notifications, live app updates, and more with Ionic Platform!
https://apps.ionic.io/signup
New to Ionic? Get started here: http://ionicframework.com/docs/v2/getting-started

As you can see above, creating application using ionic is super easy. You only need to use “ionic start” command. Ionic Start will do all the heavy lifting for you, and scaffold the application for you. It downloads all the necessary base files and files for starting tabs.

root:demo# cd cutePuppyPics/
root:cutePuppyPics# ionic serve

Running 'serve:before' gulp task before serve
[19:47:40] Starting 'clean'...
[19:47:40] Finished 'clean' after 13 ms
[19:47:40] Starting 'watch'...
[19:47:40] Starting 'sass'...
[19:47:40] Starting 'html'...
[19:47:40] Starting 'fonts'...
[19:47:40] Starting 'scripts'...
[19:47:40] Finished 'scripts' after 152 ms
[19:47:40] Finished 'fonts' after 160 ms
[19:47:40] Finished 'html' after 180 ms
[19:47:41] Finished 'sass' after 1.4 s
8.3 MB bytes written (6.28 seconds)
[19:47:51] Finished 'watch' after 11 s
[19:47:51] Starting 'serve:before'...
[19:47:51] Finished 'serve:before' after 8.68 μs

Running live reload server: http://localhost:35729
Watching: www/**/*, !www/lib/**/*
√ Running dev server:  http://localhost:8100
Ionic server commands, enter:
  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

ionic $

Following are significant pieces of the above log –

Running live reload server: http://localhost:35729
Watching: www/**/*, !www/lib/**/*

Ionic dev environment is awesome and it supports live reloading of any changes which are made to any of the files in the project repository. So here all the files and folders in www directory are being watched by the server started at http://localhost:35729. Any change to these files is served in the browser in real time.

Development server is started at URL http://localhost:8100, from where application can be accessed.

Here is the snapshot of the ionic demo application being served in the browser.

So Guys, this concludes my post on Installing ionic 2 SDK and Dev Tools on Ubuntu 14.04 LTS. I hope this was valuable. If you find any errors/issues with the content, you can let me know by writing in comments below or you can directly send a message by going to the Contact Us Page.

My next post will talk about useful ionic commands and ionic application code structure.

Cheers, happy learning and happy Coding.

Leave a Reply

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

Bitnami