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 ionicApps, and then create a folder inside it called chapter2.

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

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

In the preceding command:

• -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

  Note

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

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

To start off, a new blank project is downloaded and saved to the example1 folder. Next, the ionic-app-base is downloaded from the ionic-app-base GitHub repo, https://github.com/driftyco/ionic-app-base. Post that, ionic-starter-template is downloaded from the ionic-starter-template GitHub repo at https://github.com/driftyco/ionic-starter-blank.

After that, the config file is updated with the app name and ID. Next, a script runs and five Cordova plugins are downloaded:

• org.apache.cordova.device (https://gitHub.com/apache/cordova-plugin-device): This is used to get device information, as we have seen earlier in this chapter
• org.apache.cordova.console (https://gitHub.com/apache/cordova-plugin-console): This plugin is meant to ensure that console.log() is as useful as it can be
• cordova-plugin-whitelist (https://github.com/apache/cordova-plugin-whitelist): This plugin implements a whitelist policy for navigating the application web view on Cordova 4.0
• cordova-plugin-splashscreen (https://github.com/apache/cordova-plugin-splashscreen): This plugin shows and hides a splash screen during the application launch
• com.ionic.keyboard (https://gitHub.com/driftyco/ionic-plugins-keyboard): This is the keyboard plugin providing functions to make interaction with the keyboard easier, and fires events to indicate whether the keyboard will hide/show

All this information is then added to the package.json file and a new ionic.project file is created.

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

To proceed further, we will use the cd command to go to the example1 folder. We will not follow the instructions provided in the terminal/prompt, as we still understand the project setup. Once we have a fair idea on the various components in Ionic, we can start using the commands from the terminal/prompt output after we scaffold a new Ionic App.

Once we have changed directory to 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 then launch the app in your default browser. I highly recommend setting Google Chrome or Mozilla Firefox as your default browser while working with Ionic.

When the browser launches, you should see the blank template.

If you run this:

ionic serve

You will see an error as shown here:

This means that some other application on your machine is running on the port 8100. To fix this, you can use any other port like 8200 while running Ionic serve:

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 terminal/prompt and we should see something like the following screenshot:

As mentioned earlier, Ionic CLI tasks are pretty verbose. They will not leave you hanging. You can see that while the Ionic server command is running, you can type R and hit Enter and the application restarts. Similarly, you can press C to enable or disable printing browser JavaScript logs to the terminal/prompt.

Once you are done running the application, press Q and hit Enter to stop the server. You can do the same by pressing Ctrl + C from the keyboard.