https://github.com/muhdhanish/git_actions_reactjs

This repository is a hands-on guide for learning Continuous Integration and Continuous Deployment (CI/CD) practices with a React app developed using Vite With a focus on GitHub Pages.
https://github.com/muhdhanish/git_actions_reactjs

cicd-pipeline github-actions github-pages reactjs typescript vitejs

Last synced: about 2 months ago
JSON representation

This repository is a hands-on guide for learning Continuous Integration and Continuous Deployment (CI/CD) practices with a React app developed using Vite With a focus on GitHub Pages.

• Host: GitHub
• URL: https://github.com/muhdhanish/git_actions_reactjs
• Owner: MuhdHanish
• Created: 2024-01-05T14:34:35.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-05T16:20:12.000Z (about 1 year ago)
• Last Synced: 2024-04-14T03:13:06.505Z (9 months ago)
• Topics: cicd-pipeline, github-actions, github-pages, reactjs, typescript, vitejs
• Language: CSS
• Homepage:
• Size: 145 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


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






#### 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@v2

      - name: Setup Node

        uses: actions/setup-node@v1

        with:

          node-version: 16

      - 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@v2

        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@v2

        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

```