⚠️ This lesson is retired and might contain outdated information.

Build and Run an iOS App on a Mac

Lukas Ruebbelke
InstructorLukas Ruebbelke
Share this video with your friends

Social Share Links

Send Tweet
Published 9 years ago
Updated 2 years ago

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.

egghead
egghead

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today