0

I'm new to react development. I have created .env file(inside root) and got some url for my application. after publish my application to azure my application not getting url values. I have stored it new .env file inside my public folder also. But its not getting values.

.env file(inside root)

REACT_APP_SERVICE_BASE_URL = https://localhost:44385/
REACT_APP_CONFIG_BASE_URL = https://localhost:44354/

js Code

require('dotenv').config()
let SERVICE_BASE_URL = process.env.PUBLIC_URL.REACT_APP_SERVICE_BASE_URL;

Can anyone have an idea to fix my issue. localhost working fine. after publish and change url is not working.

my customers have different Urls. so they need to change with their variables. So I thought if i add .env file inside public folder they can change their Url and use it

Tried this way also. But this also not calling public folder .env Its also taking root folder .env

require('dotenv').config(process.env.PUBLIC_URL+ '/.env')
AlexDemo
  • 141
  • 3
  • 14
  • I think this answer can help you [link](https://stackoverflow.com/questions/64383981) – MaK Apr 12 '22 at 07:25
  • 1
    How are you hosting it in Azure? Container? App Service? Static? Create-React-App creates a **Static** app, so nothing can be read from environment variables dynamically. Instead values from your .env file are copied into the static website during **build**, so any change afterwards won't change your app. – c0lby Apr 12 '22 at 13:23
  • Its a app service – AlexDemo Apr 12 '22 at 14:42

3 Answers3

2

As mentioned, create-react-app creates a static app, so nothing can be read from environment variables dynamically after build. Instead values from your .env file are copied into the static website during build. Any change afterwards won't change your app.

If you're using Azure App Service: Rather than building the app locally, then publishing the pre-built app bundle, you can instead publish the source of the app and have Azure App Service build the app. This way the customer-specific environment variables (App Settings) are present during build and will be set appropriately in your app.

There's two approaches:

  1. Use a custom build script that you publish with your source code to Azure App Service. The documentation on this isn't great, but it works if you prefer to deploy from git or from a zip file. Kudu is the engine behind both of these deployment scenarios, see the wiki for details. See this example deploy script.

  2. (recommended) Deploy your app using containers, and use an entry point script to replace the environment variables' placeholders with the customer-specific App Service's environment variable values.

Example of #2 (recommended):

Some code examples below. You can also reference this project as a working example of using this approach.

React App code to get the environment variable:

export const getGitHubToken = () => {
    if (process.env.NODE_ENV !== 'production') {
        if (!process.env.REACT_APP_SERVICE_BASE_URL) throw new Error('Must set env variable $REACT_APP_SERVICE_BASE_URL');
        return process.env.REACT_APP_SERVICE_BASE_URL;
    }
    return '__REACT_APP_SERVICE_BASE_URL__';
};

Entrypoint script run by container:

#!/usr/bin/env bash

# Get environment variables to show up in SSH session
eval $(printenv | sed -n "s/^\([^=]\+\)=\(.*\)$/export \1=\2/p" | sed 's/"/\\\"/g' | sed '/=/s//="/' | sed 's/$/"/' >> /etc/profile)

pushd /home/site/wwwroot/static/js > /dev/null

pattern="main.*.js"

files=( $(compgen -W "$pattern") )
mainFile=$files

sed -i 's|__REACT_APP_SERVICE_BASE_URL__|'"$REACT_APP_SERVICE_BASE_URL"'|g' "$mainFile"
sed -i 's|__REACT_APP_CONFIG_BASE_URL__|'"$REACT_APP_CONFIG_BASE_URL"'|g' "$mainFile"

popd > /dev/null

Dockerfile:

FROM nginx

RUN mkdir -p /home/LogFiles /opt/startup /home/site/wwwroot \
    && echo "root:Docker!" | chpasswd \
    && echo "cd /home" >> /etc/bash.bashrc \
    && apt-get update \
    && apt-get install --yes --no-install-recommends \
    openssh-server \
    openrc \
    yarn \
    net-tools \
    dnsutils

# init_container.sh is in react app's deploy/startup folder
COPY deploy/startup /opt/startup
COPY build /home/site/wwwroot

RUN chmod -R +x /opt/startup

ENV PORT 8080
ENV SSH_PORT 2222
EXPOSE 2222 8080

ENV WEBSITE_ROLE_INSTANCE_ID localRoleInstance
ENV WEBSITE_INSTANCE_ID localInstance
ENV PATH ${PATH}:/home/site/wwwroot

WORKDIR /home/site/wwwroot

ENTRYPOINT ["/opt/startup/init_container.sh"]
c0lby
  • 226
  • 2
  • 3
0
let SERVICE_BASE_URL = process.env.REACT_APP_SERVICE_BASE_URL
eamanola
  • 364
  • 1
  • 10
0

As mentioned here https://create-react-app.dev/docs/adding-custom-environment-variables/ .env file is for development purpose.

I suppose you use create-react-app to build your application. In that case the environment variable is injected in your appication at build time. When you develop locally .env variables are automatically injected to your code.

In the case of a deploy on azure you shoud define your environment variables in that environment and build you application there.

dna
  • 2,097
  • 1
  • 11
  • 35
  • my customers have different variables. so they need to change by customers with their variables. So I thought if i add .env file inside public folder they can change their Url and use it. – AlexDemo Apr 12 '22 at 08:00
  • I think this is not a good (and safe) approach. – dna Apr 12 '22 at 08:06