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 learn how to run an app on our Mac. We are going to download Xcode, which includes an iOS simulator. Once we have Xcode, it is a matter of a couple commands in our terminal to run and view our app on our mac.

[00:00] In this lesson, we are going to learn how to create and run an ionic application for iOS. The first thing we need to do is download and install Xcode. If you go to developer.apple.com/xcode4/downloads, you can see the iOS code download options. We're going to go with the latest stable. We'll click view in Mac apps store, click launch application. From here we're going to just click install.

[00:26] At this point, I'd recommend grabbing a coffee, going to lunch, even going to bed, this is going to take some time. Once it is downloaded, you can hop into the command line, type ionic. This will run without the Xcode prompt, so now we're making progress. The next thing we need to do is add iOS to our starter application.

[00:50] We're going to go ionic build iOS which is going to build an iOS specific version of our application. Now that the build has succeeded, we are going to emulate the application for iOS, so we go ionic emulate iOS. This is going to actually throw an error, the reason being is, we need to install the iOS sim package from NPM.

[01:17] We're going to just copy this command here, and we're going to run it with one exception. We're going to do this in pseudo mode. We'll go to the front of this command, type in pseudo and hit enter. Put in our password, and once this is installed then we're going to try this command again.

[01:37] We'll just clear the screen and then we'll type in ionic emulate iOS. This will spin up our ionic application in the iOS simulator. You can see here, this is the same application that we saw in the previous lesson, but now it's running in the iOS simulator and we can click through.

[02:00] There's one more additional feature that you can use when running your ionic application, and that is the library mode option using the -l switch. We're going to go ionic emulate iOS -l. This is going to simulate the application as before, but now it's going to watch the file system and detect changes, and reload the application in the simulator.

[02:26] To see this in action, let's hop into our IDE. We'll navigate to the www directory and we'll choose the template. From here, we're going to edit this block of HTML. We'll change this item here to edit, and leave an informative message something like, "Watch the live reloaded, goodness!"

[02:53] We'll save this and then we'll look at the terminal. You can see that it picked up this template was changed. If we go to the simulator you can see that it has automatically reloaded.

[03:06] To review what we've done, we downloaded and installed Xcode. From there we did ionic build iOS to create an iOS specific build for our application. Then we added the iOS sim NPM package. Then from there we ran ionic emulate iOS to spin up our application in the iOS simulator. Then we took it a step further by using the library load switch which is -l.

[03:35] So, ionic emulate iOS -l to detect changes within our application and automatically display them in the simulator. This is how you build and run an ionic application in iOS.

Course

Ionic Quickstart for Windows and Mac

Build and Run an iOS App on a Mac

Share this video with your friends