Member-only story

Running React with Ionic Capacitor and Live Reload

Incorporate React into your Ionic app

Clearly Innovative
Better Programming
4 min readJan 2, 2020

--

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…

--

--

Clearly Innovative
Clearly Innovative

Written by Clearly Innovative

DC based software agency utilizing #Javascript, #HTML5, #Ionicframework, #VueJS , #ReactJS to build solutions. https://www.youtube.com/@AaronSaundersCI

No responses yet

What are your thoughts?