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:
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
ionic serve -l
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 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
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:
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.
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
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.
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
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.
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 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:
or more specifically, commands like:
ionic cap --help
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.
When you are ready to release your application, which flag should you use to create a production build?