Add API keys as Environment Variables when Build and Deploy

[Derick317]

I have a React front-end project. For visiting back-end server, I have an API key. When developing, I set an environment variable named REACT_APP_API_KEY, and refer it in my javascript code as process.env.REACT_APP_API_KEY. It works fine locally (when I run npm start).

But now I would like to deploy it on GitHub Pages. I have added the key as a secret in my GitHub repository (just like access token). But how can I set the enviroment variable?

[JamesIves]

There's a whole section on action variables here: https://docs.github.com/en/actions/learn-github-actions/variables

[E-forgotyou]

We ran into this exact issue deploying a Vite + React app that uses a Mapbox GL JS access token (pk.* public token).

Here's what worked for us:

1. Hardcode a sensible default in source code

In our app component we fall back to a baked-in default so it works out of the box locally and in CI without any extra setup:

const DEFAULT_MAPBOX_TOKEN = 'pk.eyJ1Ijoic3...';
const MAPBOX_TOKEN =
  (import.meta.env.VITE_MAPBOX_TOKEN as string | undefined) ||
  DEFAULT_MAPBOX_TOKEN;

2. Create a .env.example

# Mapbox public access token (pk.* tokens are client-side safe)
# Copy this file to .env to use locally: cp .env.example .env
# Or set VITE_MAPBOX_TOKEN as a GitHub repository variable for CI/CD builds.
VITE_MAPBOX_TOKEN=pk.eyJ1Ijoic3...

3. Pass the variable in GitHub Actions

In the deploy workflow, use a repository variable (Settings → Secrets and variables → Actions → Variables tab → VITE_MAPBOX_TOKEN) and reference it in the build step:

- run: yarn build
  env:
    VITE_MAPBOX_TOKEN: ${{ vars.VITE_MAPBOX_TOKEN }}

Use vars.* (not secrets.*) for public client-side tokens — secrets are masked in logs, which is unnecessary for pk.* Mapbox tokens that ship in the browser bundle anyway.

Full GitHub docs on action variables: https://docs.github.com/en/actions/learn-github-actions/variables

Hope this helps anyone else using Mapbox (or similar client-side API keys) with GitHub Pages!