Cannot access environment variables passing it from GH-pages to ReactApp

I’m trying to use environment variables in ReactApp deploying at Github-pages.

The variable is added through process.env and starts with REACT_APP as docs prescribe

export default class WeatherService {
  constructor() {
    this.API_WEATHER_URL = process.env.REACT_APP_DEV_SERVER_URL + 'api/weather';
  }

and .env created with GitHub Actions yml (this is the last update)

jobs:
  front-build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v1

      - name: Store variables
        run: |
          cd front-app
          touch .env
          echo "REACT_APP_DEV_SERVER_URL=${{ secrets.DEV_SERVER_URL }}" >> .env

      - name: Build
        run: |
          cd front-app
          npm install
          npm run-script build
      - name: Deploy
          ...

but the app gets wrong values from GitHub Secrets.

see the react-app at GH-pages receives a wrong object, not what i’ve passed (“username.cloudTech com/api”):

this.API_BLOB_URL = Object({
                NODE_ENV: "production",
                PUBLIC_URL: "/azure-flask-react",
                WDS_SOCKET_HOST: void 0,
                WDS_SOCKET_PATH: void 0,
                WDS_SOCKET_PORT: void 0,
                FAST_REFRESH: !0
            }).REACT_APP_DEV_SERVER_URL + "api/blob/"

At the same time when I build locally with npm run build. React successfully replaces the env. variables

As used to the purpose is to use different environment settings as api dev server in

I’ve already tried to use env-cmd and dotenv lib but it neither worked


NOTE:

If I pass REACT_APP_ENV=‘username.cloudTech.com/api npm script - it passes this variable successfully:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build:staging": "REACT_APP_FRONT_APP_URL=nikonov91-dev.github.io/azure-flask-react/ npm run build"
    ...
}

And then voila.

piV7X


BUT I STILL LOOKING FOR solution how to pass variable from GH-Secrets

:wave: Hey @nikonov91-dev,

In a workflow, steps don’t share an environment and are effectively separate processes.

To set an environment variable in a workflow step that can be used in another step, see
https://docs.github.com/en/actions/reference/workflow-commands-for-github-actions#setting-an-environment-variable

So your example would become:

      - name: Store variables
        run: |
          echo "REACT_APP_DEV_SERVER_URL=${{ secrets.DEV_SERVER_URL }}" >> $GITHUB_ENV

Another later step could reference that variable using the env syntax:

      - name: Store variables
        run: |
          echo "${{ env.REACT_APP_DEV_SERVER_URL }}"

Or as a process environment variable with:

      - name: Store variables
        run: |
          echo $REACT_APP_DEV_SERVER_URL
       env:
         REACT_APP_DEV_SERVER_URL: ${{ env.REACT_APP_DEV_SERVER_URL }}

https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions#jobsjob_idstepsenv

Since your URL is already available as a secret in your workflow, we can skip setting a workflow environment variable and just do:

      - name: Build
        run: |
          cd front-app
          npm install
          npm run-script build
        env:
          REACT_APP_DEV_SERVER_URL: ${{ secrets.DEV_SERVER_URL }}

We could also remove the cd front-app line and use the working-directory keyword

      - name: Build
        run: |
          npm install
          npm run-script build
        env:
          REACT_APP_DEV_SERVER_URL: ${{ secrets.DEV_SERVER_URL }}
        working-directory: ./front-app