Working with Ionic — The Right Way

Hey NetHeads!! During this lockdown, I’ve been involved in small scale application development and have come across a codebase named Ionic that can be build for any platform using HTML, CSS and JS.

In this story, I’ll put up my approach in implementing and integrating Ionic applications with Angular and build an Android App.

Before you start

Ohh!!! Wait Am I missing something…

Here you go, make sure to install the below softwares before you gear up to explore Ionic.

• Node Js
• Angular CLI
• Android Studio

Note: If you are working on mac, use the below command to install Angular CLI globally

npm cache clean --force
sudo npm install -g @angular/cli

Now, we have the key frameworks installed, lets have a look at Ionic.

Ionic Framework

Ionic is a platform to build, secure, deploy, and scale modern native and mobile web apps across any platform.

Developer’s point of view — You develop a Front End application on Angular, React or Vue, Ionic with inbuilt HTML tags and few commands will build the application as Android or iOS app.

Install Ionic

Run the following in the command line terminal to install the Ionic CLI (ionic), native-run, used to run native binaries on devices and simulators/emulators, and cordova-res, used to generate native app icons and splash screens

sudo npm install -g @ionic/cli native-run cordova-res

Add Capacitor to your project

Capacitor is Ionic’s official app runtime that makes it easy to deploy web apps to native platforms like iOS, Android, and more.

Create an ionic app using one of our ready-made app templates, or a blank one to start fresh

ionic start dummycap blank --type=angular --capacitor

Run your app

Much of your app can be built in the browser with the following command

ionic serve

You can access the app running on http://localhost:8100 via browser

We are now all set to implement the Front end business rules in angular way.

Hurray!!! My first Ionic App

Deploy to Android

Since we added Capacitor to our project, we can access inbuilt commands to deploy the app on your device

If you’re still running ionic serve in the terminal, cancel it. Complete a fresh build of your Ionic project, fixing any errors that it reports

ionic build

Next, create both the iOS and Android projects

ionic cap add android

Every time you perform a build (e.g. ionic build) that updates your web directory (default: www), you'll need to copy those changes into your native projects

ionic cap copy

After making updates to the the code (such as adding a new plugin), use the sync command

ionic cap sync

Android Deployment

Capacitor Android apps are configured and managed through Android Studio. To open the app in Android studio, run the following command

ionic cap open android

Stay tuned for more productionized solutions!
Thank you for reading!!

Happy And Safe Coding!!

Interested to read more stories, you are always welcome to have a look at my writings here:

Ionic Side-Menu and Tabs as Separate modules