Setting Up Development Environment:
Following are the necessary tools required to set up Ionic development environment:
- Node.js : Download the node.js from : https://nodejs.org/en/ Since the Ionic framework is built on top of Node, we need to install Node.js in order to develop Ionic applications. Once the node is installed, we can check version of node by using command: node -v. Also to check installed npm – package manager, we can use the command npm -v.
- Ionic CLI : Install Ionic CLI using command: npm install -g ionic. Once the Ionic CLI is installed, verify it using command: ionic -v.
Starting a new app:
Ionic CLI makes it easy to create Ionic applications. To create a new application, use the following command:
ionic start testApp
This command will generate ionic project in current directory. We can select a template to start with from available templates. Following are the few of the available official templates:
- blank: Simple Template with a page.
- tabs: A 3 tab layout
- sidemenu: Layout with side menu.
- super: A layout with different ready to use designs.
- tutorial: Guided starter project.
To list all available templates, run the following command. This command will list all available starter templates:
ionic start –list
To check the created application, navigate inside the application directory and run the following command:
This will open the created application in the web browser.
Now, let’s test our testApp using browser. Navigate inside testApp directory, and run ionic serve command. This will open our app in the default system browser. We should get the following ionic application page.
Note: We have used ionic app starter template blank for our testApp.
Adding mobile platforms:
To view our app in emulator or devices, first we need to install respective device platforms. To add target platforms, navigate inside created ionic project directory, and use following command. Here platformname is android/ios/ windows:
ionic cordova platform add [platformname]
Previewing app on emulator:
To view the app on an emulator, use the following command:
ionic cordova emulate [platformname]
Previewing on Devices:
To view the app on real devices, we can use the following command:
ionic cordova run [platformname]
Following are the used versions details:
In this post, we created a sample ionic app with blank starter template. We also saw how to test our created app using browser, emulator and on a real time device.