React: Capacitor live reload not working

I have setup Ionic React in my NX workspace using the @nxext/ionic-react generator and have successfully added iOS as one of my target platforms. What is not clear to from the docs of @nxext/ionic-react is how to get a development environment with livereload in the iOS Simulator working.

I have tried the following command which does start the simulator as expected

nx run client:cap --cmd="run ios -l --external"

however the process exists immediately after the project is built and the simulator is started.

I have setup Ionic with Capacitor in a non NX environment before, and from this experience the expected behaviour is for the process to stay alive and livereload the app which is running in the simulator.

What am I missing

[b3h3m0th]

@johnnyBira Thank you so much, finally a solution that worked for me! For anybody else wondering how to configure the server.url: I used the ip package which helps you dynamically setting that value like so:

import { CapacitorConfig } from '@capacitor/cli';
import ip from 'ip';

const config: CapacitorConfig = {
  appId: '{app-id}',
  appName: '{app-name}',
  webDir: '../../dist/apps/{app-name}',
  bundledWebRuntime: false,
  server: {
    url: `http://${ip.address()}:4200`,
    cleartext: true,
  },
};

export default config;

[johnnyBira]

My current recipe is sceptic to iOS, but I’m sure it can be extended to include other platforms:

1. Your current IP and add to capacitor-config.ts. packages/{package-name}/capacitor-config.ts

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: '{app-id}',
  appName: '{app-name}',
  webDir: '../../dist/packages/{package-name}',
  bundledWebRuntime: false,
  server: {
    url: '{your-current-ip}:4200',
    cleartext: true,
  },
};

export default config;

1. Update project.json with the following config: /package/{package-name}/project.json

}
    "serve": {
      "executor": "@nrwl/web:dev-server",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "client:build",
        "hmr": true,
        "browserTarget": "project:build",
        "host": "0.0.0.0"
      }
}

1. Start the dev server:

nx run {package-name}:serve

1. Start simulator:

Using Capacitor

nx run {package-name}:cap -cmd “run ios -l --external” Or do what I did and create a shorthand in project.json:

{
    "cap": {
      "executor": "@nxext/capacitor:cap",
      "options": {
        "cmd": "--help"
      },
      "configurations": {
        "ios": {
          "cmd": "run ios -l --external"
        }
      }
    }

Now you can run this to start the iOS simulator instead:

nx run {project-name}:cap:ios

Using XCode

Run:

nx run {project-name}:open:ios

This will open Xcode, where you can click the play button to start the app in your selected simulator