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: 21 days 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 (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-05T16:20:12.000Z (almost 2 years ago)
- Last Synced: 2025-03-25T14:21:53.704Z (7 months ago)
- Topics: cicd-pipeline, github-actions, github-pages, reactjs, typescript, vitejs
- Language: CSS
- Homepage:
- Size: 145 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- 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
```