-
-
Notifications
You must be signed in to change notification settings - Fork 100
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React: Capacitor live reload not working #773
Comments
I guess it's related to this issue in the old repository? Is this still the suggested workaround still relevant or is there another solution? |
@johnnyBira they’re technically the same plugins but for Nx 14. We migrated them over and continue here together. But no further bug fixing here until now so probably the same bug. |
@DominikPieper that's too bad 😓 This means there's pretty much no viable development environment at the moment. |
I was finally able to follow the steps in the workaround above. React configs was slightly different from the suggested Angular recipe. Will post my workaround for React later tonight |
My current recipe is sceptic to iOS, but I'm sure it can be extended to include other platforms:
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;
}
"serve": {
"executor": "@nrwl/web:dev-server",
"defaultConfiguration": "development",
"options": {
"buildTarget": "client:build",
"hmr": true,
"browserTarget": "project:build",
"host": "0.0.0.0"
}
}
nx run {package-name}:serve
Using Capacitornx run {package-name}:cap -cmd "run ios -l --external" {
"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:
Using XCodeRun: 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 |
@johnnyBira Thank you so much, finally a solution that worked for me! For anybody else wondering how to configure the 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; |
My run command (@nxext/capacitor:ca) exits immediately. I'm trying to integrate a Capacitor Angular app to my monorepo. Do I need to be running also the "serve" command in the background? |
I was able to do this for android, albeit it's weird, and I'm not sure if it's really reliable for how an app would actually behave on android. My capacitor.config.ts file (remember to replace fieldpak and fieldclient with your app): import { CapacitorConfig } from '@capacitor/cli';
import ip from 'ip';
const config: CapacitorConfig = {
appId: 'com.fieldpak.fieldclient',
appName: 'field-client',
webDir: '../../dist/apps/field-client',
bundledWebRuntime: false,
server: {
androidScheme: 'https',
url: `http://${ip.address()}:4200`,
cleartext: true
},
};
export default config; I did not use the And I simply added the options with "serve": {
"executor": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "field-client:build:production"
},
"development": {
"browserTarget": "field-client:build:development"
}
},
"defaultConfiguration": "development",
"options": {
"hmr": true,
"host": "0.0.0.0"
}
}, As for actually having this run with live reload.... this is where it gets weird I serve the app with But then, I realized I could try typing into the url bar at the top of the device inspection window. |
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
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
The text was updated successfully, but these errors were encountered: