The first step in getting started with Ionic Framework is to visit the Ionic home page at https://ionicframework.com/. Click on the ‘Get Started’ button on the page.
Fill in the form to create your free account. If you already have an account, click the ‘Log In’ button at the bottom of the page.
Once logged in, you will see a welcome screen with two options. click the ‘+’ icon near ‘Build my first ionic app’.
Read the text on the page that loads. Click ‘I’m ready to start’ when ready.
The next screen contains three items.
First, to run Ionic, you will need to have a recent LTS version of NodeJS installed. If you already have Node installed, check what version you have installed by issuing the following command…
$ node --version
The latest LTS version of NodeJS is 8.11. Make sure you have this version installed.
The second item on this page is Git. Make sure git is installed locally on your machine. If not, install Git using the delivery mechanism that’s best for your operating system. Verify that you have successfully installed Git with the following command…
$ git --version
git version 2.7.4
Next, install the Ionic CLI globally using the following command…
$ sudo npm install -g ionic
You have now installed Ionic Framework on your machine. Click ‘Create your app’ at the bottom of the page.
The next screen has a few options that need to be selected.
To start, you must select a template for your application. Ionic provides three templates: blank, tabs, and side menu. The Ionic tutorial suggests starting with the tabs template, so we will too. Issue the following command at the command line…
$ ionic start myApp tabs
After hitting enter to launch the start command, you will be given several choices. We will walk through those now.
First, you will be asked if you are planning to integrate your app with Cordova, to target IOS and Android. If you are planning to target iOS and Android answer yes to this question.
Second, you will be asked if you want to install the free Ionic Pro SDK. Ionic Pro SDK is a set of life cycle management, debugging, and troubleshooting tools. And it’s free. Answer yes to this prompt.
Third, you will be asked if you want to link your app to the Ionic Pro Dashboard. Select ‘Create a new app’ and enter the name of your new app when prompted.
Finally, you will be prompted for which Git host you’d like to use. The Ionic Pro choice is not a substitute for your app’s Git repository. It is only used to provide interaction between your app’s Git repo and the Ionic Pro suite of services. Create a repo for your app on Github, or the CMS of your choice, and enter that choice where prompted.
After you have completed these steps and created your app, return to your web browser and click ‘Run your app’.
Ionic provides the ability to see changes you make to your app on your devices, in real time. If you have an Android and/or iOS device, go to your app store and search for Ionic DevApp. Install the app on your device(s) and start it. You will be prompted for the login to your Ionic account. Enter in your credentials and click ‘Log In’.
Next, return to your terminal session and type in the following command…
$ ionic serve
If your terminal session looks like this you won! A new tab displaying your new app should appear in your browser. Also, your new app should appear in the DevApps app you installed on your mobile device(s) in an earlier step.
Now, return to your browser tab and click ‘Push builds’.
Next, push your newly created app to the CMS you specified earlier. If you selected Ionic Pro as your repository above, issue the following command…
$ git push ionic master
If you selected Github as your repository above, issue the following command…
$ git push origin master
After you have pushed your build, return to your browser and click ‘Next Steps’.
The ‘Next Steps’ page contains links to other pages. View these pages at your leisure. click the blue ‘Continus to Dashboard’ button at the bottom of the page.
Your Dashboard page shows a list of apps including the one you just created.
Congratulations, you have just created your first Ionic Framework application! I am planning to publish more informative posts on Ionic Framework in the future, so please check back. Also, if you have any questions please feel free to contact me.
Please let me know if this tutorial was helpful. Thanks for visiting coderdx.io!