Question 402458 in Azure Question posted in
The official documentation to get you started can be found here.

Eliminating hard-coded value from react website hosted on Azure

I have inherited some code for a website that is hosted on Azure. The code is written in TypeScript using the React framework. It is deployed to a Docker registry on Azure and a Web App then loads the Docker image and runs it.

The code uses msal-react for authentication. One of the values needed for Msal is the redirect URL (i.e., the base URL of the website), which is hardcoded as a const in one of the files. Whenever I want to modify the code and test it locally, I have to edit that file and change the value of redirectUri from its original value to http://localhost and then I have remember to undo that change before merging my code into the git branch and running the deployment pipeline.

I wonder if there is a way for me to avoid this. What I thought of was to store the base URL as an environment variable on the Web App itself (by editing its settings on Azure portal), and adding a logic in my code that checks if the environment variable is available, using that as the value for redirectUri and using http://localhost otherwise.

How can read the environment variable in the node.js web app code?

Tags:

2

Answers


  1. 0

    You can achieve this by adding a new application setting (example name) REACT_APP_REDIRECT_URI and set its value to the production redirect URL.

    Then, modify your react code to check for the variable and use it if available.

    // Initialize MSAL configuration to use environment variable.
// Included "|| 'http://localhost'" as fallback, for good coding practise.
const msalConfig = {
    auth: {
        clientId: 'your-client-id',
        authority: 'your-authority-url',
        redirectUri: process.env.REACT_APP_REDIRECT_URI || 'http://localhost'; 
    }
};

    Of course, ensure that you have a .env file in your root dir, with the variable:

    REACT_APP_REDIRECT_URI=http://localhost

    When you then build & deploy your project, it’ll use the environment variable defined in your Azure Web App settings, and in local development, it’ll use the .env file’s value.

    UPDATE:

    Typically, environment variables defined in Azure web app should be passed to the Docker container already. So, I would first of all check that everywhere, the env variable has the same and correct name VITE_REACT_APP_REDIRECT_URI.

    Check and ensure your Docker container has access to env variables. E.g., with Azure Cloud Shell:

    docker exec -it your-container-id /bin/bash
echo $VITE_REACT_APP_REDIRECT_URI

    If needed, you can modify the DockerFile, adding:

    ENV VITE_REACT_APP_REDIRECT_URI=http://your-production-url

    Note that the primary configuration should be managed through Azure Web App settings, and this should just be for testing.

    Login or Signup to reply.
  2. 0

    The way I solve this is roughly as follows:

    • When the docker container starts, I first run a small shell script that generates a configuration .json file (or .js file).
    • Load that file first (with fetch()) when your application loads.

    The problem you have is that your React application builds when the docker container is created. So any dynamic (.env) values get baked into this build, and you don’t want that. There are no environment variables in a browser.

    So running a small script that builds a small config file cirmumvents this elegantly. If you really hate making an extra request, you could also embed the configuration in your index.html file somewhere.

    If your docker container isn’t just nginx with static files, but something like Node there’s other options.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search