Deploying a Vite app on GitHub Pages using GitHub Actions with GitHub Secrets

First of all --

I'll assume that you already have a Vite React App created in a GitHub repository. In this article, I will use my portfolio as an example.

Step 1 --

Set the correct base in vite.config.js file:

Example: In my vite.config.js, I added my GitHub repository name (that is, "portfolio") as the base.

Step 2 --

Create an .env file in your project root and add your secrets using the "VITE_" prefix:

Example: If you need a secret "OPEN_AI_KEY", you should add the secret to the .env file as "VITE_OPEN_AI_KEY".

Step 3 --

Add the secret to your code using "import.meta.env.":

Example: If I need to add my "VITE_OPEN_AI_KEY" to my code, I'll add "import.meta.env.VITE_OPEN_AI_KEY" as in the example below:

Step 4 --

Create a GitHub Actions Secret:

• Access your GitHub project repository;
• Click "Settings" >
• Select "Actions" on "Secrets and variables" dropdown >
• Click "New repository secret".

• Type the secret name >
• Type the secret value itself >
• Click "Add Secret".

In my case, the secret name is "VITE_OPEN_AI_KEY" and the value is "My OpenAI Key Value":

Step 5 --

Setup GitHub Pages:

• Access your GitHub project repository;
• Click "Settings" >
• Click "Pages" on menu >
• Select GitHub Actions on Build and Deployment Source.

Step 6 --

Create your deploy.yml file on GitHub:

⚠️ This file is important because it will trigger GitHub Actions to use GitHub Secrets, build, and deploy your project on GitHub Pages every time you commit a change to your repository.

• Access your GitHub project repository;
• Click "Pages" on menu >
• Click "create your own" link.

A page to create your own workflow will open. On this page...

• Name the new workflow as "deploy".
• Remove all generic workflow content;

Before proceeding, ensure your GitHub workflow is empty and named "deploy":

Open the "Deploying a Static Site" Vite Guide on https://vitejs.dev/guide/static-deploy and look for GitHub Pages session.

• Copy the workflow.

• Paste it on GitHub where we are creating our own workflow.

• Add all your secrets above "jobs" on the workflow, using the following template as a reference:

#Allow repo secrets
env:
  VITE_SECRET_1: ${{ secrets.VITE_SECRET_1 }}
  VITE_SECRET_3: ${{ secrets.VITE_SECRET_3 }}
  VITE_SECRET_3: ${{ secrets.VITE_SECRET_3 }}

• In my portfolio, I only have the "VITE_OPEN_AI_API_KEY" secret, so I added the following code to my workflow:

#Allow repo secrets
env:
  VITE_OPEN_AI_API_KEY: ${{ secrets.VITE_OPEN_AI_API_KEY }}

• The result is shown in the image below;
• Click on "Commit changes"

• If you wish, you can modify the "Commit message", otherwise, leave it as it is;
• Click "Commit changes".

• Your workflow was successfully created!

Step 7 --

Commit a change:

As soon as you commit a change, GitHub Actions will automatically identify, build, and deploy your project with your secrets in your GitHub Pages.

• You can verify all deployments on the "Actions" tab in your GitHub repository:

🎉 Congratulations! --

✉️ Feel free to contact me in case of questions!