DEV Community

Cover image for Deploying a Vite app on GitHub Pages using GitHub Actions with GitHub Secrets
Douglas Toledo
Douglas Toledo

Posted on

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.

Image description 1

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".

Image description 2

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:

Image description 3

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".

Image description 4

  • 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":

Image description 5

Step 5 --

Setup GitHub Pages:

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

Image description 6

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.

Image description 7

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

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

Image description 8

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

Image description 9

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

  • Copy the workflow.

Image description 10

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

Image description 11

  • 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 }}
Enter fullscreen mode Exit fullscreen mode
  • 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 }}

Enter fullscreen mode Exit fullscreen mode
  • The result is shown in the image below;
  • Click on "Commit changes"

Image description 12

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

Image description 13

  • Your workflow was successfully created!

Image description 14

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:

Image description 15

πŸŽ‰ Congratulations! --

βœ‰οΈ Feel free to contact me in case of questions!

Top comments (1)

Collapse
 
hemantgovekar profile image
Hemant Govekar

Thanks for this article. Will definitely tryπŸ‘