Live Reload is useful for debugging both the web portion of an app as well as native functionality on device hardware or simulators. Rather than deploy a new native binary every time you make a code change, it reloads the browser (or Web View) when changes in the app are detected.
If running on a device, make sure it is on the same Wi-Fi network as your computer.
Using with Ionic CLI
The Ionic CLI includes a complete Live Reload experience, automating all of the steps that are detailed manually below. Install it along with
native-run (a cross-platform command-line utility for running native binaries on devices and simulators/emulators):
npm install -g @ionic/cli native-run
Next, use the
ionic cap run command to start the Live Reload process:
ionic cap run android -l --external
ionic cap run ios -l --external
This performs an
ionic build, copies web assets into the specified native platform, then opens the IDE for your native project (Xcode for iOS, Android Studio for Android).
server entry automatically created in
capacitor.config.json is removed after the command terminates. For complete details on the
ionic cap run command, see here.
Using with Framework CLIs
Capacitor supports CLIs with live reload capability.
First, determine your computer's IP address on your LAN.
- On macOS, run
ifconfig. The IP address is listed under
inet. Alternatively, open System Preferences -> Network -> (select active network) then find the IP listed under Status.
- On Windows, run
ipconfig. Look for the
Next, start your local web server. The server must be bound to
0.0.0.0 in order to be accessible from the LAN. The command to run will vary, but is typically:
npm run start
With react-scripts, use
HOST=0.0.0.0 npm run start
capacitor.config.json, create a
server entry then configure the
url field using the local web server's IP address and port:
npx cap copy to copy the updated Capacitor config into all native projects.
Open the native IDE if it's not already open:
npx cap open ios
npx cap open android
Finally, click the Run button to launch the app and start using Live Reload.
Be careful not to commit the server config to source control.