The Ionic Framework command line utility makes it easy to start, build, run, and emulate Ionic apps. In the future, it will also have support for our mobile development services and tools that make Ionic even more powerful.
Use the ionic --help command for more detailed task information.
$ sudo npm install -g ionic$ ionic start myApp [template]There are three choices of templates:
- Side-Menu (sidemenu)
- Tabs (tabs)
- Blank (blank)
Command-line flags/options:
--app-name, -a ...... Human readable name for the app (Use quotes around the name)
--id, -i ............ Package name set in the <widget id> config, ie: com.mycompany.myapp
--no-cordova, -w .... Do not create an app targeted for Cordova
Use ionic serve to start a local development server for app dev and testing. This is useful for both desktop browser testing, and to test within a device browser which is connected to the same network. Additionally, this command starts LiveReload which is used to monitor changes in the file system. As soon as you save a file the browser is refreshed automatically. View Using Sass if you would also like to have ionic serve watch the project's Sass files.
$ ionic serve [http-port] [livereload-port] [options]Command-line flags/options:
[--nobrowser|-b] ...... Disable launching a browser
[--nolivereload|-r] ... Do not start live reload
$ ionic platform ios android$ ionic build ios$ ionic emulate ios$ ionic run iosUpdate Ionic library files, which are found in the www/lib/ionic directory. If bower is being used
by the project, this command will automatically run bower update ionic, otherwise this command updates
the local static files from Ionic's CDN.
$ ionic lib updateUsing Ionic's service, you can compile and package your project into an app-store ready app without requiring native SDKs on your machine.
$ ionic package debug androidThe third argument can be either debug or release, and the last argument can be either android or ios.
Ionic uses Cordova underneath, so you can also substitute Cordova commands to prepare/build/emulate/run, or to add additional plugins.
Note: we occasionally send anonymous usage statistics to the Ionic team to make the tool better.
By default, starter projects are hooked up to Ionic's precompiled CSS file, which is found in the project's www/lib/ionic/css directory, and is linked to the app in the head of the root index.html file. However, Ionic projects can also be customized using Sass, which gives developers and designers "superpowers" in terms of creating and maintaining CSS. Below are two ways to setup Sass for your Ionic project (the ionic setup sass command simply does the manual steps for you). Once Sass has been setup for your Ionic project, then the ionic serve command will also watch for Sass changes.
ionic setup sass
- Run
npm installfrom the working directory of an Ionic project. This will install gulp.js and a few handy tasks, such as gulp-sass and gulp-minify-css. - Remove
<link href="proxy.php?url=https%3A%2F%2Fgithub.com%2Flib%2Fionic%2Fcss%2Fionic.css" rel="stylesheet">from the<head>of the rootindex.htmlfile. - Remove
<link href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fcss%2Fstyle.css" rel="stylesheet">from the<head>of the rootindex.htmlfile. - Add
<link href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fcss%2Fionic.app.css" rel="stylesheet">to the<head>of the rootindex.htmlfile. - In the
ionic.projectfile, add the JavaScript propertysass: trueto the object.