How to use environment variables in Github Page?

by

Edited June 2020

Reference @alicia-jasmine

“React is purely a front-end framework. Everything accessible to React (even if you embed it through a build step) will later be visible in the front-end code and someone relatively basic to find. To really keep them secret you MUST have something server side!”

The following answer will actually expose the key in the gh-page branch on GitHub, also the keys will be accessible through the network tab in the developer console.

Original Answer

I’m also using create-react-app, and I found that this can be done by customizing your CI script with GitHub secret settings. (After the setting, you can use environment variables like this in your project.)

const apiKey = process.env.REACT_APP_APIKey
const apiSecret = process.env.REACT_APP_APISecret

To add a secret to your repository, go to your repository’s Setting > Secrets, click on Add a new secret. In the screenshot below, I added 2 env variables: REACT_APP_APIKey and REACT_APP_APISecret.

Notice: All the environment variable you want to access with create-react-app need to be prefixed with REACT_APP.

enter image description here

After you have your secret ready, you can take a look at this post, it’s about how to add your own Action upon push.

To setup your action script, go to your repository > Actions, an click on Setup workflow your self, and paste in the script provided in the post or take a look at mine script below.

enter image description here

I use the following script to access the 2 environment variables I set on GitHub secret. (You can access the secret you set in the script by ${{ secrets.REACT_APP_APIKey }}.)

name: CI

on:
  push:
    branches:
      - master

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    
    - name: Checkout
      uses: actions/checkout@v1

    - name: Build
      run: |
        npm install
        npm run-script build
      env:
        REACT_APP_APIKey: ${{ secrets.REACT_APP_APIKey }}
        REACT_APP_APISecret: ${{ secrets.REACT_APP_APISecret }}

    - name: Deploy
      uses: JamesIves/github-pages-deploy-action@releases/v3
      with:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        BRANCH: gh-pages
        FOLDER: build

After you setup the script, the action will be triggered by any push to master
branch. After you push any commits, you can take a look at the deployment status at actions status.

You can see how hard it is for me to figure it out… so many fail attempts lol. Anyway, hope this will help 🙂

enter image description here

More Related Contents:

  1. How do I hide API key in create-react-app?
  2. How do I hide an API key in Create React App?
  3. How to fix missing dependency warning when using useEffect React Hook
  4. How to specify a port to run a create-react-app based project?
  5. Template not provided using create-react-app
  6. Error: ‘node-sass’ version 5.0.0 is incompatible with ^4.0.0
  7. Line 0: Parsing error: Cannot read property ‘map’ of undefined
  8. Use custom build output folder when using create-react-app
  9. deploying create-react-app to heroku with express backend returns invalid host header in browser
  10. Error while creating new React app (“You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0)”)
  11. React Router not working with Github Pages
  12. Blank page after running build on create-react-app
  13. Unable to create new react app with npx create-react-app
  14. Using `”homepage”` in package.json, without messing up paths for localhost
  15. How should I configure create-react-app to serve app from subdirectory?
  16. ‘TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined’
  17. How to avoid using relative path imports (/../../../redux/action/action1) in create-react-app
  18. Relative path in index.html after build
  19. react long press event
  20. Create-React-App Proxy in Production Build
  21. combine react build output into single js file
  22. What is public/manifest.json file in create-react-app?
  23. How to set build .env variables when running create-react-app build script?
  24. create-react-app: how to use https instead of http?
  25. Disable ESLint that create-react-app provides
  26. Create-React-App build – “Uncaught SyntaxError: Unexpected token
  27. Cache busting with CRA React
  28. create-react-app is not working since version 4.0.1
  29. create react app not picking up .env files?
  30. ‘React’ was used before it was defined

Leave a Comment