Accesing github secrets on GitHub Actions for a React App

  docker, docker-compose, javascript, reactjs

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({
            REACT_APP_AXIOS_URL: JSON.stringify(process.env.REACT_APP_AXIOS_URL),
        })
    ],

};

In my image.jss of the react app

const API_URL = process.env.REACT_APP_AXIOS_URL
console.log(API_URL)

A small part of the Github actions

jobs:

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

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

Source: Docker Questions

LEAVE A COMMENT