Using the Ionic CLI

The Ionic CLI is a super powerful tool - we’ve already gone through how to use it to generate a new project and display your application in the browser, but there are a bunch more commands you should know about too, so let’s go through some of them. This is by no means an exhaustive list, but it will cover all of the commands you should be using frequently.

Let’s get into it!

Serving your Application

As you probably already know, you can view the Ionic application that you are working on in the browser by running:

ionic serve

However, you can also serve your project using Ionic Lab which will display your project in the Ionic Lab interface. This will give you a side-by-side comparison of what your application will look like on both iOS and Android, and there are also some useful links on the left-hand side of the screen.

If you would like to use Ionic Lab, you will first need to install the package for it in your project:

npm install @ionic/lab

and then you can add the -l flag to the serve command:

ionic serve -l

Generate

When you are developing an application you will eventually want to add more pages/components/services than the default ones that are created with the application. To create more components you can manually create a new folder and add all the required files, or you can just run the ionic generate command to do it automatically for you, with some handy boilerplate code in place.

NOTE: We will avoid using the generators in this course as I find creating things manually provides a better learning experience. I used to use generators a lot, but since switching to using single file components (which we will be using in this course) I actually find myself preferring to just create the files manually rather than using the generators. I am probably just weird though - after you are used to the concepts behind creating new components and services, you might want to play around with using the generators to save you time.

You can use the generate command to automatically create a:

• page
• component
• directive
• service

NOTE: A page and a component are really the same thing. A page is just an Ionic convention for a component that is being used as a “page” and it is named as such. A benefit of using the page generator is that Ionic will also automatically set up the routing information for that page for you, whereas a component might not be routed to (a component might be a “page”, but it also might be a smaller component within a page like a list or a button).

To use the command you can just run:

ionic g page

and answer the prompt, or you can manually supply the name of your page/component/directive/service to the command like this:

ionic g page MyPage

or

ionic g service shared/data-access/MyService

If you are running the manual command, make sure to supply the folder you want it to be generated in (e.g. as we have done for the service above) otherwise it will just be generated in the root folder of your application code.

Creating a Build

Most of the time we will just use serve to run our application, but sometimes you will want to create a build of your application in the www folder that you can access directly. You would want to do this perhaps if you wanted to run your code on the web somewhere, or if you are creating native builds with Capacitor you will also need to create a build of your project (since Capacitor will copy the source code in the www folder to your native projects).

To create a build, you can just run the following command:

ionic build

or to create an optimised production build you can run:

ionic build --prod

You should always use the --prod flag when you are deploying your application to production, and you should also test the --prod build before deploying.

Using Capacitor

Although Capacitor and the Capacitor CLI can be used on its own in any project, the Ionic CLI also has integrations for Capacitor. To initialise Capacitor in your Ionic project you can just add a platform:

ionic cap add android

or

ionic cap add ios

or both. This will save you the hassle of having to install Capacitor and initialise your project, but it will give your project a default Bundle ID of io.ionic.starter. This is fine for development, but you will want to change it to something unique (e.g. com.yourcompany.projectname) before submitting your project. You can change this in the capacitor.config.json file, and you will also need to make sure that it is updated in your Xcode/Android Studio projects.

If you try to run the add commands before running ionic build you will get an error, but that’s fine, just make sure you do a build at some point. Once you have created a build, you can run the following command:

ionic cap sync

To sync your project with Capacitor. This will copy over your built application from the www folder, it will update the dependencies in your native projects, and it will install any plugins that you have installed in your project.

IMPORTANT: Running ionic cap sync will also automatically create a build of your project, which will be in development mode by default. If you want to deploy a production build with Capacitor you should run the command with the --prod flag: ionic cap sync --prod.

You can also run:

ionic cap update

which will only update the native dependencies/plugins, or you can run:

ionic cap copy

which will only copy your application code over to the native projects. The sync command just does both of these at once. To open your project in Xcode you can run:

ionic cap open ios

and you can also run your application on an emulator or on a real device from there. There is more details later in the course on exactly how to do this. The same goes for Android, you can run:

ionic cap open android

to open your Android project in Android Studio, and you will be able to run your application from there. Unlike with Cordova, all of the building and running steps for the native project in Capacitor are handled by their respective native tools.

Doctor

We’ve made it through all of the commands that you would likely use on a day-to-day basis, but there are a few more commands that are useful to know if you get stuck. Sometimes you can run into problems with the way your environment is configured, especially when just getting started, and these issues can be frustrating to solve. To help with that, you can run the following command:

ionic doctor check

This will run some diagnostics to check for any potential issues. You can even run this command:

ionic doctor treat

to attempt to automatically fix issues.

Help

Finally, the --help flag can be extremely useful if you are unsure how certain commands work. You can basically add --help to any command to get details on how that command works. For example, you could run:

ionic --help

or more specifically, commands like:

ionic cap --help

or:

ionic g --help

We haven’t covered every single command in this lesson, but these are likely the only commands that the Ionic CLI provides that you will use frequently.

Recap