Your First Ionic App

Discover how to set up your system and create an Ionic-react project.

We'll cover the following

Setting up the system

Before starting an Ionic project, I always make sure that I have the latest tooling, even if I installed it recently. I recommend you do the same. Inside a command terminal of your choice, enter the following command:

npm install -g @ionic/cli@latest

Run the above command in the given terminal to observe the output.

Terminal 1
Terminal
Loading...

Not surprisingly, this will ensure that you get the absolute latest version there is.

Ionic app wizard

These steps are optional. We have already performed these steps for you in the runnable environment below. Just click on the run button to see the output.

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.

Try it now to see what kind of project it provides. Open a browser to https://ionicframework.com/start. Supply a name, pick a color, and select the side-menu template. It appears to default to React.

On the next screen, sign in or create an account.

The Wizard gives you a custom-install command for the Ionic CLI, and it warns you that you must have Ionic CLI 6.5.0 or above at the time of writing this course. This should not be an issue, but still it’s recommended to have the latest version.

svg viewer

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.

Enter the following command to launch the app.

ionic serve

The complete application after performing the above steps is provided below for your observation. Run the following to verify the output of the above command.

iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAilBMVEVHcExH
iv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9H
iv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9H
iv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9W
kbhyAAAALXRSTlMA6fH5rdwnAiEH0+btgEEEhIdflMmPDhUatIxwnWlXMNV1
EEtIpjajv9fMK6VUL25nAAACmklEQVRYw61X6ZqqMAwFpqwFZBXZdNDRcWbk
/V/vYsvSlrL25oefHzQhPTk5TSWJb7p29kGkQtuGagT8s6ZLG+zgxtZHTdmH
FbuHle6nyqq5ZlWnFe6JJ9eTZmfHBXe9hPWcxea8/9+T3risWpYqD3A470Va
GWeBwfUPlMEZgtw1rqaum1fDzQFKLG3WXAsUT/E5uWS9t/J9YzZ7vH0rtdb4
R92alI1g3nuofG6C2rn5eQ05+ow/6F4UxjRIDxIhap3efV+9zaHskRiXvP2n
81wBVE1J/Ntn4QLlqQAhgU9bv2yJpxkZIB8AeI5CTphLgqj1j8t2/8stq6dD
gGLoH9w+arKi1wy184+ubG2+RrJwCZwwdIILKQRGm8Nr+FxiMxm1K51eFiyH
5IybAeA93v9y/LjC9KcJYDo2JQQOp3ecukJLPznM1iJWCSKNbf2GE59mXxk6
gQdHVuCDyhB3tdv8jTEm1Pe5sgSpHNKOzbo1KoH5y9ezXxKHLwzvQdJQKvBI
gTNhDqkwsGXjGb0CZP2UqQCKMeqrs+QzfTGTAJ1C3hYPB3IJBH6mA/yYbF8B
KWLV6TJ3LlyInSLwIgk1h3wcawvXAgJF1IKqhMBUzQnZY80jtoo+DSVEeYtQ
gnAuACE5mEC2eADhLQiDKFxGYSIJU1m4mYTbWVBQ9N2S9uoP6H2ielL66u2T
dVw8JOu7DpY2gWrX0fa2AodNdhyuRAn61tpyvGMHfMbLyfYBg5oyyh0jDik5
T33HkEUMWgpV17VjXpNtONaWDYOmdOqmLDbZlaPurZux7qNU1wzbRtGtAZyJ
Z3HcN/ye3XdzYY6duHDU9UKxlq48bfRg/6UL8edP5NpXw3KJKbMXT9lb03CC
V9//cPnedv3/B03WKCmdQSV1AAAAAElFTkSuQmCC
Your First Ionic App

If you are running this locally, then 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, we will review the code it generated.

Quiz

1

What is the format of the custom-install command that the Ionic CLI gives?

A)

npm install -g @ionic/cli cordova-res ionic start --start-id uniquestring

B)

npm serve

C)

npm install -g @ionic/cli@latest

Question 1 of 20 attempted