.env variables not being accessed in deployment in GitHub pages (Vite + react app)

Question

Repo:https://github.com/SyntaxWarrior30/Java-Docs-Generator

I deployed the site as a gh-pages of the main branch using the dist folder.

The GitHub pages site doesn’t work since the API key, stored in the .env file, which was ignored with .gitignore, is not being accessed. I created a secret variable in my GitHub pages environment yet it is still not working. How do I add .env variables to my GitHub pages so my fetch function works properly.

What my .env.production file looks like:

VITE_API_KEY={My API Key}

I tried adding a new repository secret by navigating to Settings > Secrets > New repository secret. Naming the secret the same as the variable name I defined in .env, without the VITE_ prefix. However, this did not fix the problem.

I also tried the solution where I include the VITE_ prefix for the Secret variable name in Github.

Here is the static.yml that i used to deploy the project, if needed:

    # Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ['main']

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow one concurrent deployment
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
      - name: Install dependencies
        run: npm install
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          # Upload dist repository
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

Evidence of error:

Answer 1

Vite needs to be built and deployed with vite build (or your package manager's equivalent). During vite build, the values are injected into the new code. They'd have to be since this is client code run on the browser. They can come from either .env, or a special .env.production, or environment variables. See .env files in the Vite docs and Deploying For Production.

Make sure this is done before deploying to Github.

---

If you want to build and deploy with Github actions, see vite-deploy-demo and the Vite docs for Github Pages.

Your VITE values must be available as environment variables during the vite build step.

1. Add your production VITE values as Github Secrets.
2. Make them available to the build step.

      - name: Build project
        run: vite build
        env:
          VITE_API_KEY: ${{ secrets.VITE_API_KEY }}