Local Development
When using Ionic just for the web, local development is as easy as running the dev script provided by Nuxt:
yarn dev -o
But when working with iOS and Android, we're required to sync our built project to XCode and Android Studio, using npx cap sync.
This manual process can be tedious, but capacitor provides a way to livereload in development mode. This allows you to test on a native device or a device simulator and maintain the hot module replacement or livereload functionality that you enjoy already with Nuxt on the web.
Native device or simulator
First, ensure your Nuxt development build is created and the development server is running:
yarn dev -o
Then, in a separate tab, sync the build to ios or android, based on the device you wish to run it on (or both). This copies the web build and capacitor configuration file into the native platform project, then updates the native plugins referenced in package.json, and installs any discovered capacitor or cordova plugins.
npx @ionic/cli capacitor sync ios --no-build
Then to deploy this to a native device or device simulator with livereload, you can ask Capacitor to run the build. Ensure your native device is plugged in so that it displays in your list.
npx @ionic/cli capacitor run ios --livereload-url=http://${LIP}:3000 --external --mode development
The app will then open on the chosen native device or device simulator.
Automating on-device dev
We recommend putting this into a script in scripts/ that you can run more easily via yarn run or pnpm run. For example:
#!/bin/bash
LIP=$(ipconfig getifaddr en0)
echo "🍦 Starting local development to android device - ensure local dev server is running already"
echo "🏗️ Type checking and building for development..."
pnpm run build:dev
echo "🔃 Capacitor installation, podfile installation, sync and copy to app distribution folders..."
npx @ionic/cli capacitor sync android --no-build
echo "🏃 Select an Android device to run the build at local ip address ${LIP} on..."
eval "npx @ionic/cli capacitor run android --livereload-url=http://${LIP}:3000 --external --mode development"
{
"scripts": {
"android": "bash ./scripts/android.sh",
"ios": "bash ./scripts/ios.sh"
}
}
yarn ios
yarn android