How to configure Capacitor so that live reload works in development without breaking the production build

Question

I'm using Capacitor to build a native app using Vue.js.

I can get live reloading to work in the browser and the ios simulator, using the following configs:

1. The local dev server has to be set to the ip: 0.0.0.0. With Vue3/Vite it meant changing the script in package.json to...

  "scripts": {
    "dev": "vite --host 0.0.0.0",

2. The vite configs need to set the server to the ip address on the network

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

const config: CapacitorConfig = {
  appId: 'com.example.my_app',
  appName: 'My App',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
    url: 'http://192.168.x.xx:5173',
    cleartext: true
  }
};

export default config;

The Problem

My current configurations have an annoying problem! If you build the app with these settings, the app will only work on the local network with your dev server running. You can comment out the url: http://... in the configs and then the build will work normally, but this is annoying and clunky.

How do I get live reloading to work in development, but also get the production build to work without having to hack the configs?

Answer 1

use condition like this for example:

const isDevelopment = process.env.NODE_ENV === 'development';

const config: CapacitorConfig = {
  appId: 'com.example.my_app',
  appName: 'My App',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
    url: isDevelopment ? 'http://192.168.x.xx:5173' : undefined,
    cleartext: true
  }
};