Learn how to install the Ionic 4 CLI and validate its installation.
Instructor: [00:00] To get started with Ionic, we first need to install node.js and NPM as these are required to use the Ionic CLI. If you don't already have node installed in your computer, you can download it from the node.js website.
[00:14] Once you have it installed, verify the version of node by executing node -v in your terminal or command line. We should also verify the version of NPM as well by executing NPM -v. Now let's install the Ionic CLI by running NPM install -g ionic.
[00:35] For Linux and Mac users, you may want to prepend sudo to that command for it to install properly. For Windows users, make sure you're installing them from an admin account. Once complete, you'll also want to install a Cordova CLI as well by running NPM install -g cordova. Odds are you'll be publishing your Ionic application as a Cordova-based native mobile application.
[01:02] With our installations complete, we can create our first Ionic project. From the command line, I will run ionic start myNewApp blank --type=angular. Let's break this down. The start command will tell the Ionic CLI to generate a new Ionic application. Next, we'll define the project name, myNewApp. The CLI will create a new directory with this name and install the project there.
[01:30] After the project name, we'll tell the CLI which template we want to use, in this case, the blank template. Ionic currently has two other templates available, tabs and sidemenu. Depending on your application's navigation design, you can jump start your development.
[01:47] The final element in our command is the --type=angular flag. The Ionic CLI supports creating Ionic applications for older versions as well as, soon, for other frameworks like Viewer React. Since we want to create an Ionic 4-based application, we'll set this flag to type of angular.
[02:09] With our project generated, we will change our working director to the newly generated one then run the command ionic serve. This will build our application, launch our browser, and load our application for us.
[02:24] Now that it's done, we can see the Ionic blank template running in our browser. If we want to make changes to our application, Ionic serve would automatically recompile and reload our application for us.