Setting Up your Mac with Ionic and Cordova

Installing Node.js and NPM on Windows

Ionic Quickstart for Windows: Installing Ionic

Creating an Ionic App

Build and Run an Android Application with Ionic on a Mac

Build and Run an iOS App on a Mac

Install Ant for Ionic

Install Android SDK for Ionic

Install the Genymotion Android Emulator for Ionic

Install the Java Developer Kit (JDK) for Ionic

Run Your First Ionic App

Edit Your Ionic Application Code

Deploy Your Ionic App to a Device

Upload and Share an Ionic App

Ionic Quickstart for Windows and Mac

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.

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

Course

Ionic Quickstart for Windows and Mac

Setting Up your Mac with Ionic and Cordova

Share this video with your friends