Ionic CLI is growing more powerful day-by-day. At the time of writing, the latest version of Ionic CLI is 1.5.5. Since we have been using Ionic CLI 1.5.0 throughout the book, I will be talking about the options from this.
You can log in to your Ionic cloud account in any one of three ways.
First, using a prompt:
ionic login
Second, without a prompt:
ionic login --email [email protected] --password 12345678
Finally, using environment variables. You can set IONIC_EMAIL
and IONIC_PASSWORD
as environment variables and Ionic CLI will pick them up, without prompting. This could be considered a rather unsafe option, as the password would be stored in plain text.
First we are going to take a look at the No Cordova flag option.
The Ionic start
task is one of the simplest ways to scaffold a new Ionic application. In this book, we have used Ionic start
to always create a new Cordova/Ionic project. But we know that Ionic can be used without Cordova as well.
To scaffold an Ionic project without Cordova, you need to run the Ionic start
with a -w
flag or —no-cordova
flag:
ionic start -a "My Mobile Web App" -i app.web.mymobile -w myMobileWebApp maps
The generated project would look like this:
. └── myMobileWebApp ├── bower.json ├── gulpfile.js ├── ionic.project ├── package.json ├── scss │ └── ionic.app.scss └── www ├── css ├── img ├── index.html ├── js ├── lib └── templates
Now, as usual, you can use the cd
command to go to the myMobileWebApp
folder and run ionic serve
.
To initialize a project with SCSS enabled by default, you can run the ionic start
task with a –s
or a —sass
flag:
ionic start -a "Example 1" -i app.one.example --sass example1 blank
To view the list of all templates up for grabs, run ionic start
with a -l
or a --list
flag:
ionic start -l
As of today, these are the available templates:
blank ................ A blank starter project for Ionic complex-list ......... A complex list starter template maps ................. An Ionic starter project using Google Maps and a side menu salesforce ........... A starter project for Ionic and Salesforce sidemenu ............. A starting project for Ionic using a side menu with navigation in the content area tabs ................. A starting project for Ionic using a simple tabbed interface tests ................ A test of different kinds of page navigation
If you are using the Ionic cloud services, you will be assigned an app ID for every project you create on the cloud (refer to the Ionic.io apps section further down for more information). This app id will reside in the ionic.project
file, present at the root of the project.
When you scaffold a new project, the app ID is empty. If you would like to associate the currently scaffolding project to an existing app in the cloud, you can run the ionic start
task with the --io-app-id
flag and pass it the cloud-generated app ID:
ionic start -a "Example 2" -i app.two.example --io-app-id "b82348b5" example2 blank
Now, the ionic.project
looks like this:
{ "name": "Example 2", "app_id": "b82348b5" }
The locally scaffolded project can be linked to a cloud project (refer to the Ionic.io apps section for more information) at any time by running this:
ionic link b82348b5
You can also remove the existing app ID by running this:
ionic link --reset
To view the installed libraries and their versions, run this:
ionic info
The information looks like this:
Cordova CLI: 5.0.0 Gulp version: CLI version 3.8.11 Gulp local: Ionic Version: 1.0.0 Ionic CLI Version: 1.5.0 Ionic App Lib Version: 0.1.0 ios-deploy version: 1.7.0 ios-sim version: 3.1.1 OS: Mac OS X Yosemite Node Version: v0.12.2 Xcode version: Xcode 6.3.2 Build version 6D2105
To view the list of available templates, you can either use the start task or the templates task.
ionic templates
By default, Ionic uses the OS-specific browser to render the contents in web view. You can replace this default browser with Crosswalk (https://crosswalk-project.org/) or Crosswalk lite (https://github.com/crosswalk-project/crosswalk-website/wiki/Crosswalk-Project-Lite) to get a better user experience and support for modern features. As of today, you can only add these two browsers. You can view the list of supported browsers by running this:
ionic browser list
Then, you should see:
iOS - Browsers Listing: Not Available Yet - WKWebView Not Available Yet - UIWebView Android - Browsers Listing: Available - Crosswalk - ionic browser add crosswalk Version 8.37.189.14 Version 9.38.208.10 Version 10.39.235.15 Version 11.40.277.7 Version 12.41.296.5 (beta) Version 13.42.319.6 (canary) Version 14.42.334.0 Available - Crosswalk-lite - ionic browser add crosswalk-lite (canary) Version 10.39.234. (canary) Version 10.39.236.1 Available - Browser (default) - ionic browser revert android Not Available Yet - GeckoView
As you can see, there is no support for WKWebView
and UIWebView
yet. But for Android-specific apps, you can use Crosswalk. To add Crosswalk to an existing project (Example 3), run:
ionic browser add crosswalk
Once the browser is successfully added, you can verify it in the ionic.project
file.
To revert to the default browser, run this:
ionic browser revert android
Using the Ionic state task, you can manage the state of your Ionic project. Let's say that you are adding a couple of plugins and platforms to test something in your Ionic app; but you would not like to use these if they fail. In that case, you would use the save and restore task.
You can avoid saving the plugins or platforms to the package.json
file by running them with a --nosave
flag:
ionic plugin add cordova-plugin-console --nosave
You have tested your app with a couple of new plugins (adding them using a --nosave
flag) and things seem to work fine. Now, you want to add them to your package.json
. For that, run this:
ionic state save
This task looks up your installed plugins and platforms and then adds the required information to the package.json
file. Optionally, you can save only plugins or platforms by running the preceding task with a --plugins
or --platforms
flag respectively.
If you have added a bunch of plugins and things are not working as expected, you can reset to the previous state by running this:
ionic state reset
If you would like to restore your application to a list of Cordova plugins and platforms, you can update these in package.json
and run this:
ionic state restore
"Ionic ions are a curated collection of useful addons, components, and ux interactions for extending ionic."
As of today, there are four ions. You can view the list of ions by running this:
ionic ions
The options will be:
Header Shrink ........ 'ionic add ionic-ion-header-shrink' A shrinking header effect like Facebook's Android Drawer ....... 'ionic add ionic-ion-drawer' Android-style drawer menu iOS Rounded Buttons .. 'ionic add ionic-ion-ios-buttons' iOS "Squircle" style icons Swipeable Cards ...... 'ionic add ionic-ion-swipe-cards' Swiping interaction as seen in Jelly Tinder Cards ......... 'ionic add ionic-ion-tinder-cards' Tinder style card swiping interaction
You can add an ion using Add task
as shown in the response. Once an ion is added, you can navigate to the www/lib/
folder and into the ion
folder and check out the components.
For instance, if we have scaffolded a blank project (example4
), you can add the Swipe Cards ion by running:
ionic add ionic-ion-swipe-cards
Now, if you navigate to the www/lib/ionic-ion-swipe-cards
folder, you will find the bower component. And in the example4
folder, you can find more information on how to set it up.
You can remove an added ion by running this:
ionic rm ionic-ion-swipe-cards
When you add a new platform, by default the resources
folder is created with icons and splash screens for the given platform. These icons and splash screens are default images. If you would like to use your logo/icon for the project, all you need to do is run the Ionic resources task.
This task will look for an image named icon.png
inside the resources
folder to create icons for all devices for that OS, and splash.png
inside the resources
folder to create splash screens for all the devices for that OS.
You can replace these two images with your brand images and run this:
ionic resources
If you only want to convert icons, you can pass in an -i
flag; to only convert splash screens, use the -s
flag.
Note
You can also use .png
, .psd
(sample template: http://code.ionicframework.com/resources/icon.psd and http://code.ionicframework.com/resources/splash.psd), or .ai
files as well to generate icons from. You can find more information at http://blog.ionic.io/automating-icons-and-splash-screens/.
Ionic provides an easy way to run your Ionic apps in browsers, emulators, and devices. Each of these three tasks comes with a bunch of useful options.
If you want live reload to be running on an emulator as well as the actual device, while debugging, use the -l
flag for live reload and -c
to enable printing JavaScript console errors in the prompt. This is by far the best and most used utility in the Ionic CLI. This task saves a lot of your debugging time:
ionic serve -l –c ionic emulate -l –c ionic run -l –c
You can use the following flags while working with ionic serve
:
If your app has a different look and feel for Android and iOS, you can test both the apps at once by running this:
ionic serve -l
You can explore other options listed earlier according to your requirements. While working with ionic run and emulate, you can use the following options:
Quite self-explanatory!
You can upload the current Ionic project to your Ionic.io account by running this:
ionic upload
Once the app is uploaded, you can head to https://apps.ionic.io/apps to view the newly updated app. You can share this app with anyone using the share task and passing in the e-mail address of the intended person; for example:
ionic share [email protected]
You can use Ionic view to preview your app on a device. Once your app is uploaded to your Ionic.io account, you can download the Ionic View app for Android or iOS and you can preview the app on the device.
Note
You can find more information on Ionic view at http://view.ionic.io/.
At any point in time, you can view the list of all Ionic CLI tasks by running this:
ionic –h
You can open the docs page by running this:
ionic docs
To view the list of available docs, you can run this:
ionic docs ls
Also, to open a specific doc (in this case, ionicBody
), you can run this:
ionic docs ionicBody