[Capacitor Tutorial] Convert react app into Android/ios app

what is the Capacitor?

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

Within five command line, we can convert any react app into Native progressive app

note: This tutorial won’t work if your app is using any hardware device(eg. storage, GPS, Camera, etc.). Implementation of Hardware devices requires additional Plugins.

Prerequisite-:

1. Node
2. Npm
3. Android-Studio/Xcode
4. Code Editor

So let's get started by creating a sample react project

npx create-react-app demo — use-npm
To implement a capacitor we require to install its core dependency and cli

npm install — save @capacitor/core @capacitor/cli
Now run below command this will ask you App Name and package name (package name should com.nameofPackge.com) after that it will create a capacitor.config file
npx cap init

Open your capacitor.config file change www to build

“webDir” : “www” — — — > “webDir” : “build”

Then run the build command

npm run build

Add the platform you want to add for your application, running below command create packages for Android, ios and electron

npx cap add android
npx cap add ios
npx cap add electron

then run, below command will trigger Android Studio/Xcode, it will automatically build your project

npx cap open android  //or
npx cap open ios      //or
npx cap open electron

how to implement Live reloading/ Hot Reloading ?

run npm start, copy the URL on which your app is running in capacitor.config.json

“server”: {
 “url”: “http://192.168.42.88:8100"
 //Place your App URL on which your Application is running
 }

Now open android->app->src->main->AndroidManifest.xml and add this line
android:usesCleartextTraffic=”true”

Now Application Tag looks like this

<application
android:usesCleartextTraffic=”true” //Line added
android:allowBackup=”true”
android:icon=”@mipmap/ic_launcher”
android:label=”@string/app_name”
android:roundIcon=”@mipmap/ic_launcher_round”
android:supportsRtl=”true”
android:theme=”@style/AppTheme”>run 

Then execute the final Command

npm run build

To test this execute npm start and npx cap open android in two different terminals, now the application is ready to develop

Note: when your application is completed remove the server address

Thank You!