Member-only story
Running React with Ionic Capacitor and Live Reload
Incorporate React into your Ionic app

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…