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.
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.
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
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
What is the format of the custom-install command that the Ionic CLI gives?
npm install -g @ionic/cli cordova-res ionic start --start-id uniquestring
npm serve
npm install -g @ionic/cli@latest