Initialize process.env on client side

[thani-sh]

The problem with #565 is that a copy of the complete env object will be placed everywhere process.env gets used. JSON is also a valid way to represent javascript objects so it should work fine. But in most cases this will add lots of redundant code.

Example:

// env = { X: 100, Y: 200, Z: 300 }
console.log(process.env)
console.log(process.env.X)
console.log(process.env.Y)

will be converted to

// env = { X: 100, Y: 200, Z: 300 }
console.log({ "X": 100, "Y": 200, "Z": 300 })
console.log({ "X": 100, "Y": 200, "Z": 300 }.X)
console.log({ "X": 100, "Y": 200, "Z": 300 }.Y)

Solution 1:

As a solution, we can initialize the process.env object on the client side:

• Use the define plugin to set STORYBOOK_ENV_VARS

STORYBOOK_ENV_VARS: JSON.stringify(JSON.stringify(env))

• Create the process.env object on the client side

window.process = window.process || {}
window.process.env = JSON.parse(STORYBOOK_ENV_VARS)

Solution 2:

If we can control the order the define plugin works (add it multiple times perhaps?), we can replace env values (ex: process.env.ABC) first and then replace the env object (process.env). If we do this, we don't have to add additional init code to the client.

[arunoda]

I think Solution2 is kind a not possible, so I think we should go with solution 1.
BTW: We should add an issue on CRA on this as well.

[arunoda]

This is how they do it. It's pretty similar.