Your First Ionic App
Explore how to set up your development environment and create your first Ionic app using Angular. Understand the use of the Ionic CLI and App Wizard to initialize a side-menu project and launch it for testing. This lesson establishes a foundation for building hybrid mobile apps.
We'll cover the following...
Setting up the system
One of the things I like to do in my home directory is have a folder called “git.” You can call it anything you want: “projects,” “myprojects,” “ionic,” it is entirely up to you!
Always ensure that you have the latest tooling installed before starting an Ionic project. You will find out why later in this lesson. To check for available updates, enter the following command inside the command terminal of your choice:
npm install -g @ionic/cli@latest
Run the above command in the given terminal to observe the output.
Not surprisingly, this will ensure that you get the absolute latest version there is.
Ionic app wizard
Through the rest of this course, I am going to stick to the command line, but Ionic has a web-based tool for building Ionic projects rapidly, called the Ionic App Wizard.
Launch the wizard by typing the command in the above terminal:
ionic start myApp
-
See what kind of project it provides. Supply a name, pick a color, and select the side-menu template. It appears to default to React, so make sure you select Angular.
-
Then, it asks for the type of project, so select
sidemenufrom the provided options. -
On the next screen, sign in or create an account. Or you can choose to skip that and just get your results.
-
The wizard gives you a custom-install command for the Ionic CLI, and it warns you that you must have Ionic CLI 6.3 or above, which should not be an issue, but that is why I always recommend having the latest version of the tooling.
-
Back in your terminal, run the command that the Ionic App Wizard gave you and wait. It will run an npm install, and then you will need to cd into that directory by typing:
cd myApp -
This app can be launched by using the following command:
ionic serveHowever, we provide the generated application for you in the following coding playground and the
ionic servecommand automatically serves the app when you press Run.
The complete application after performing the above steps is provided below for your observation. Press the Run button to compile the app and see the output.
import { AppPage } from './app.po';
describe('new App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
describe('default screen', () => {
beforeEach(() => {
page.navigateTo('/Inbox');
});
it('should say Inbox', () => {
expect(page.getParagraphText()).toContain('Inbox');
});
});
});
If you are running this locally, it should automatically open in your default browser. The application it creates looks like an email box.
And voila! You just created an app out of nothing. In the next lesson, I will review the code it generated.
Quiz
What does ionic start command do?
It downloads the dependencies for the project.
It creates a new project/application along with its dependencies.
It installs the Ionic CLI.