Your First Ionic App

Now that we’re familiar with the core technologies behind Ionic and understand what they do, let’s use the Ionic framework to create a project.

Creating a new project

Ionic makes it easy to create new projects from the command line using the following command:

ionic start blank-app blank --type=angular

With this command, we run the Ionic CLI tool to create a project called blank-app using a blank template and specifying Angular as our framework of choice (Capacitor is installed by default in a new Ionic project).

Enter this command in the terminal provided for you to see the results for yourself.

You’ll see the project build progress being printed to the terminal, which might take a little while to complete depending on the speed of your network connection.

Answer the prompts at the console when they appear, but you can sit back and relax for the most part.

Project creation steps

Once completed, you’ll see that the creation of a project through the Ionic CLI follows these steps:

1. We define the project name, template type, and which framework we are using
2. It installs the required node packages for a new project
3. We are prompted to install the Ionic Appflow SDK
4. It sets up the initial Git integration for the project
5. It creates the individual source files for the project’s app directory
6. It provides prompts for the next steps that we might want to take

Out of the above process, installing the node packages takes the most time, so we might find ourselves twiddling our thumbs while waiting for this particular stage to complete!

Once completed though, we typically change into the newly created project directory to perform any (or all) of the following tasks:

• Install the necessary native platforms (iOS and Android)
• Install Awesome Cordova plugins, Capacitor plugins, and Angular or third-party libraries.
• Generate custom page components, services, directives, pipes, interfaces, and feature modules.
• Generate launch icons and splash screens for iOS or Android

We’ll look at how the above tasks are accomplished over subsequent chapters, so don’t worry if this seems a little overwhelming right now. You’ll be an expert in no time!

Template types

Instead of a blank project, we could have chosen from a number of template types available for Ionic application development.

Tabs

This template allows us to create a new project with a simple three-tabbed interface.

The command for creating a new project (named myApp) using the tabs template is:

ionic start myApp tabs

Side menu

This template creates a new project with a side menu for navigation in the content area.

The command for creating a new project named myApp using the side menu template is:

ionic start myApp sidemenu

List

This template creates a new project with a list of entries in the content area.

The command for creating a new project called myApp using the list template is:

ionic start myApp list

If you’re ever unsure what commands to use or how to configure the project from the command line, use the ionic start command on its own. The Ionic CLI will provide prompts to guide you through the process.

Other useful commands

Now, let’s take a look at some of the Ionic CLI commands that we’ll most likely use for development.

Commands with Cordova

We can use the following commands to add platforms for use with Cordova plugins. Be aware that a platform is also added by default when we generate a platform-specific build.

ionic cordova platform add ios
ionic cordova platform add android 

Use the following commands to run the Ionic Cordova app on a connected iOS or Android device.

ionic cordova run ios
ionic cordova run android

The following command prepares and compiles the Cordova app for iOS:

ionic cordova build ios --prod

Similarly, the following command prepares and compiles the Cordova app for Android:

ionic cordova build android --prod --release

Note: The --prod flag is used for AoTAhead of Time compiling while the --release flag is for a release build.

The following command prints details about our system environment:

ionic info

Cordova plugins can be installed using the following commands:

ionic cordova plugin add <plugin-name>
npm install --save @ionic-native/<plugin-name>

Note: Both commands are required for each plugin.

We can remove previously installed Cordova plugins using the following command:

ionic cordova plugin rm <plugin-name>

Lastly, the following command lists all installed Cordova plugins:

ionic cordova plugin ls

Commands with Capacitor

To create a new blank Ionic/Capacitor project, use the following command:

ionic start nameOfProject blank

If we want to add Capacitor integration to an already existing Ionic project, we can use the following:

cd nameOfProject
ionic integrations enable capacitor

We can initialize Capacitor through the following command:

npx cap init <app-name> <app-id>

Note: Replace <app-name> with the name of our application, <app-id> with the reverse domain identifier for our app. For example, com.masteringionic.app-name.

Use the following to add platforms:

ionic build
npx cap add ios
npx cap add android

Note: The Ionic project must be built before adding platforms.

Miscellaneous commands

Use the following command to add a page to the application:

ionic g page pages/page-name

Note: We can prefix the page with a directory, as is done in this example. However, it is not required.

Similarly, we can use the following commands for adding components, services, pipes, and directives:

ionic g component components/component-name
ionic g service services/service-name
ionic g pipe pipes/pipe-name
ionic g directive directives/directive-name

The following command allows us to preview the application on different platforms, including iOS, Android, and Windows within the browser.

ionic serve --lab

Running the app

The command for running an Ionic app from the root directory of the project is:

ionic serve

This command will run the built-in server for the Ionic CLI and allow us to preview our app in a web browser. Go ahead and run the blank Ionic project below to see it in action!