DEV Community

Cover image for Convert your Existing React js App to Android App Using the Ionic Capacitor
Khaled Ben Yahya
Khaled Ben Yahya

Posted on

Convert your Existing React js App to Android App Using the Ionic Capacitor

Today I will show the easiest and simple way I’ve found to convert your existing React js app to an android app using ionic capacitor.

What is Capacitor? According to documentation:

Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, and the web. We call these apps “Native Progressive Web Apps” and they represent the next evolution beyond Hybrid apps.

Requirements:

  • Existing React App
  • Ionic
  • Android Studio

First, go to the root of your existing react app and create a file capacitor.config.json and inside that put the below code.

{
  "appId": "io.ionic.nameofyourapp",
  "appName": "nameofyourapp",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "build",
  "cordova": {}
}
Enter fullscreen mode Exit fullscreen mode
  1. Now create another file name ionic.config.json and inside that insert the below code.
{
  "name": "nameofyourapp",
  "integrations": {
    "capacitor": {}
  },
  "type": "react"
}
Enter fullscreen mode Exit fullscreen mode

Note: replace nameofyourapp in both files with the name of your app.

  1. Now we need to build our react project. To build your react app open your terminal to the root of the project and run the below-mentioned command
npm run build
Enter fullscreen mode Exit fullscreen mode

Note: this will create the build folder in your root project and the name of the folder should match the webDir name inside capacitor.config.json file.

  1. Now we will install ionic globally in our machine. To install ionic globally in your machine open your terminal and run the below command.
npm install -g @ionic/cli
Enter fullscreen mode Exit fullscreen mode
  1. Now install the capacitor core in our project.
npm install @capacitor/core --save
Enter fullscreen mode Exit fullscreen mode
  1. Now install the capacitor CLI.
npm i -D @capacitor/cli
Enter fullscreen mode Exit fullscreen mode
  1. After that, we will first create an android app with our existing react app.
ionic capacitor add android
Enter fullscreen mode Exit fullscreen mode

This will create the android folder in your root project and install all the required dependencies.

  1. Now run the below command to launch your android project on Android Studio.
npx cap open android
Enter fullscreen mode Exit fullscreen mode

Wait some time and then it will ask you to update the Gradle. Just update the Gradle to the latest version and run the project in the emulator. You can also connect your mobile to run the project live on your mobile phone.

  1. Now open the build menu from the android studio and build your apk file.

Top comments (1)

Collapse
 
vivienne-m profile image
Vivienne Medrano

It's great to see how developers can leverage existing web technologies for mobile app development. For further insights and alternative approaches to converting websites into Android apps, you might find this guide useful: cleveroad.com/blog/convert-website....