Trying to add .env to a forge Custom UI app

Hello im trying to add environment variables to my forge custom UI app. i have tried "forge variables set “name” “value” and then tried to console.log(process.env.TEST) in my src/index.js and also in /static/hello-world/src/App.js and it just says undefined

i have also tried importing dotenv with npm install dotenv and then “require(“dotenv”).config();” in the top of my code in /static/hello-world/src/App.js the .env have i placed in /static/hello-world/src/
and it just says undefined

i

Hi @OliverSylvesterKrsne ,

If you’re trying to access the environment variable when tunnelling, make sure you prefix the variable with FORGE_USER_VAR_, but otherwise you’ll need to set the environment variable forge variables set key value and then re-deploy in order for it to take affect. Note that variables set this way are only accessible directly from your Forge backend. If you want to access the variable from your custom UI, then you’ll need to call your backend to get the variable.

Regards,
Dugald

thank you so much i got it to work with forge variables set key command and then using it in the “resolver” part of custom ui with process.env.name :open_mouth:

i couldn’t get et to work by making a .env file but the forge variables works so its fine :smiley:

2 Likes

This is solution worked for me. I basically created the following in index.js:

resolver.define('getEnv', (req) => {
    return process.env
});

and use the invoke in my react app.js:

const env = await invoke("getEnv")
2 Likes

Thanks for this, it is a nice solution.

However, I sill have a question about encypted variables. Using your solution, env variables are decrypted and visible in the browser, how to handle this issue?