Hello Ionic

Now that we are done with the software setup, we will scaffold a few Ionic apps.

Ionic has three main/go-to templates, using which we can quickly start developing apps:

• Blank: This is a blank Ionic project with one page
• Tabs: This is a sample app that is built using Ionic tabs
• Side menu: This is a sample app that is built to consume side menu driven navigation

To understand the basics of scaffolding, we will start with the blank template.

To keep our learning process clean, we will create a folder structure to work with Ionic projects. Create a folder named chapter2.

Next, open a new command prompt/terminal and change the directory (cd) to the chapter2 folder. Now run the following command:

ionic start -a "Example 1" -i app.example.one example1 blank --v2

The preceding command has the following features:

• -a "Example 1": This is the human-readable name of the app.
• -i app.example.one: This is the app ID/reverse domain name.
• example1: This is the name of the folder.
• blank: This is the name of the template.
• --v2: This flag indicates that the project will be scaffolded with the latest version of Ionic. This may be removed in the future.

Refer to the Appendix, Additional Topics, and Tips, to know more about the Ionic start task.

Ionic CLI is very verbose when it comes to performing tasks. As we can see from the command prompt/terminal, while the project is being created, a lot of information is printed.

To start off, ionic2-app-base is downloaded from the ionic2-app-base GitHub repository, https://github.com/driftyco/ionic2-app-base. After that, ionic2-starter-blank is downloaded from the ionic-starter-blank GitHub repository at https://github.com/driftyco/ionic2-starter-blank. Then all the required dependencies are installed.

Once the project has been successfully created, we will see a bunch of instructions on how to proceed further. Our output should look something like the following:

To proceed further, we will use the cd command to navigate to the example1 folder. We will not follow the instructions provided in the command prompt/terminal, as we are yet to understand the project setup. Once we have a fair idea of Ionic, we can start using the commands from the command prompt/terminal output after we have scaffold, a new Ionic app.

Once we have changed the directory to the example1 folder, we will serve the app by giving the following command:

ionic serve

This will start a new dev server on port 8100, and will then launch the app in our default browser. I highly recommend setting Google Chrome or Mozilla Firefox as your default browser while working with Ionic.

When the browser launches, we should see the blank template's home page.

If we run ionic serve and port 8100 is already taken, Ionic will launch the app on 8101.

We can also serve the Ionic app on any other port using the following command:

ionic serve -p 8200

Once the application is successfully launched and we have seen the output in the browser, we will navigate back to the command prompt/terminal and we should see something like the following screenshot: