Runtime environment variables in React + nginx

Injecting Variables Through (b)ash https://github.com/facebook/create-react-app/issues/2353 https://www.freecodecamp.org/news/how-to-implement-runtime-environment-variables-with-create-react-app-docker-and-nginx-7f9d42a91d70/ https://medium.com/free-code-camp/how-to-implement-runtime-environment-variables-with-create-react-app-docker-and-nginx-7f9d42a91d70 https://www.bencode.net/posts/react-build/ <– check https://sinclert.github.io/react-env-vars/ https://gist.github.com/lezhkin11/d6b0a14127b4920feaece278e5323ee1 Using a Multi-stage Dockerfile Another option is to use a multi-stage Docker file, where the first stage is still using nodeJS, like this. This way node can still parse the environment variables as you would during local development, and the final deployed image is. However, in large organizations deploying such a multistage container in a production environment may irk some SecOps people....

May 6, 2022 · 82 words · Peter Dieleman

Empty Hash MSAL React

BrowserAuthError: hash_empty_error: Hash value cannot be processed because it is empty. Please verify that your redirectUri is not clearing the hash. Given Url: ... https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/3638 https://stackoverflow.com/questions/67788651/microsoft-authentication-react-hash-empty-error-when-using-loginpopup https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/4573 We’ve resolved this in our application. For us, we had our redirect URL as the home page of our application. This caused an issue where our router (in Next.js) took over the routing in the popup, stripping the hash and redirecting it to the login page - before the window that launched the popup had time to extract it....

March 21, 2022 · 118 words · Peter Dieleman