What’s new in the Ionic CLI v3!

In addition to working on the framework itself, the Ionic team has also been working on improving the CLI as well. In this post, I am going to touch on some of the changes and improvements you need to be aware of. For those who bought my book, an update will be coming shortly to help guide you through those specific changes.

The two main goals of the complete rewrite of the CLI were to improve its performance and to make the overall user experience of using it better. From my use of it, I can say that they met those goals. As of now, the new CLI is at 3.0.0.rc1, but I suspect the final release is right around the corner.

To install the Ionic v3 Beta CLI, run  npm install -g ionic@beta

Defaulting to Ionic 2+

Previously, you had to opt in to have the CLI generate version 2/3 Ionic app, by using the –v2 flag. That requirement has been dropped! Now, by default, the CLI will generate Ionic 2+ apps. If you need to generate an Ionic 1 app, the new command is
ionic start mynewapp blank --type=ionic1

Platform Management

In the past, if you used the CLI on a Mac, the iOS platform was automatically added. Ionic being used for Progressive Web Apps (PWAs) and Electron apps, so having the iOS platform was not always the right choice. Now, we must explicitly add iOS, just like we have always had to do with Android, but with one slight change.

Cordova Commands Namespaced

Another big change to the CLI is all the commands that relate to interacting with the Cordova CLI now require you to include cordova as part of the command. For example, using the v2 CLI, to add a platform we would simply run ionic platform add ios. Now, using the v3 CLI, the command is ionic cordova platform add ios.  Here is a list of the namespaced commands:

  • cordova build ……. Build (prepare + compile) an Ionic project for a given platform
  • cordova compile ……. Compile native platform code
  • cordova emulate ……. Emulate an Ionic project on a simulator or emulator
  • cordova platform ……. Add or remove a platform target for building an Ionic app
  • cordova plugin ……. Manage Cordova plugins
  • cordova prepare ……. Transform metadata to platform manifests and copies assets to Cordova platforms
  • cordova resources ……. Automatically create the icon and splash screen resources
  • cordova run ……. Run an Ionic project on a connected device

The reasoning behind this is to allow for future platform support, as well as to reduce internal code clutter. Also, the Ionic CLI’s Cordova functionality has been moved into a plugin, which is installed by default with new Ionic projects and can be installed in existing Ionic projects with npm i --save @ionic/cli-plugin-cordova.

Guided Help

I mentioned that one of the goals of the CLI was to improve the user experience. For example, using the CLI’s generate command, this is what happens when we use it to generate new tabs:

$ ionic g tabs
? What should the name be? myTab
? How many tabs? 4
? Name of this tab: home
? Name of this tab: maps
? Name of this tab: contacts
? Name of this tab: more
[OK] Generated a tabs named myTab!

The CLI now guides us through the process of spawning our new tabs. Even the ionic start command has interactive prompts available!

In addition, the CLI also provides a lot more help to the user. If you are ever unsure of a command, just add the --help flag and you should have your answer.

Updating Your Existing Ionic Apps

If you are working with an existing Ionic project you will also need to execute the following command in your project directory.

For Ionic1 Projects
npm install --save-dev @ionic/cli-plugin-ionic1@beta @ionic/cli-plugin-cordova@beta

For Ionic2/3 Project
npm install --save-dev @ionic/cli-plugin-ionic-angular@beta @ionic/cli-plugin-cordova@beta

If you need additional documentation, it can be found in the project’s README. If you encounter an issue, let the team know by filing an issue on the repo for the project http://github.com/driftyco/ionic-cli

Happy Coding!


Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.