Build and Deploy React Projects to GitHub Pages (docs branch) #11
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: Build and Deploy React Projects to GitHub Pages (docs branch) | |
| on: | |
| workflow_dispatch: | |
| env: | |
| PROJECT_LIST: | | |
| 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 | |
| 12. Youtube Channel Page Clone | |
| 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 CLI (optional if needed later) | |
| run: npm install -g json | |
| - name: Build all Vite React projects | |
| run: | | |
| repo_name="${GITHUB_REPOSITORY#*/}" | |
| rm -rf output | |
| mkdir -p output | |
| while IFS= read -r project; do | |
| [ -z "$project" ] && continue # Skip empty lines | |
| echo "========================" | |
| echo "📦 Building $project" | |
| echo "========================" | |
| cd "$project" | |
| npm install | |
| # Inject vite.config.js 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 | |
| npx vite build | |
| cd .. | |
| mkdir -p "output/$project" | |
| cp -r "$project/dist/." "output/$project/" | |
| done <<< "$PROJECT_LIST" | |
| - 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 | |
| - name: Print deployed project URLs | |
| run: | | |
| echo "" | |
| echo "✅ Deployment Complete!" | |
| echo "🔗 Project URLs:" | |
| echo "" | |
| repo_name="${GITHUB_REPOSITORY#*/}" | |
| while IFS= read -r project; do | |
| [ -z "$project" ] && continue | |
| encoded_project=$(echo "$project" | sed 's/ /%20/g') | |
| echo "🌐 $project → https://${GITHUB_REPOSITORY_OWNER}.github.io/${repo_name}/${encoded_project}/" | |
| done <<< "$PROJECT_LIST" |