Question on using ENV var , replacing during build time

[goldcoders]

Hi i would like to know how i can utilize dotenv

i have a web app, that utilizes dotenv...

this is not a nodejs app , so meaning i have no scope of process.env

is there a way we can replace during build time process.env.ANY_VARIABLE

to the equivalent value in .env ?

[evanw]

Closing as a duplicate of #69. You can use the esbuild API for this to write a build script that replaces process.env.ANY_VARIABLE during build time:

const { build } = require('esbuild')
const define = {}

for (const k in process.env) {
  define[`process.env.${k}`] = JSON.stringify(process.env[k])
}

const options = {
  stdio: 'inherit',
  entryPoints: ['./src/main.ts'],
  outfile: './dist/main.js',
  bundle: true,
  define,
}

build(options).catch(() => process.exit(1))

[goldcoders]

I did tried to create a file e.g : builder.js that contains the content above...

what do i do next ? , i tried node ./builder.js it has no effect no file is created ...
so am i missing something,

then i tried esbuild ./builder.js but its asking to use node as platform, but im not gonna use it for node, only in browser...

any help would be appreciated thanks :)

[evanw]

what do i do next ? , i tried node ./builder.js it has no effect no file is created ...

Sorry, it turns out the code snippet I copied and pasted from the old thread was for an old version of esbuild. The stdio argument was messing it up. You can also use buildSync to avoid the promise, which looks like this:

const { buildSync } = require('esbuild')
const define = {}

for (const k in process.env) {
  define[`process.env.${k}`] = JSON.stringify(process.env[k])
}

const options = {
  entryPoints: ['./src/main.ts'],
  outfile: './dist/main.js',
  bundle: true,
  define,
}

buildSync(options)

[goldcoders]

thanks it now works like a charm...
node esbuild.js is working great now unlike before nothing happens

[karolis-sh]

This doesn't work for env variable destructuring :/

$ echo 'const { NODE_ENV } = process.env; console.log(NODE_ENV); console.log(process.env.NODE_ENV);' | esbuild --define:process.env.NODE_ENV=\"production\"
const { NODE_ENV } = process.env;
console.log(NODE_ENV);
console.log("production");

[evanw]

You could fix that by defining process.env too, no?

[karolis-sh]

You could fix that by defining process.env too, no?

Partially. You could replace the whole process.env, but then it will not work for env variables that are defined prior to starting the js file:

esbuild --define:process.env={\\'NODE_ENV\\':\\'production\\'} input.js --outfile=output.js

input.js:

const { NODE_ENV, API_URL } = process.env;
console.log(NODE_ENV);
console.log(process.env.NODE_ENV);
console.log(API_URL);
console.log(process.env.API_URL);

output.js:

var NODE_ENV = "production";
var define_process_env_default = { NODE_ENV };
const { NODE_ENV: NODE_ENV2, API_URL } = define_process_env_default;
console.log(NODE_ENV2);
console.log(define_process_env_default.NODE_ENV);
console.log(API_URL);
console.log(define_process_env_default.API_URL);

$ API_URL=example.com node output.js
production
production
undefined
undefined