Start an Ionic 2 App with the CLI

Mike Hartington
InstructorMike Hartington

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 4 years ago

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.

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

Christopher Kwiatkowski
Christopher Kwiatkowski
~ 5 years ago

Had to do the following to get started with the project:

$ ionic start myApp blank --type ionic-angular

Stepan
Stepan
~ 5 years ago

already outdated

ionic start studytube-mobile --v2 [ERROR] Sorry! The --v1 and --v2 flags have been removed.

Thomas
Thomas
~ 5 years ago

I looked on gethub... I don't see a repo with [ Building apps with Ionic 2 ] name...?