How to use environment variables in Github Page?
Solution 1
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
.
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.
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 :)
Solution 2
name: Deploy to GitHub Pages
on:
push:
branches:
- master
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v1
- name: Build
run: |
npm install
npm run-script build
env:
REACT_APP_INSTAGRAM_ACCESS_TOKEN: ${{ secrets.REACT_APP_INSTAGRAM_ACCESS_TOKEN }}
REACT_APP_SMTP_SECURE_TOKEN: ${{ secrets.REACT_APP_SMTP_SECURE_TOKEN }}
- name: Deploy
uses: JamesIves/github-pages-deploy-action@releases/v3
with:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN_KEY }}
BRANCH: gh-pages
FOLDER: dist
You can use like this to add your environment variables from GitHub secrets. This solved my problem.
Solution 3
If they are truly secret, and so should not be in a repository, then there isn't a way to manage that with github-pages.
If you are okay with having them in a repository, then put them in .env and access via process.env
Solution 4
I support this answer (above)
But I advice to update the gh-pages YML to version 4
Also take a look at environment variables solution because i spent hours to find out the solution
- name: Deploy
uses: JamesIves/[email protected]
with:
branch: gh-pages
folder: front-app/dist
Solution 5
To use environment variables, the general approach which is followed is to:
- Not expose them to the public
- Keep it local at the time of development/production and ignore in
.gitignore
file. - Make the static build out of your application Then deploy it to either github pages or any other static website host.
While working with create-react-app
you have their benefits, you can create .env
in your root folder.
The structure for the .env
file should follow below key-value structure:-
REACT_APP_SECRET_CODE1=dev123
REACT_APP_SECRET_CODE2=prod456
Keys in the file should be prefixed with REACT_APP
and you can use these keys to access the variable in your application. For eg. process.env.REACT_APP_SECRET_CODE
, this will have the value dev123
Related videos on Youtube
Ebru Gulec
Updated on September 14, 2022Comments
-
Ebru Gulec over 1 year
I want to deploy my
create-react-app
project to GitHub Pages. But I have a few secret keys. How can I manage these keys inside my React app? -
ValRob over 4 yearshello, I Did all the steps but I cant access into the process.env.anyvariable.
-
Anton Cheng about 4 yearsJust edited: You should put the environment variables under the Build step under
env:
. -
Anton Cheng about 4 yearsThis is the correct script: Put the variables under Build step with
run-script build
-
Sanchit Bhatnagar about 4 yearsI have made a dev file and prod file(for keys), but during this CI testing, the build fails as it couldn't find dev file, what's the workaround for that?
-
Romina about 4 yearsHello, I did all the steps above but I still get undefined for the variable created with secrets (ie: REACT_APP_APIKey). But if I assign manually a value to this variable (REACT_APP_APIKey) it appears to work, any clue on what might be it?
-
Anton Cheng about 4 years@Romina can you share your deployment script and tell me what "Manually assign variable to REACT_APP_APIKey" refers to?
-
Romina about 4 yearsHello, I tried back this morning by removing the secrets and setting them up again and it works now! By manually assign I meant in my action I had something like this: ``` env: REACT_APP_APIKey: 2 #This was displaying the value correctly REACT_APP_APISecret: ${{ secrets.REACT_APP_APISecret }} #this one was not ``` It's working now with the secrets so thank you for your reply!
-
Jasmeet Singh almost 4 yearsSuggesting a different platform from what the original post asks does not help at all.
-
ploofah almost 4 yearswill these keys be visible to users on the browser using network tab? or does github encrypt them @AntonCheng
-
Anton Cheng almost 4 years@ploofah As for the network tab, I don't think you can hide any keys from there: (ref). And github do encrypt those keys until you use them in the pipeline: help.github.com/en/actions/configuring-and-managing-workflows/….
-
ploofah almost 4 yearsSo is there any other way to ensure that keys dont get exposed in network tab
-
Yoho almost 4 years@AntonCheng thx. After all the failures I was finally able to deploy my gh-page branch with the env variable from secrets. Yet github surprisingly revoked my "PERSONA_ACCESS_TOKEN" again. When I look at the bad commit, it shows that my token was shown in plain text again. I am so confused why does it happened. My naive guess: we got the env during the build step, then deploy it, doest that mean we are still putting the plain secret in build folder then push it out?
-
ckot about 3 yearsI don't know why this got a downvote, as everything it says is correct, as far as local development goes, and it rather depend how you you deploy. for example if you're deploying a build directory (these values would be baked in, which perhaps is undesirable) or if you're using github actions or something, where you need to separately setup the env vars there as the build happens remotely.
-
Alexey Nikonov about 3 yearsyou may remove your answer and get your positive status back
-
Alexey Nikonov about 3 yearsbut nevertheless my and that answers werent helpful and I still looking for a way to pass environment variables to react-app. I've already tried dotenv lib but it also did not work
-
wasabigeek about 3 yearsIf your repo has environments, you may need to specify an
environment
in the job as well docs.github.com/en/actions/reference/…