Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Build, Emulate, and Debug an Ionic App

    Lukas RuebbelkeLukas Ruebbelke

    In this lesson, we are going to build an Ionic app for the iOS platform, and then emulate iOS on our computer. We are going to cover some important command-line options when emulating an Ionic application. We will then see how these options play a critical role in debugging our applications.

    angularjsAngularJS
    ionicIonic
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 In this lesson, we are going to learn how to emulate and debug an Ionic application. So the first thing we're going to do is hop into the command line. Traditionally, we add the platform that we want to work with. In this case, Ionic platform, add iOS. iOS is added by default on Mac, so this step was unnecessary.

    00:22 But the next step is we will build the iOS project. So Ionic build, iOS, and then, from there, we are going to Ionic emulate iOS. Now, we're going to add a few switches that are pretty important for this command. The first one was L, which stands for live reload, and C stands for console logs. S stands for server log output.

    00:52 Once the emulator pops up, let's go ahead and start to interact with this application. You can see almost immediately we start to throw errors. Let's try to update this bookmark. It's just not working. Something is awry. You can see here that the application cannot find the variable Cordova.

    01:15 So what we need to do is actually create a reference to Cordova.js. So let's add a script tag to our HTML file, point it to Cordova. You'll notice that this is actually referencing Cordova in the root directory. But you can see here in the www folder that does not exist. It actually exists in the platforms folder iOS in this case. You can see in that www folder Cordova.js exists.

    01:48 We'll hop back into our terminal. You can see that because we did it with a live reload option that we've already picked up the new HTML. We can update this bookmark and not throw an error.

    02:04 We'll click save, and this did not take, the reason being is that we are an error state. So occasionally you need to just restart the application from the root. We'll just type in R, which will restart the application. We will pull up the application one more time in the emulator. Let's update this bookmark title. We'll click save. You can see that it is working.

    02:32 Just to reiterate what we've done, we did Ionic emulate iOS with the L, C, and S switch which stands for live reload, console log output, and server log output. Then we were able to solve the great mystery of where in the world is Cordova.

    Discuss

    Discuss