Ionic Framework is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease. It allows you to easily build apps using friendly web tech you are already familiar with. The good news is: if you can manage to create websites, you already know how to build mobile apps.
In this tutorial we will show you how to setup your local development environment so you can start developing Ionic apps. Real application development takes place in a local development environment such as your machine. Just follow the setup instructions for creating a new project.
Ionic 4 apps are designed principally through the Ionic command line utility (the “CLI”), and utilize Cordova to build and deploy as a native app. Therefore, some utilities must be installed to start developing.
The Ionic CLI is a fantastic tool for developing Ionic apps. It will help you along your developing journey to do things such as building your app for ios or android platforms or to add cordova plugins. By typing $ ionic --help in your console, you can see all the list of the available commands that you can use.
In order to develop Ionic 4 projects, the latest versions of the CLI and Cordova must be installed. You must previously make sure to have a recent Node.js version. Then you can continue to install the Ionic CLI and Cordova for native app development.
$ npm install -g ionic cordova
Note: You may need to add “sudo” in front of these commands to install the utilities globally
With Ionic and its features installed, we can move on and start building our first app. Let’s get going!
Developing a new app has never been this easy before! Go to you command line and run:
$ ionic start yourAppName
This command creates a working Ionic app. It installs all dependencies for you and sets up your project.
If you want to create an Ionic 3 app you should add –type ionic3 like this:
$ ionic start yourAppName âtype ionic3
You can cd into the created folder right. For a preliminary view of your app in the browser, use the serve command. It also runs the compiler in watch mode, starts the server, and keeps the app running while we continue to build it:
$ cd yourAppName $ ionic serve
You should see an app with a welcome message like the above if everything was installed successfully.
Inside of the folder that was created, we have a typical Cordova project structure where we can start working and also install native plugins, and create platform-specific project files.
Each platform has certain particularities and installation requirements before you can get the most out of your Ionic and Cordova development. In order to test the app on your phone, as a native app, you should do one more thing.
For iOS app developers, take a look at the Cordova iOS Platform Guide and follow the instructions to install or upgrade Xcode, and possibly sign up for a developer account to start building apps for iOS.
For Android app developers, take a look at the Cordova Android Platform Guide and follow the instructions to install the Android SDK and Android Studio to start building apps for Android.
In Ionic 4 apps there’s some more boilerplate compared to ionic 3 apps and changes of structure, but don’t panic. The new ionic CLI also has more tools to help you out with this.
Take for example the new generator functions, they provide an easy way to create pages and services for your app. This makes going from a basic app to a full featured app with navigation much easier.
To create a page you can use the following command:
$ ionic generate page page_nameÂ
Also, all of the following command is global command where you can set different type of generators:
$ ionic generate
Note: Please refer to ionic documentation for more information about adding pages to your app.
Note: Sometimes if you add new files to the project they won’t get compiled right away, so you would have to stop (ctrl+c) the app you served with ‘ionic serve’ and start serving it again by running ‘ionic serve’ again.
Note: I stongly suggest you to install ionic lab with command below in order to test your app in mobile devices on your system.
$ ionic lab
this command will prepare some files for you and ask you if you want to install ionic lab, answer y and wait till it installs.
by: ionicthemes & tjd studio