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 firstname.lastname@example.org 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 –
|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
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 `-- email@example.com
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.