Setting Up your Mac with Ionic and Cordova

[00:00] In this lesson, we are going to learn how to get started with Ionic for Mac.

[00:04] The first thing we're going to do is install Node on this computer. We'll go to the Node website. Click install, which will download the Node installation package. We're going to double click on that, which will open up the installation wizard.

[00:17] We're just going to step through that using the defaults that are provided. So, we'll click Continue, we'll click Continue again, and we're going to accept the license agreement. Then from here, we're going to install for all users on this computer. So, we'll select that. Click Continue, and then we're going to click Install.

[00:40] This will kick off the installation process, and once Node is installed, we're going to close the wizard and check to make sure that Node and npm were installed correctly. We'll type in "Node" from the command line, which will open up the Node console.

[00:53] We're just going to do a console.log out and make sure that this works. So, "Hello, World!" We'll hit enter. That worked correctly, so let's exit out of the Node console and test for npm. We'll go "npm", and here we have our npm options, so we're good to go.

[01:11] The next step is to install Ionic and Cordova. We're going to go "sudo npm install -g" for global, Ionic and Cordova. Then we will hit enter, and put in our password, and this will start the installation process for these two packages. Once they are complete, we're going to test that Ionic and Cordova were installed correctly.

[01:33] Let's start with Ionic. We'll type "ionic" from the command line, and we're going to be prompted to install Xcode. We're going to skip that for now, and we'll get to that in a later lesson. Let's test that Cordova installed correctly. And it did.

[01:48] We are now ready to build our first project in Ionic on Mac. We'll go "ionic start". We'll give a project name of "Ionic Starter", and we'll go with the tabs template. We're going to hit enter, which will then download the dependencies as well as the template for the Tabs application.

[02:07] Once this is complete, the we are going to hop into the directory of the project we just created. So, we'll cd into "Ionic Starter". Then we can preview our application using Ionic serve. This just spins up a quick Node server, and displays our application in the browser.

[02:29] Now you can see we have an application with three tabs, "Status", "Chat", and "Account". Technically, we now have a working Ionic application.

[02:39] Just to review what we've done, the first thing we did was install Node, by going to the Node website, downloading the installer, stepping through that, and then installing Ionic and Cordova using "npm install -g Ionic Cordova".

[02:54] From there, we started the application using "npm start Ionic Starter", and we went with the Tabs template. Then, we served it up into the browser, using "ionic serve".

[03:07] This is how you get started with Ionic for Mac.