skip to Main Content

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. Thank you for your time.

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:enter image description here

2

Answers


  1. Chosen as BEST ANSWER

    I got the program to work, below is my .yml file for reference:

    # 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: Build
            run: npm run build
            env:
              VITE_API_KEY: ${{ secrets.VITE_API_KEY }}
          - 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
    

  2. 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 }}
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search