The first step of the journey is to install the Inoic framework and create the first Ionic Starter Project.

Let’s start from the scratch.

Basic Env. Setup

Installing Ionic needs NodeJS and NPM. So firstly, we need to install them.

Using the installer that NodeJS website provides to install both NodeJS and NPM.

Once done, be sure to update NPM by sudo npm install npm -g.

If you are running Mac OSX, I recommend to use Homebrew to install NodeJS and NPM and manage them.

# In Terminal
# Install Homebew
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
# Install NodeJS and NPM
brew install node

If you cannot run npm update npm -g to update NPM, please check my another post to fix it.

Install Ionic and Cordova

Ionic needs Cordova. So we install both of them as “global package“.

# In Terminal
npm install -g cordova ionic

It will also install CLI for both Ionic and Cordova.

Create Ionic Starter Project

Use ionic start command to create a new project. And the command syntax is:

# template can be "blank", "tabs", "sidemenu", "maps", "salesforce", "complex-list". 
# http://ionicframework.com/getting-started/
ionic start [App_Name] [template]

For example, if run ionic start ionic-boilerplate tabs, the code structure should be like this:

ionic-boilerplate/
├── README.md
├── bower.json
├── config.xml
├── gulpfile.js
├── hooks
│   ├── README.md
│   └── after_prepare
│       └── 010_add_platform_class.js
├── package.json
├── platforms
│   └── ios
│       ├── CordovaLib
│       ├── HelloCordova
│       ├── HelloCordova.xcodeproj
│       ├── cordova
│       ├── platform_www
│       └── www
├── scss
│   └── ionic.app.scss
└── www
    ├── README.md
    ├── css
    │   └── style.css
    ├── img
    │   ├── adam.jpg
    │   ├── ben.png
    │   ├── ionic.png
    │   ├── max.png
    │   ├── mike.png
    │   └── perry.png
    ├── index.html
    ├── js
    │   ├── app.js
    │   ├── controllers.js
    │   └── services.js
    ├── lib
    │   └── ionic
    └── templates
        ├── chat-detail.html
        ├── tab-account.html
        ├── tab-chats.html
        ├── tab-dash.html
        └── tabs.html

Set up Dev Env.

The Ionic Starter Project comes with the following tools that facilitates development.

Run the following command to install Gulp, bower, and other dependencies.

npm install

As pointed out by Gulp’s official documentation, we need to install Gulp both globally and locally. So if you have not installed Gulp globally, run npm install --global gulp to do it.

Start to Dev

After done it, you are ready to go for development. Just simply run ionic serve --lab and Ionic will open your browser and load your app.

Check my another blog to learn more about the power of ionic serve.

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>