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
I got the program to work, below is my .yml file for reference:
Vite needs to be built and deployed with
vite build
(or your package manager’s equivalent). Duringvite 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.