We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies.

We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies. Less

We use cookies and other tracking technologies... More

Login or register
to publish this job!

Login or register
to save this job!

Login or register
to save interesting jobs!

Login or register
to get access to all your job applications!

Login or register to start contributing with an article!

Login or register
to see more jobs from this company!

Login or register
to boost this post!

Show some love to the author of this blog by giving their post some rocket fuel 🚀.

Login or register to search for your ideal job!

Login or register to start working on this issue!

Login or register
to save articles!

Login to see the application

Engineers who find a new job through WorksHub average a 15% increase in salary 🚀

You will be redirected back to this page right after signin

Blog hero image

Compiling an Ionic React App for Android

King Somto 18 June, 2021 | 4 min read

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 ANDROIDSDKROOT.

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

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

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.

Discuss this article on

Author's avatar
King Somto
I really dont know much but am willing to try and learn

Related Issues

cosmos / gaia
  • Started
  • 0
  • 6
  • Intermediate
  • Go
cosmos / gaia
  • Started
  • 0
  • 3
  • Intermediate
  • Go
cosmos / ibc
  • Open
  • 0
  • 0
  • Intermediate
  • TeX

Get hired!

Sign up now and apply for roles at companies that interest you.

Engineers who find a new job through WorksHub average a 15% increase in salary.

Start with GitHubStart with Stack OverflowStart with Email