Accesing github secrets on GitHub Actions for a React App

Question

I have a react app that is running in a docker container. I would like to access the value of a variable on the .env located in the droplet where the react app docker container is deployed to.

Here is my webpack.config.js of the react app

const Dotenv = require('dotenv-webpack');
module.exports = {

    plugins: [
        new Dotenv()
    ],

};

In my image.jss of the react app

const API_URL = process.env.REACT_APP_AXIOS_URL
console.log(API_URL)
# return nothing on the droplet.

A small part of the Github actions

jobs:

  build:
    name: Build 
    runs-on: ubuntu
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Add environment variables to .env
        run: |
          echo REACT_APP_AXIOS_URL=${{ secrets.REACT_APP_AXIOS_URL}} >> .env

Within the docker container, I am able to

echo $REACT_APP_AXIOS_URL # returns variable

In the .env on the droplet , a file does exist there called .env with the REACT_APP_AXIOS_URL .

The react is running in a docker container app. How can I make the react app access the value of REACT_APP_AXIOS_URL in the .env ?.

Locally, I am able to access the .env and get the value of REACT_APP_AXIOS_URL

Answer 1

You could try to create .env file with your vars before build:

- name: Create env file
        run: |
          touch .env
          echo REACT_APP_AXIOS_URL=${{ secrets.REACT_APP_AXIOS_URL}} >> .env
          cat .env

Alternatively using Create Envfile Github Action