ENV vars in config

[JarrodMFlesch]

Is there a way to actually use env variables in the capacitor.config.ts file? Every time I boot up xcode, the app will not launch and gives me the Error: The URL can’t be shown message, the url is being read as undefined

I am using the following:

const config: CapacitorConfig = {
  // ... rest of config removed for clarity
  server: {
    url: `${process.env.REACT_APP_SITE_URL}`,
  }
}

[angeloraso]

Hi. You could create a script that replaces the environment variable with its value with "fs"

script.js

const environmentFile = require('../environments/environment.ts');
const fs = require('fs');

const REACT_APP_SITE_URL = /* Get variable value */

const capacitorConfigPath = 'capacitor.config.json';

fs.readFile(capacitorConfigPath, 'utf8', (err, file) => {
  if (err || !file) {
    console.log('CAPACITOR CONFIG FILE ERROR');
    return;
  }

  let capacitorConfigFile = JSON.parse(file);

  capacitorConfigFile.server.url = REACT_APP_SITE_URL;

  capacitorConfigFile = JSON.stringify(capacitorConfigFile, null, 2);

  fs.writeFile(capacitorConfigPath, capacitorConfigFile, err => {
    if (err) {
      throw err;
    }

    console.log('CAPACITOR CONFIG FILE MODIFIED');
  });
});

Not the best solution but I think it should work

• How to use:
  $ node script.js && npx cap run ios

[JarrodMFlesch]

Thank you @angeloraso, I was actually just being negligent. I ended up using dotenv to get my env vars to populate in my config.

[jonasmedeiros]

If you are using the last version of the capacitor and typescript here is an example that is really easy to follow that worked for me.

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

dotenv.config({ path: path.resolve(__dirname, '.env') });

let config: CapacitorConfig;

const baseConfig: CapacitorConfig = {
  appId: 'com.site',
  appName: 'site,
  webDir: 'build',
  bundledWebRuntime: false,
  cordova: {
    preferences: {
      'temp-app-id': process.env.NODE_YOUR_NAME
    }
  }
};

config = baseConfig;

export default config;

[mirko77]

Any chance to use a js file?

[jcesarmobile]

yeah, both .ts and .js config files are supported

[martin-braun]

I came here, becaue NODE_ENV wasn't set in my capacitor.config.js. To give you some insights if you came for the same reason:

cap sync will run capacitor.config.js to produce capacitor.config.json in your assets. So to get this going, you can just use cross-env.

partial npm scripts in package.json:

    "cap:sync:debug": "cross-env NODE_ENV=development cap sync",
    "cap:sync:release": "cross-env NODE_ENV=production cap sync"