A way to disable Capacitor Config.json Server Url in Production

[agrosner]

Currently, when running the app with livereload enabled via:

ionic capacitor run ios --livereload

will insert into our capacitor.config.json a server url:

{
  "appId": "io.ionic.starter",
  "appName": "app",
  "bundledWebRuntime": false,
  "webDir": "www",
  "plugins": {
    "Keyboard": {
      "resize": "none"
    }
  },
****
  "server": {
    "url": "http://192.168.28.43:8100"
  }
****
}

This is problematic because if this is ever accidently committed to the repo, on launch from a production build from a CI server, it will still look for that URL, and users would be presented with a blank app screen that never loads.

This is a request to provide a way to turn off url searching, or provide a better way to set up live reloading without need for it to modify this file in the first place, possibly through the tooling in a different way.

[jcesarmobile]

Some people is using the url to point to real websites, so we can't disable it for production as it will break some use cases.
What about using a new "devUrl" that is only used while in development mode?

Note that this will require Ionic CLI changes as it's Ionic CLI the one that sets the server url, so probably better report it there. https://github.com/ionic-team/ionic-cli/issues

[agrosner]

good point, but yes, it should set a devUrl for live reloading, but wouldn't the url change based on a dev's ip address? I think this should be something if its set, is useable on any computer, since it could be checked in. Devs with different IP addresses would constantly be overwriting this line, cluttering git changelog. React Native, Flutter, and other tools do not require this field when live reloading, so maybe its just implementation details?

[diachedelic]

my solution is to generate capacitor.config.json on build:

// generate_capacitor_config.js

const ip = require('ip')
const fs = require('fs')
const path = require('path')

const capacitorConfig = {
  // ...
  server: {},
}

const isHotspotting = (
  // Samsung A5 + Macbook
  ip.address() === '192.168.43.101' &&
  process.env.NODE_ENV !== 'production'
)

if (isHotspotting) {
  // support HMR on device
  capacitorConfig.server.url = 'http://192.168.43.101:8013'
}

const configPath = path.resolve(__dirname, 'capacitor.config.json')

fs.writeFileSync(configPath, JSON.stringify(capacitorConfig))

// package.json
{
  "scripts": {
    "build": "export NODE_ENV=production && npm run config && vue-cli-service build --mode development && cap copy",
    "config": "node ./generate_capacitor_config.js",
    "dev": "npm run config && vue-cli-service serve"
  }
}

[agrosner]

that is an interesting though. the issue I'm describing is that it modifies the capacitor config.json on build if you live reload, leading to accidental checkin to git, which essentially breaks the app if someones computer is not hosting the live reload server.

There should be a separate file that is used that is ignored by git with any capacitor project. why not name it capacitor.config.dev.json? this file would be ignored on production builds anyways and so to keep it clean and allow you to configure the app differently if need be. This could go further to allow more configuration files based on ng environment.

[nklayman]

In vue cli plugin capacitor, I modify the capacitor.config.json inside of the android or ios folder, as seen here. This allows me to have capacitor use the dev server url without having to modify the user's capacitor.config.js.

[eladcandroid]

Any news? I think it's very confusing and @agrosner solution sounds great..

[Cretezy]

Would it also be possible to only use server.url? Say I always want to load the public web app version, and not bundle the app in.

[jcesarmobile]

Yes, that's possible, but Apple will probably not approve your app if you do that.

[vance]

Any way to get this on a future milestone?

[dotrub]

Just don't check in your capacitor.config.json. Check in versions of it like capacitor.config.dev.json and capacitor.config.prod.json, and when you build, construct capacitor.config.json form the appropriate file. Then it doesn't matter if your capacitor.config.json gets rewritten, it won't get pushed to source control anyway.
My dev build script just has a cp ./internals/capacitor/capacitor.config.dev.json ./capacitor.config.json line in it.

[imhoffd]

@agrosner Have you gotten a chance to use the new Ionic CLI which clears out the server URL and runs a copy when cancelled? It should achieve the behavior you're looking for.

[jansgescheit]

I advocate that the development livereload url is handled in a different file or I can be permanently active in the development environment.
Even if the CLI resets the file, I can commit the "error" because I don't have to end the livereload before committing.

[imhoffd]

This use case should be solved in Capacitor 3 because you can use capacitor.config.ts: #3133

[buschtoens]

@dwieeb Could we get a tracking issue for capacitor.config.ts or would you like to discuss specs here?

