I'm in the process of setting up a new environment variable for the frontend in Metabase. During development, everything works fine, and the backend part is functioning perfectly. However, when I do a build and try to use this variable on the frontend, I run into problems. Despite the backend configuration being correct, the variable doesn't seem to behave as expected after the build. Has anyone faced a similar issue or have any advice on how to resolve this?
What frontend environment variable are you referring to? ... Like what are you doing exctly?
I'm trying to use an external service from the front to get an external information. I need to pass the URL in order to do that I've added a new env variable REACT_APP_SERVICE
I've created it on the docker image declaring and setting that variable and aslo on the webpack config. But didn't work
new webpack.EnvironmentPlugin({
...
REACT_APP_SERVICE:
process.env.REACT_APP_SERVICE
...
How is this exactly related with metabase?
How are you passing this env variable during the build?
On the dockerfile
ARG REACT_APP_SERVICE
ENV REACT_APP_SERVICE="testing"
Why don't you define that in the docker where the application is running and not the docker where metabase is running?
I did some more testing.
The metabase frontend is not picking up environment variables only when compiled
When I run metabase using clojure -M:run and yarn build-hot it does pick up my variables.
IE: if I do export ENV REACT_APP_SERVICE="testing" and then run it, I can see that variable in my code
But once I build the Metabase Uberjar, re-export the variables and run them, those values become undefined
This only happens for the new variables I add, the rest of the env variables in the documentation I can set and correctly see in the application
My question is:
How are environment variables configured so they can be picked up by the front end when metabase is compiled? I need to know how to extend metabase with a new feature I'm working on.
My application is Metabase. I'm making changes to metabase's front end code and adding my functionality there. Metabase is the application not picking up the new environment variables I'm trying to configure
In that case you should be checking out threads for help:
If i am not mistaken env variables should be passed in the backend so the code behaves in some way. You should check the metabase repo around pull requests that do similar things like this one and see what the developer is doing:
Thanks for the answer!
I've already looked through the codebase and how variables are currently set up, and I can't find anything, your PR is a good example of the challenge I'm facing Here is the only mention to an env variable, but it's just a comment. I don't see anywhere those variables are being configured.
I tried to do more testing and look in the whole codebase for a fronted variable to show the problem
IE: MB_EDITION
I looked where the variable is used in the front webpack.config.js (it's also used in config.js and e2e-enterprise-helpers.js but only to read it) and in the backend build.clj
And checked that I could see that variable in the front and the back by setting a couple of logs
(defn- print-custom-env-vars []
(println "\n\n\n\n\n\n\n\n\nTESTENV:" (env/env :testenv)))
And webpack
console.log("\n\n\nENV VARIABLES", process.env.TESTENV);
console.log("\n\n\nMB_EDITION ENV VARIABLES", process.env.MB_EDITION);
And tested both cases by running metabase with
clojure -M:run with yarn build-hot
And also by compiling and running the uber Jar ./bin/build.sh
The fist case (no Uberjar) worked! I could see the logs! (I set MB_EDITION to ee to check that I was setting the variables correctly and it wasn't just the default value)
[js] ENV VARIABLES THISISME
[js] MB_EDITION ENV VARIABLES ee
Back:
TESTENV: THISISME
But for some reason, when I check for the same variables after a build
I can see both env variables being set in the back, but the front only MB_EDITION shows set
TESTENV: THISISME
[js] ENV VARIABLES undefined
[js] MB_EDITION ENV VARIABLES ee
I saw your first link, a friend created that thread, should I move the conversation there?
We found the solution!
The back was setting the env variables on the front, we merged mine in the build and it worked!
For each yarn command (which runs the frontend build steps), we merged the custom-env map with the existing environment variables required by the build process. The merge makes it so both default environment variables and custom variables are passed to the frontend.
The merge function combines the custom-env map with other environment variables (PATH, HOME, WEBPACK_BUNDLE, and MB_EDITION) and sets them in the :env map for the yarn command.
Here is the example for "yarn" "build-release" but we also did it for "yarn" and "yarn" "build-release:static-viz" (Likely )
custom-env {"TESTENV" (env/env :defaultValue1)
"OTHERENV" (env/env :defaultValue2)}
(u/sh {:dir u/project-root-directory
:env (merge custom-env ;; Merge custom environment variables
{"PATH" (env/env :path)
"HOME" (env/env :user-home)
"WEBPACK_BUNDLE" "production"
"MB_EDITION" mb-edition})}
"yarn" "build-release")
I believe this is the best way to do it since it will collide the least with any new env variables set by the official releases, but open to suggestions!
1 Like