Hi guys, Hope you are doing fine. In the last tutorial have successfully started our first ionic application. But we are still not aware about running this application. Still await for our first look at the Graphical User Interface which the ionic provide as part of the scaffold bundle. Still wondering how are we going to emulate on iOS, run on android. Ionic provide a range of options to run the application, ranging from physical devices, simulator to web browsers. We are going to see all the possible ways to run our first application.
Run in Web Browser Mode
First We will run our application on web browser to begin with:
This is all we need to write on our command prompt/terminal to run own first application. Point to note here is that we should be inside the application project directory/folder to be able to run this command successfully. On successful execution of this command, the code will compile to generate the run-able bundle and also start the server to serve out the application as ionic applications need a running server to serve out the application.
This will open the application in your default browser in the full length website form, you can use the inspect tools to display in the mobile size or resizing the browser. Also we can run a command to see the UI for all the available platforms in ionic by running the following command on the cmd.
ionic serve –lab
We can also specify the browser to run the application on by placing the –browser tag in the command.
ionic serve –browser “chrome”
This will run the application in the chrome browser in your system.
Ionic serve command by default run in live reload mode, i.e. when you do some changes and hit the save in your code the server will be restarted with the updated changes and the application running in the browser will be reloaded with those changes. Running in browser is quite easy as compare to running on device as running on device need to have the platform configured for which we are developing our application as ultimate the mobile app need to run on a mobile device.
Running in the Native Device/Emulator
We can do most of our UI related development on the browser as its quick and easy to develop and debug with the help of chrome developer tools. But When our app make use of core functionality that the mobile device offers like the contact book, camera, gps etc we need to make use of the native plugins and whenever we use native plugins in ionic, then comes the role of cordova package and for cordova is not available on the web browser, and we are required to develop/debug those functionality on the native device or emulator in some cases can come handy.
But as should be understood as we need to run our code in emulator, we need emulator to be present in our system. Emulator are part of the development toolkit which are present in the form of sdks, and are different for different mobile platform. As is the case Ionic provide a hybrid solution for mobile platform in the form that code written once in ionic can be packaged for different platform as native implementation are taken care by the cordova plugins. But still we need the sdk to be present on the development system.
For example, If we want to develop an application for the Android platform then we require Android Studio and it is available for window, linux and mac Operating system. So we can develop for Android irrespective of the operating system we are using. On the Other hand If we develop for Apple ie iOS platform we would require XCode which is available for only MAC OS, so cannot develop unless we are on Mac Os.
Build our Application
So first we need to understand the audience for the mobile application we are developing and then we need to setup the required SDK package for that. This installation in independent of Ionic but ionic development is dependent on Android/Ios/Windows platform if we want our app to run on a physical device. Android can be setup from here. And XCode for Mac is available here.
After setting our SDKs we need to add the platform for which we are developing.
ionic cordova platform list
Note: Here we are using cordova along with ionic in the command. For all the operations, which are somewhat related to device/emulator or the native functionality will use cordova.
This command will list out all the platform that we can use for developing our application. We need to build our app for at least one of the available platforms. By using the command:-
ionic cordova platform add android
By using the above command, we have added android platform. We can use other available platforms as well.
ionic cordova build android
Now we can build for android as we have add android platform. If we have add iOS platform then we can use same command but instead of android we will use iOS. Now as the build is ready our app is ready to be deployed on device/emulator.
Run on Emulator
ionic cordova emulate android
Here we are emulating our app on android simulator. Android Simulator provide some of the native functionality. Gives a better understanding of app’s look and feel on emulator. Emulator also gives us the option to run the app in livereload mode.
ionic cordova emulate android –livereload
Also we can see the console log by using the following command.
ionic cordova emulate android –console
We can also club the above 2 command to look something like:
ionic cordova emulate android -lc
This helps to debug and test our application behavior by looking at the console logs.
Note: We can also see the logcat in android by using “adb logcat” command.
Running on Physical Device
Once we are able to emulate our app on emulator its quite easy to do the same on physical device. As the command to do this is almost identical except that we emulate on simulator and run on device.
ionic cordova run android
ionic cordova run ios
Similarly we can replace the android with ios to run on iOS device connected to the system.
Note: One important this is to note here is that we need to enable the developer mode in android to run our app on android. And In the developer options enable remote debugging. In ios we don’t require to do something like this to run on physical device. In case you face issue in running on Ios. Connect your device to system and try running your app from xcode project.
We have covered a lot in this, Hope you are not scared to try this. These are smalls details and you will easy get habitual in using as these are everyday requirement.
Hope i was able to explain with clarity about the topic. Feel free to ask questions, I will be more than happy to help. Thanks a lot for your time. Cheers…