Running React with Ionic Capacitor and Live Reload

Incorporate React into your Ionic app

Photo by Fabian Grohs on Unsplash

Ionic 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 from Hybrid apps.

The Ionic Capacitor documentation doesn’t really work for building and running your react application with Capacitor and Live Reload. So, following hours spent working that out, I’ve figured out a process that works for me. Hopefully it benefits some others out there too.

First Build Your App

The starting point for this code is in this github repo: MyAppReactApp. This is the code from the YouTube Video React Hooks In Ionic Framework — Part One.

ionic serve

When it has run, notice that it’s displayed the URL the application is running on. Here’s what it looks like on my development device:

MacBook-Pro:MyAppReactApp aaronksaunders$ionic serve >react-scripts start 
[react-scripts] ℹ ｢wds｣: Project is running at http://10.6.17.241/ [react-scripts] ℹ ｢wds｣: webpack output is served from / 
[react-scripts] ℹ ｢wds｣: Content not from webpack is served from /Users/aaronksaunders/dev/projects/react/MyAppReactApp/public 
[react-scripts] ℹ ｢wds｣: 404s will fallback to /index.html 
[react-scripts] Starting the development server...

Setting up capacitor.config.json

The file capacitor.config.json can be found in the root of the application directory. We need to modify it so that capacitor knows where to find the website running. Take the URL from the output of the ionic serve command and modify your capacitor.config.json file as follows:

{
  "appId": "io.ionic.starter",
  "appName": "myAppReact1",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "build",
  "cordova": {},
  "server": {
    "url": "http://10.6.17.241:8100"
  }
}

Make sure you add the port to the end of the URL!

Running Capacitor

Since I work in Visual Studio Code, just open another terminal window and run the following…