This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Start an Ionic 2 App with the CLI

    Mike HartingtonMike Hartington

    We’ll go over requirements needed to create a project and how to install the ionic CLI for project creation. Once it’s installed, we’ll start a project, specify an app name, and reuse a starter template for our project.

    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 To get started with Ionic, we'll need to make sure we have a few things installed first. We'll need Node and npm since this is how we'll maintain the CLI and its packages. You can either download Node and npm from the Node.js website or install with Homebrew. To verify that we have Node and npm installed, we can write node -v and npm -v to check our versions.

    00:25 With Node and npm set up, we can install the Ionic CLI by running npm install -g ionic. If you're on a Mac or a Linux machine, depending on your setup, you might need to run this command with sudo in front of it. For Windows, you'll want to run this from an admin prompt since it's a global install. We'll also want to install the Cordova CLI from npm as well.

    00:55 Now, to create a project, we'll run ionic start myApp blank --v2. Start is the command to tell the CLI that we want to create a new project. MyApp is going to be the name of our project as well as the directory. Blank is the prebuilt template that we'll use for this project. There's also a tabs-based template as well as a side-menu-based template.

    01:22 The v2 flag will tell the CLI that we want to use the 2.0version of Ionic. We'll hit enter to create our new project, go into the directory, and then open up our editor. Most of our code is in the source directory. That's split up between app level code, page components, our theme, and any additional assets our app might need.

    01:51 Let's open up a new tab in our terminal and run the command ionic serve. This will build our app and preview it in the browser. With ionic serve running, if we make any changes to our app, the library load server in the background will go ahead, build the app again, and automatically reload the browser with those changes.

    Discuss

    Discuss