Quasar changes capacitor.config.json on dev server start

Question

Running Quasar dev server in Capacitor mode withquasar dev -m capacitor -T android results in the dialog to choose external IP address:

? What external IP should Quasar use? 192.168.0.3
 App • Updated src-capacitor/package.json
 App • Updated capacitor.config.json
 App • Running "...\node_modules\@capacitor\cli\bin\capacitor sync android" in ...

The problem is that this updates src-capacitor/capacitor.config.json with local information that can be accidentally pushed, which is never desirable:

  "server": {
    "androidScheme": "https",
    "url": "http://192.168.0.3:9500" <-- this line is added
  }

Not to mention that most times it would be practical to skip this dialog, as the application runs locally and can safely use localhost instead of external IP.

As loosely described in the documentation, this seems to be the expected behaviour but not desirable one.

How can updating server.url in capacitor.config.json be avoided?

Answer 1

The problem is that this updates src-capacitor/capacitor.config.json with local information that can be accidentally pushed, which is never desirable:

That is why your actual config files should remain private (not tracked by Git).
You should only track config file values, plus a config file template

  src-capacitor/capacitor.config.dev.json
  src-capacitor/capacitor.config.prod.json
  src-capacitor/capacitor.config.tpl.json

Then, you can use a content filter driver, using .gitattributes declaration.

^{(image from "Customizing Git - Git Attributes", from "Pro Git book")}

The script generate the right json file by replacing placeholder values with the fixed value "url": "http://192.168.0.3:9500" each time you checkout a branch, when the smudge script detects a local development environment.

The generated actual conf remains ignored (by the .gitignore).
No synchronization issue during merges.

The smudge script selects the correct value file and generates the correct json based on the template the smudge script is applied to during a git switch (or old git checkout).

See a content driver setup example at "git smudge/clean filter between branches".

Your .gitattributes would include src-capacitor/capacitor.config.json filter=smudgeScript

git config filter.smudgeScript.smudge /path/to/your/smudgeScript
git config filter.smudgeScript.clean "cat src-capacitor/capacitor.config.tpl.json"

With smudgeScript (here, I simulate the logic which detects you are in a "devServer" with a hypothetical ENV variable):

#!/bin/bash

ENV=$(git branch --show-current)

if [[ "$ENV" == "development" ]]; then
  CONFIG_FILE="src-capacitor/capacitor.config.dev.json"
elif [[ "$ENV" == "production" ]]; then
  CONFIG_FILE="src-capacitor/capacitor.config.prod.json"
else
  # Default to development environment
  CONFIG_FILE="src-capacitor/capacitor.config.dev.json"
fi

cat $CONFIG_FILE

---

The alternative is to code that logic in the quasar.conf.js

module.exports = function (/* ctx */) {
  return {
    // ...other configurations
    devServer: {
      public: 'http://localhost:8080',  // replace with your local development server address
    },
  }
}

That would set a static URL in your quasar.conf.js. Inside the devServer property, specify a public property with your desired URL. You need to add the logic which detects you are in a "devServer".

---

Unfortunately, it appears that it's not possible to specify 127.0.0.1 for Capacitor in the config without modifying Quasar source code, even though it would be possible to make it work with Android Studio. Looks like specifying 192.168.xx.xx IP and discarding the changes from git is the way to go.

True, and using the first approach, where src-capacitor/capacitor.config.json is ignore, will allow you to specify what you need in it, without risking to add/commit/push said modification.

Answer 2

Under the hood of Quasar/Vite/Capacitor setup, devServer.host configuration option is compared against hardcoded set of addresses:

`'0.0.0.0', 'localhost', '127.0.0.1', '::1'`

In case a host is considered local (0.0.0.0 by default), external IP dialog is triggered, otherwise devServer.host is used as is. The value is written to capacitor.config.json nonetheless.

It's likely possible to specify another loopback (127.0.0.2) in devServer.host to pass this check and keep a usable default configuration for iOS-only project. It won't be available in Android Studio emulator as it aliases 127.0.0.1 that falls under the restriction.

A reasonable approach would be pass locally configured external IP to quasar.config.json with dotenv and discard the changes in capacitor.config.json by means of Git.

Answer 3

quasar dev -m capacitor -T android starts a web server and makes capacitor use that web server url for live reload. That’s what the dev option is for, so you can’t change that behavior. If you want to run your app without the live reload server you can use quasar build -m capacitor -T android instead, that will remove the server url from the capacitor.config.json.