Deploying a Vite app on GitHub Pages using GitHub Actions with GitHub Secrets
Tags: vite, githubactions, github, react
Published: 2023-11-22 02:51:03

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vbtulhguqcnvhqtrhjo.png)

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rlm7zswgc1ihexpzpquk.png)

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zgredakrw1a0dr0riaj.png)

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2ghtkcj0k79uge24o7m.png)

- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/25mr8diouip7m29y2p0g.png)

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5fnbnv9gk92jsj7l50x.png)

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kitbinqysk3zerji0dis.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22q3nnwa2adeu4fih3ld.png)

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

![Image description 9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6kya21g76iqfcjsqnpo.png)

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

![Image description 10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jpzkmu0982hhywbu4bb7.png)

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

![Image description 11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98goz540b21u9agjgn39.png)

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

![Image description 12](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/smm0or2rdnm06smbtgm3.png)

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

![Image description 13](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p7vn28x0idkngh20act3.png)

- Your workflow was successfully created!

![Image description 14](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqnciiw5q6wxhgrqgfjq.png)

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxoyyjvr2mbady7uz3vj.png)

### 🎉 Congratulations! --
✉️ Feel free to contact me in case of questions!