We're planting a tree for every job application! Click here to learn more

Compiling an Ionic React App for Android

King Somto

18 Jun 2021

•

4 min read

 Compiling an Ionic React App for Android
  • JavaScript

Intro

If you have experience creating React web apps, you can use the same knowledge and skills to create mobile apps utilizing the Ionic framework. In this article, we are going to look at how to set up the Android development environment to compile a React Ionic app into Android.

It is not meant to teach you how to create a React Ionic App, if you are looking for that then I recommend checking out my other tutorial on how to create a React Ionic app.

Setting up

Setting up the Android development environment would require a few more software installations.

  • Android Studio
  • Capacitor

Android studio

Android Studio is the IDE(Integrated Development Environment) for creating Native Android Apps. It contains android SDKs AND gives you access to a list of android virtual devices which are run as emulators and these emulators can be used to launch android apps.

Downloading Android studio

Android Studio can be downloaded from the android development website, it's very simple to get it downloaded and set up.

Installing Android studio

Once downloaded clicking on the installation file opens the installer.

Screenshot 2021-02-21 at 14.36.39.png

Installing the android development software installs the needed files into your machine.

Setting up the SDK (Software development Kit)

The Android SDK (software development kit) is a set of development tools used in the development of android applications for the android platform, the Android SDK includes source code and libraries to access features native to the android platform.

Screenshot 2021-02-21 at 14.58.39.png

Configuring the command line

The Android SDK comes pre-installed with useful tools for development. But we need to set up some environmental variables before we start development, these commands can be used for both macOS and Linux.

~ $ export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk

The command above sets the environment variable ANDROID_SDK_ROOT.

Creating a Virtual Android Device

Android Virtual Devices (AVDs) are virtual devices that enable engineers to simulate the Android operating system and run android mobile apps, setting this up is pretty easy.

Avds are managed by the AVD manager, this can be set up either in the Android Studio welcome screen or the AVD Manager by clicking the AVD button.

Screenshot 2021-02-23 at 14.21.51.png

The first step would be to click on the Create Your Device opens another popup that lets you select the phone model.

Screenshot 2021-02-23 at 18.20.07.png

The next step would be to select the phone model to clone (I advise selecting the phone with the biggest display), clicking on the next button should take you to a popup to select the operating system for the device.Screenshot 2021-02-23 at 19.37.23.png

Screenshot 2021-02-23 at 18.25.23.png

The next step involves selecting the operating system to be used (I advise downloading the latest operating system).

Screenshot 2021-02-23 at 18.27.26.png

That should have everything set up, clicking finish should set everything up.

unnamed (4).png

Done, you can now open the emulator by clicking the play button.

Screenshot 2021-02-23 at 19.37.23.png

Screenshot 2021-02-23 at 21.53.18.png

Setting up an Ionic Project

The goal of this tutorial is not to learn how to set up an Ionic app, if you need that I advise you use this tutorial, the article should get you up to date with creating an Ionic app but incase you don't want to go through all that you can just clone this repo.

Steps needed

git clone https://github.com/virgincodes/Javascriptworks-ionic-intro
cd ionicT && npm install
ionic serve

Our final solution would be

Screenshot 2021-02-24 at 02.35.23.png

Compiling the app

Compiling the app involves wrapping our Web app into a mobile app, platforms like Cordova and Capacitor are amazing solutions for this, they provide a Command Line Interface to be able to run commands to compile apps and add native plugins.

Capacitor

The capacitor is an open-source native runtime for building Web Native apps. Create cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS. Capacitor comes preloaded with native code that lets Ionic access native app features like camera and gyroscope.

Steps

Installing the app involves setting up the Capacitor and using it to compile the android app.

Step 1

  yarn add @capacitor/cli @capacitor/core    

This command installs capacitor into the local file directory

Step 2

yarn run build 

This command builds the React app into a bundle that is lighter and can be run on the android app.

Step 3

 npx cap init    

This command initializes capacitor in the app project, at this stage we set some params like app name.

Step 4

npx cap add android

This command adds android to the app

Step 5

 npx cap open android

This command opens android studio with the app root file.

Screenshot 2021-02-28 at 13.45.32.png

Step 6

Click on the run button and the app would compile and activate the Android emulator Screenshot 2021-02-28 at 13.45.38.png

Switching to the emulator after a few minutes we have this.

Screenshot 2021-03-27 at 15.44.34.png

The app is finally ready and we can see the exact similarity between the app running on the browser and the emulator.

Conclusion

In this tutorial, we have been able to see how it is possible to set up the android development platform on our system and be able to compile the application using capacitor which is our library for wrapping our web app into the android application and also preview that application on the android emulator.

Did you like this article?

King Somto

Dev

See other articles by King

Related jobs

See all

Title

The company

  • Remote

Title

The company

  • Remote

Title

The company

  • Remote

Title

The company

  • Remote

Related articles

JavaScript Functional Style Made Simple

JavaScript Functional Style Made Simple

Daniel Boros

•

12 Sep 2021

JavaScript Functional Style Made Simple

JavaScript Functional Style Made Simple

Daniel Boros

•

12 Sep 2021

WorksHub

CareersCompaniesSitemapFunctional WorksBlockchain WorksJavaScript WorksAI WorksGolang WorksJava WorksPython WorksRemote Works
hello@works-hub.com

Ground Floor, Verse Building, 18 Brunswick Place, London, N1 6DZ

108 E 16th Street, New York, NY 10003

Subscribe to our newsletter

Join over 111,000 others and get access to exclusive content, job opportunities and more!

© 2024 WorksHub

Privacy PolicyDeveloped by WorksHub