I'm asking, since we would like to use this for whitelabeling / running app builds for different countries. Usually this not only requires a change in the capacitor.config.json, but also some other native app build parameters. It would be nice, if some patterns could be recommended for this. Currently I'm leaning to adding the respective build parameters to the capacitor.config.ts and then read them in the native build step.

[buschtoens]

Somewhat relatedly, it would be quite useful to generate more than one config at a time and copy all over to the native apps, which would then, at build time depending on the build scheme / flavor pick the right one.

[imhoffd]

@buschtoens Please feel free to add your thoughts to this issue: #3141

[fkirc]

I think that Capacitor-config as JavaScript is nice to have, but it does not really solve this build-safety-problem.

Of course, you could script a JavaScript-config that does something different depending on environment variables.
However, whatever your JavaScript-config is doing, the native apps do not really care about the JavaScript-config. Instead, native apps will take whatever capacitor.config.json happens to be there.

In other words, the underlying problem is that JavaScript-config might become inconsistent with native-config.
For example, your JavaScript-config might be a debug-config although you are building a native app with a release-config.

Therefore, I see only three solutions to achieve build-safety:

• Build and deploy everything via CI/CD (e.g. something like Appflow).
• During native build-time, add additional steps to ensure that native-config and JavaScript-config are consistent (e.g. something like capsafe in https://github.com/fkirc/capacitor-build-safety).
• During runtime, let the native app decide which JavaScript-config is suitable (e.g. the native app could pick the right subset of JavaScript-config)

[fkirc]

Perhaps Capacitor 3.X will partially solve this issue, but the native capacitor.config.json's will still exist in Capacitor 3.X.
Therefore, I created the new tool capsafe to do this config-check: https://github.com/fkirc/capacitor-build-safety
Beside of the config-check, capsafe enforces that Capacitor apps are always built with the most recent commit (with some relaxations).

[damienromito]

I customized the @diachedelic script to automatically update capacitor.config.json
https://gist.github.com/damienromito/e6b3930ffde4c7240f109d1de69febb5

[gnchiesa]

Hi all, presented workarounds sound good, but I've never been able to get Ionic build to respect custom build scripts. Is there any way I can hook any of these solutions into ionic build/appflow ? I'm sorry if I'm missing sth, I'm no expert in the matter
Thanks in advance.

[sundayz]

I'm a bit confused, it's not really explained in any guide what the url should be set to in production, should it be left blank? Capacitor seems to modify the json file to add the live reload URL, which is obviously not what you want. Neither this page or any guide I've read on the Ionic framework website seem to mention how you should handle this.

[scottwilson312]

I would second this. the url says "not intended for use in production"? Why not? That seems like a valid use case?

[jcesarmobile]

Because it's agains Apple and Google guidelines, you can get your app rejected if you do that. But there are people using it without problems.
#4080

[sundayz]

But setting URL breaks my production app. In development it's set to the address of my hot reload development server, let's say 192.168.0.1:8080. On my end users' network, that address doesn't do anything, so they get an error page. The solution is to remove url from my config when building production. But there doesn't seem to be a way to set production URL and develoment URL separately.

[jcesarmobile]

With Capacitor 3 you can switch to capacitor.config.ts or capacitor.config.js and use env variables to generate the server.url, or not, depending on your use case.

[maiconm]

Any solution?

[scottwilson312]

Just for anyone who comes across this - I have an app in both the iOS and Android play stores that use server url in production. They got past the verification just fine.

[oliveryasuna]

I'm curious about this because, from what I have heard, Apple doesn't like apps that just load a web page. What does the app do? Does the external webpage execute native code?

[alexcroox]

they don't like it because they could review the app when it's serving up html/js for a childrens game, and then 2 weeks later it could serve up assets for a gambling app. There's a chance OP has got lucky through a few rounds of review but runs the risk of someone noticing and rejecting the next. You could of course say the same thing about OTA updates, which are allowed...

[ozyman42]

I'm curious is there a way to change the server URL value from within the app code? Perhaps I want a way for users to toggle between different experiences of the app, or I want to target different servers based on some feature flag or some variable only known at runtime.

[oliveryasuna]

Capacitor uses a web view, so just use location.href. You could store something with the Preferences API.

[baylorpaul]

You may specify the NODE_ENV at runtime & read that value in capacitor.config.ts to dynamically change your configuration.
See Dynamically build for different environments.

This allows you to read process.env.NODE_ENV in your capacitor.config.ts.

When you run the app, you would then run e.g.
NODE_ENV=qa npx cap run ios

Additionally, if you're using Vite, it's important to note that NODE_ENV (process.env.NODE_ENV) and modes are two different concepts.