Add script to generate the capacitor.config.json file

In this way we can generate the modifications for android with live reload automatically.

.gitignore

@@ -34,3 +34,6 @@ nbproject/
 .settings/
 test-results-junit/
 /src/package.json
+
+# Capacitor config file, we generate it at runtime
+capacitor.config.json

README.md

@@ -122,28 +122,24 @@ NOTE: The Android version is not fully functional yet. It is in development.
 
 #### Prerequisites
 
-You need to install Android Studio as Capacitor apps are configured and managed through it.
+You need to install [Android Studio](https://developer.android.com/studio) as Capacitor apps are configured and managed through it.
 
 #### Run development version
 
 1. Change to project folder and run `yarn install`.
-2. Run `yarn android:dev`.
+2. Run `yarn android:run`.
 
-The command will ask for the device to run the app. You need to have some Android virtual machine created or some Android phone [connected in ADB](https://developer.android.com/tools/adb).
+The command will ask for the device to run the app. You need to have some Android virtual machine created or some Android phone [connected using ADB](https://developer.android.com/tools/adb).
 
-If you want to use live reload with the app, then you need to make some manual adjustments, and use this other instructions:
+As alternative to the step 2, you can execute a `yarn android:open` to open de project into Android Studio and run or debug the app from there.
+
+#### Run development version with live reload
 
 1. Change to project folder and run `yarn install`.
-2. Run `yarn dev --host`. It will start the server and show the IP address. Ignore the localhost address and use the real IP address in the next step.
-3. Modify the file `capacitor.config.json` and add this properties:
-```
-  "server": {
-    "url": "[URL_SHOWN_IN_STEP_2]",
-    "cleartext": true
-  }
-```
-4. Run `yarn android:dev`.
+2. Run `yarn dev --host`. It will start the vite server and will show you the IP address where the server is listening.
+3. Run `yarn android:dev` 
 
+This will ask for the IP where the server is running (if there are more than one network interfaces). You need to have some Android virtual machine created or some Android phone [connected using ADB](https://developer.android.com/tools/adb).
 Any change make in the code will reload the app in the Android device.
 
 ### Running tests

capacitor.config.generator.mjs

@@ -0,0 +1,70 @@
+import fs from 'fs';
+import inquirer from 'inquirer';
+import os from 'os';
+
+const VITE_SERVER_PORT = 8000;
+
+async function getIpList() {
+  const nets = os.networkInterfaces();
+
+  const ipList = [];
+  for (const name of Object.keys(nets)) {
+      for (const net of nets[name]) {
+          const familyV4Value = typeof net.family === 'string' ? 'IPv4' : 4;
+          if (net.family === familyV4Value && !net.internal) {
+            ipList.push(net.address);
+          }
+      }
+  }
+  return ipList;
+}
+
+async function filterIpList(ipList) {
+
+  if (ipList.length === 0) {
+    console.log('No IP address found');
+    process.exit(1);
+  }
+
+  if (ipList.length === 1) {
+    console.log('Only one IP address found:', ipList[0]);
+    return ipList[0];
+  }
+
+  const option = await inquirer.prompt([
+    {
+      type: 'list',
+      name: 'ip',
+      message: 'Select the IP address where the Vite server is running:',
+      choices: ipList,
+    },
+  ]);
+
+  return option.ip;
+}
+
+async function modifyDevCapacitorConfig(capacitorConfigBase) {
+  const ipList = await getIpList();
+  const ip = await filterIpList(ipList);
+
+  capacitorConfigBase.server= {
+    url: `http://${ip}:${VITE_SERVER_PORT}`,
+    cleartext: true,
+  };
+
+  return capacitorConfigBase;
+}
+
+const capacitorConfig = JSON.parse(fs.readFileSync('./capacitor.config.base.json', { encoding: 'utf8', flag: 'r' }));
+
+if (process.argv.length > 2 && process.argv[2] === '--dev') {
+  modifyDevCapacitorConfig(capacitorConfig)
+  .then((capacitorConfig) => {
+    console.log('Generating capacitor.config.json DEVELOPMENT with:\n', capacitorConfig);
+    fs.writeFileSync('capacitor.config.json', JSON.stringify(capacitorConfig));
+  });
+} else {
+  console.log('Generating capacitor.config.json STANDARD with:\n', capacitorConfig);
+  fs.writeFileSync('capacitor.config.json', JSON.stringify(capacitorConfig));
+}
+

package.json

@@ -15,7 +15,9 @@
     "lint": "eslint --ext .js,.vue src",
     "lint:fix": "eslint --fix src",
     "storybook": "start-storybook -p 6006",
-    "android:dev": "vite build && npx cap sync && npx cap build android"
+    "android:dev": "node capacitor.config.generator.mjs --dev && npx cap run android",
+    "android:open": "vite build && node capacitor.config.generator.mjs && npx cap open android",
+    "android:run": "vite build && node capacitor.config.generator.mjs && npx cap run android"
   },
   "repository": {
     "type": "git",
@@ -69,6 +71,7 @@
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^7.20.0",
     "husky": "^4.3.8",
+    "inquirer": "^9.3.1",
     "less": "^4.2.0",
     "rollup-plugin-copy": "^3.5.0",
     "run-script-os": "^1.1.6",

vite.config.js

@@ -120,8 +120,10 @@ export default defineConfig({
     },
     server: {
         port: 8000,
+        strictPort: true,
     },
     preview: {
         port: 8080,
+        strictPort: true,
     },
 });