https://github.com/erickks/vite-deploy

Guide for vite react app deploy
https://github.com/erickks/vite-deploy

deploy react vite

Last synced: 7 days ago
JSON representation

Guide for vite react app deploy

• Host: GitHub
• URL: https://github.com/erickks/vite-deploy
• Owner: ErickKS
• Created: 2023-01-27T17:58:21.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-07-17T22:17:24.000Z (5 months ago)
• Last Synced: 2024-12-01T16:03:55.358Z (21 days ago)
• Topics: deploy, react, vite
• Language: CSS
• Homepage:
• Size: 77.1 KB
• Stars: 337
• Watchers: 2
• Forks: 61
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


    
⚜️ V I T E   D E P L O Y ⚜️





    
Follow the steps below to deploy your React application on GitHub.

    

        

    






#### 01. Create a vite react app

```npm

npm create vite@latest

```

#### 02. Create a new repository on GitHub and initialize GIT

```git

git init 

git add . 

git commit -m "add: initial files" 

git branch -M main 

git remote add origin https://github.com/[USER]/[REPO_NAME] 

git push -u origin main

```

#### 03. Setup base in *vite.config*

```js

base: "/[REPO_NAME]/"

```

#### 04. Create ./github/workflows/deploy.yml and add the code bellow

> [!WARNING]

> It is crucial that the `.yml` file has the exact code below. Any typing or spacing errors may cause deployment issues.

```yml

name: Deploy

on:

  push:

    branches:

      - main

jobs:

  build:

    name: Build

    runs-on: ubuntu-latest

    steps:

      - name: Checkout repo

        uses: actions/checkout@v3

      - name: Setup Node

        uses: actions/setup-node@v3

      - name: Install dependencies

        uses: bahmutov/npm-install@v1

      - name: Build project

        run: npm run build

      - name: Upload production-ready build files

        uses: actions/upload-artifact@v3

        with:

          name: production-files

          path: ./dist

  deploy:

    name: Deploy

    needs: build

    runs-on: ubuntu-latest

    if: github.ref == 'refs/heads/main'

    steps:

      - name: Download artifact

        uses: actions/download-artifact@v3

        with:

          name: production-files

          path: ./dist

      - name: Deploy to GitHub Pages

        uses: peaceiris/actions-gh-pages@v3

        with:

          github_token: ${{ secrets.GITHUB_TOKEN }}

          publish_dir: ./dist

```

#### 05. Push to GitHub

```git

git add . 

git commit -m "add: deploy workflow" 

git push

```

#### 06. Active workflow (GitHub)

```

Config > Actions > General > Workflow permissions > Read and Write permissions 

```

```

Actions > failed deploy > re-run-job failed jobs 

```

```

Pages > gh-pages > save

```

## 🛠 Helper

#### > For code changes

Whenever you push to GitHub, it will deploy automatically.

```git

git add . 

git commit -m "fix: some bug" 

git push

```

#### > Fixing the 404 page error on routes.

Watch my video on YouTube or check my repository.



    





    






#### > Do you want to automate the project setup process ( `.yml` and `vite.config` )?

To prevent possible errors in the deploy process, check out this pull request: