Ionic is a framework for building hybrid mobile apps using the web technologies you know and love, Angular and Cordova. The Ionic 2 release (currently in beta) leverages Angular 2 (also in beta) and ES6, and you can opt into TypeScript if you prefer. It allows you to write your application code once in HTML, CSS and JavaScript and deploy to multiple targets using the same code and have them look and feel like native iOS and Android apps. In this quick tip I will cover installing the Ionic framework and how to get started creating an app.
Installing
First install Node.js from their official packages, Homebrew (Mac), Chocolatey or Scoop (Windows). Ionic uses the package manager of Node.js, npm, for installation.
On OSX and Linux open a Terminal and run:
npm install -g ionic@beta
npm install -g cordova
On Windows open Command Prompt run:
C:\>npm install -g ionic@beta
C:\>npm install -g cordova
Note: Ionic 2 requires the @beta tag until the full version is released.
Create a Project
The Ionic 2 package can install both v1 and v2 projects. Create a new v2 project with ionic start <name> --v2, e.g.
ionic start my-mobile-app --v2
cd my-mobile-app
If you’re curious about TypeScript you can include it with the --ts flag.
ionic start my-mobile-app --v2 --ts
Run in the Browser
To open the app in your browser run:
ionic serve
This will compile your assets and start a local development server.
You will now be at the ionic prompt, to return to you normal prompt type quit.
Add a Platform
Add a platform with ionic platform add <platform>, e.g.
ionic platform add ios
ionic platform add android
To build and run an app you’ll need to have installed the SDKs for each platform that you want to target. To check you have everything installed needed for the platforms you have added run:
cordova requirements
Note: To run iOS apps locally you’ll need XCode installed. For Android development I recommended installing GenyMotion to help with emulated devices.
Run on a Platform
Run the apps with ionic run <platform> e.g.
ionic run ios
ionic run android
This command will re-compile the assets, and install on the device with Cordova.
One nice thing about Ionic is that the single code base is styled to suit each platform. Colors, fonts, icons, form elements and components all look the part. The Ionic team also take performance seriously, so you’ll be hard pressed to tell an application apart from their native cousins.
Your Application
The custom code for your app sits under the app directory and is just a collection of HTML and JavaScript (or TypeScript)
During development you can do the majority of the coding and testing in the browser with ionic serve. To test on a device you’ll need to build and run with ionic run <platform> to see the changes reflected in an simulator.
Next Steps
- You can write ES6 in your Ionic Apps thanks to Babel and Browserify.
- Sass is enabled by default.
- You can use Ionic Components in your HTML or build your own with HTML, CSS and JS.
- You have Native Components which are wrappers around Cordova plugins for access to device features.
- For simpler apps, you can just Theme it
If you haven’t used Cordova before it’s worth reading SitePoint’s Quick Tip on Installing Cordova as that’s what Ionic is built on top of.
Next I recommend the Ionic 2 Tutorial which explains how to get started with pages and navigation, and SitePoint has plenty of articles covering Ionic to dig deeper.
Ionic makes it possible to build cross-platform mobile apps extremely quickly and comes with a great component library that’s easy to extend. Enjoy!
Frequently Asked Questions about Installing the Ionic Framework for HTML5 Apps
What are the prerequisites for installing the Ionic Framework?
Before you can install the Ionic Framework, you need to have Node.js and npm (Node Package Manager) installed on your system. Node.js is a JavaScript runtime that’s required to run the Ionic Framework, while npm is a package manager for JavaScript that’s used to install Ionic. You can download Node.js and npm from the official Node.js website. Once you have Node.js and npm installed, you can install the Ionic Framework by running the command ‘npm install -g ionic’ in your terminal or command prompt.
How do I create a new Ionic project?
Once you have the Ionic Framework installed, you can create a new Ionic project by running the command ‘ionic start myApp tabs’ in your terminal or command prompt. This command creates a new Ionic project with the name ‘myApp’ and the ‘tabs’ template. The ‘tabs’ template is a basic Ionic app with a tab-based layout. You can replace ‘tabs’ with other templates like ‘blank’ or ‘sidemenu’ to create a different type of app.
How do I run my Ionic app in a browser?
After creating your Ionic app, you can run it in a browser by navigating to the app’s directory in your terminal or command prompt and running the command ‘ionic serve’. This command starts a local development server and opens your app in a web browser. You can then interact with your app and see your changes in real-time as you develop.
Can I use the Ionic Framework to develop apps for both Android and iOS?
Yes, the Ionic Framework allows you to develop apps for both Android and iOS using a single codebase. This is possible because Ionic uses web technologies like HTML, CSS, and JavaScript to create apps, which can then be wrapped in a native container for each platform. However, to build and run your app on each platform, you’ll need to have the appropriate SDKs (Software Development Kits) installed.
How do I add platform-specific code to my Ionic app?
While the Ionic Framework allows you to share most of your code across platforms, there may be times when you need to add platform-specific code to your app. You can do this by using the ‘platform’ service provided by Ionic. This service allows you to check the platform your app is running on and execute different code depending on the result.
How do I update the Ionic Framework to the latest version?
You can update the Ionic Framework to the latest version by running the command ‘npm update -g ionic’ in your terminal or command prompt. This command updates the global installation of Ionic to the latest version available on npm.
How do I use Ionic components in my app?
Ionic provides a wide range of pre-built components that you can use in your app. These components include buttons, lists, cards, and more. You can use these components by importing them in your app’s module and then using their corresponding tags in your app’s HTML.
How do I debug my Ionic app?
You can debug your Ionic app using the browser’s developer tools. When you run your app in a browser using the ‘ionic serve’ command, you can open the developer tools and use the JavaScript console to debug your app. You can also use breakpoints, inspect elements, and view network requests to help debug your app.
Can I use Angular with the Ionic Framework?
Yes, the Ionic Framework is built on top of Angular, a popular JavaScript framework for building web and mobile apps. This means you can use Angular’s features and concepts, like components, services, and modules, when developing your Ionic app.
How do I test my Ionic app on a real device?
You can test your Ionic app on a real device by building your app for the desired platform and then installing the resulting app package on your device. To build your app, you can use the ‘ionic cordova build’ command followed by the platform name, like ‘android’ or ‘ios’. Once the build is complete, you can install the app package on your device for testing.
Mark BrownHello. I'm a front end web developer from Melbourne, Australia. I enjoy working on the web, appreciate good design and working along side talented people I can learn from. I have a particular interest in visual programming so have fun working with SVG and Canvas.
