This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Setting Up your Mac with Ionic and Cordova

3:11 Angular 1.x lesson by

In this lesson, we install Node.js (with Node Package Manager) as well as Ionic. With just a couple command prompt commands, we gain access to the powerful Ionic command-line utility, which in turn installs Apache Cordova to aid in connecting our web apps to our mobile device’s native functionality. We then create an Ionic app in just a few more commands.


egghead.io comment guidelines

Avatar
egghead.io

In this lesson, we install Node.js (with Node Package Manager) as well as Ionic. With just a couple command prompt commands, we gain access to the powerful Ionic command-line utility, which in turn installs Apache Cordova to aid in connecting our web apps to our mobile device’s native functionality. We then create an Ionic app in just a few more commands.

Avatar
frantzyy

I feel it would be helpful make user aware that you can you setup npm without having to use sudo on a mac by configuring the npm prefix and updating $PATH. It probably should be the recommended option in my opinion as well. It's also nice to know this up front before you go installing it, then have to go back and clean it out like I had to do when doing the JWT tutorial : )

In reply to egghead.io

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

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.

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.

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.

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.

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.

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.

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.

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.

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

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".

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".

This is how you get started with Ionic for Mac.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?