My React application can't retrieve an environment from app configuration

Question

Hi export,

I deployed a react application and using "process.env.REACT_APP_*" to retrieve an environment variable from app configuration.

My application landscape will have 2 environment includes dev, production.
My application on dev is working fine.I can retrieve the variable after check by using printenv

By the way, I also check the env variable on PRD using printenv and It's also show me the correct environment variable.
But after I debug in the application seem like process.env.REACT_APP_* will be undefined. I'm not sure what I missing here.

Here is my check list after reading the same possible issue on the commuinity.

1. The environment variable for REACT must start with REACT_APP_*
2. We can attach .env instead of application configuration. I won't prefer this way because it's contain the secret and I don't want to deploy or leave it in GitHub history / application directory.
3. using https://www.npmjs.com/package/@azure/app-configuration . It would be a better work around but must take a little bit much more effort but If my dev environment is work just using process.env so It should also work on other environment.

Answer 1

@Choktananan, Kritchapon ,

I had the same issue as you did, except in my case, only one of three of my REACT_APP_* variables was loading. I don't know why but as a workaround, I would avoid using REACT_APP_ prefixes, something more akin to the following:

    const app_settings_vals = {  
        "host": {  
            "port": port,  
            "baseUri": baseUri,  
            "domainName": domainName,  
            "ver":"0.0.1"  
        },  
        "credentials": {  
            "clientId": process.env.AD_CLIENT_ID || "REPLACE-WITH-YOUR-APP-CLIENT-ID",  
            "tenantId": process.env.AD_TENANT_ID || "REPLACE-WITH-YOUR-APP-TENANT-ID",  
            "clientSecret": process.env.AD_CLIENT_ID_SECRET || "REPLACE-WITH-YOUR-APP-CLIENT-ID-SECRET"  
        },  
        "settings": {  
            "homePageRoute": "/home",  
            "redirectUri": `${baseUri}/redirect`,  
            "postLogoutRedirectUri": `${baseUri}/`  
        },  
        "resources": {  
            "graphAPI": {  
                "callingPageRoute": "/profile",  
                "endpoint": "https://graph.microsoft.com/v1.0/me",  
                "scopes": ["user.read"]  
            },  
            "armAPI": {  
                "callingPageRoute": "/tenant",  
                "endpoint": "https://management.azure.com/tenants?api-version=2020-01-01",  
                "scopes": ["https://management.azure.com/user_impersonation"]  
            }  
        }  
  
    }  
    console.log(JSON.stringify(app_settings_vals));  
    return app_settings_vals;  

I found this sample at https://github.com/Azure-Samples/js-e2e-web-app-server-auth/blob/main/appSettings.js.