@aaronksaunders my comment wasn’t a dig at you. I mentioned you so you’d be in the loop of the discussion – perhaps you’ve stumbled on new info in this regard.
I think the main question that everyone has been driving at is if/when Ionic plans to either replace CRA with Vite or offer an opt-in config.
As for frameworks, I’m more of a React guy, but I think the issue of failing to running capacitor mobile will exist in your solution. Correct me if I’m wrong.
This is a completely different issue, your issue here is trying to get live reload working on iOS. I did not test live reload since I don’t really use it that much in my day to day work, the builds are fast enough for me.
aaronksaunders@Aarons-14MacBookProM1Pro my-react-app % npm run dev
> my-react-app@0.0.0 dev
> vite
VITE v3.0.6 ready in 359 ms
➜ Local: http://127.0.0.1:5173/
➜ Network: use --host to expose
12:57:47 AM [vite] hmr update /src/App.tsx
Then modify capacitor.config.ts
const config: CapacitorConfig = {
appId: 'my.react.app',
appName: 'my-react-app',
webDir: 'dist',
bundledWebRuntime: false,
server : {
"url" : "http://127.0.0.1:5173/" //<= use address the server is running on locally
}
};
And finally deploy your app to the device
aaronksaunders@Aarons-14MacBookProM1Pro my-react-app % npx cap run ios --external --target=73CE91C9-4855-496B-9481-CA486652E9D7
✔ Copying web assets from dist to ios/App/App/public in 12.83ms
✔ Creating capacitor.config.json in ios/App/App in 1.35ms
✔ copy ios in 25.05ms
✔ Updating iOS plugins in 1.96ms
[info] Found 4 Capacitor plugins for ios:
@capacitor/app@4.0.1
@capacitor/haptics@4.0.1
@capacitor/keyboard@4.0.1
@capacitor/status-bar@4.0.1
✔ Updating iOS native dependencies with pod install in 2.53s
✔ update ios in 2.56s
✔ Running xcodebuild in 3.20s
✔ Deploying App.app to 73CE91C9-4855-496B-9481-CA486652E9D7 in 1.51s
aaronksaunders@Aarons-14MacBookProM1Pro my-react-app %
Now your mobile app is pointing to the local server running and you basically have live-reload working. I am certain there is another approach, but like I said I don’t use it often enough. Hopefully, this gets you moving
REMEMBER
remove the edit to the capacitor.config.ts before deploying to production otherwise the app will be looking for the local server to run the app !!
If you have multiple IP addresses and you’re on macOS:
# Set this in your shell alias file
alias ip='ifconfig en0 inet | grep inet | awk -F " " ''{ print $2 }'''
# Run this
ionic cap run ios --open --livereload --external --host $(ip)
Thanks @staff0rd! The missing piece for me was setting --host without defining the value. If I set the IP (host), I was getting “Waiting for connectivity with npm…”.
The key for me was to include both ‘run’ and ‘–open’. If you leave out ‘–open’ the build will fail by using the wrong gradle.build. The command ‘ionic build’ executes the vite.cmd build. The command ‘ionic cap open android’ will launch the emulator in say Android Studio so you can run it. But of course we want live reload . The first documents I read just mention the command ‘ionic cap run android -l --external’ and this alone will run but try to grab the build.gradle under the android folder which will make you sad.