Build and Deploy React Projects to GitHub Pages (docs branch)

Build and Deploy React Projects to GitHub Pages (docs branch) #7

Sign in to view logs

Summary
Jobs
- build
Run details
- Usage
- Workflow file

Workflow file for this run

.github/workflows/build-and-deploy.yml at d573f63

	name: Build and Deploy React Projects to GitHub Pages (docs branch)

	on:
	workflow_dispatch:

	jobs:
	build:
	runs-on: ubuntu-latest

	steps:
	- name: Checkout repository
	uses: actions/checkout@v3

	- name: Set up Node.js
	uses: actions/setup-node@v3
	with:
	node-version: '18'

	- name: Install json tool for config edits
	run: npm install -g json

	- name: Build all Vite React projects
	run: \|
	projects=(
	"01. Tic-Tac-Toe"
	"02. Searchable-Product-Data-Table"
	"03. Counter"
	"04. ToDo-App"
	"05. Meals-API-Project"
	"06. Calculator"
	"07. Toggle-Background-Color"
	"08. Hidden-Search-Bar"
	"09. Testimonials"
	"10. Accordions"
	"11. Form Validation"
	)

	rm -rf output
	mkdir -p output

	repo_name="${GITHUB_REPOSITORY#*/}"

	for project in "${projects[@]}"; do
	echo "========================"
	echo "📦 Building $project"
	echo "========================"

	cd "$project"
	npm install

	# Inject Vite config with correct base path
	base="/$repo_name/$project/"
	echo "import { defineConfig } from 'vite';" > vite.config.js
	echo "import react from '@vitejs/plugin-react';" >> vite.config.js
	echo "export default defineConfig({ base: '$base', plugins: [react()] });" >> vite.config.js

	npm run build
	cd ..

	mkdir -p "output/$project"
	cp -r "$project/dist/." "output/$project/"
	done

	- name: Deploy to `docs` branch
	run: \|
	cd output
	git init
	git config user.name "github-actions"
	git config user.email "github-actions@github.com"
	git remote add origin https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}.git
	git checkout -b docs

	touch .nojekyll
	git add .
	git commit -m "Deploy React projects to GitHub Pages [docs branch]"
	git push --force origin docs