{"id":26105269,"url":"https://github.com/sanjaychoodamani/vite-react-deploy","last_synced_at":"2026-04-12T14:43:43.761Z","repository":{"id":281317456,"uuid":"944915148","full_name":"SanjayChoodamani/Vite-React-Deploy","owner":"SanjayChoodamani","description":"This is demo website deployed in gh-pages using github actions.","archived":false,"fork":false,"pushed_at":"2025-03-08T08:40:14.000Z","size":356,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-08T09:28:53.399Z","etag":null,"topics":["deployment","github-actions","reactjs","vite"],"latest_commit_sha":null,"homepage":"https://sanjaychoodamani.github.io/Vite-React-Deploy/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SanjayChoodamani.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-08T08:16:59.000Z","updated_at":"2025-03-08T08:42:33.000Z","dependencies_parsed_at":"2025-03-08T09:39:13.399Z","dependency_job_id":null,"html_url":"https://github.com/SanjayChoodamani/Vite-React-Deploy","commit_stats":null,"previous_names":["sanjaychoodamani/vite-react-deploy"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SanjayChoodamani%2FVite-React-Deploy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SanjayChoodamani%2FVite-React-Deploy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SanjayChoodamani%2FVite-React-Deploy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SanjayChoodamani%2FVite-React-Deploy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SanjayChoodamani","download_url":"https://codeload.github.com/SanjayChoodamani/Vite-React-Deploy/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242750791,"owners_count":20179258,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["deployment","github-actions","reactjs","vite"],"created_at":"2025-03-09T21:03:05.806Z","updated_at":"2025-12-31T00:53:07.423Z","avatar_url":"https://github.com/SanjayChoodamani.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Deploy React Vite App to GitHub Pages using GitHub Actions\n\nThis guide provides a comprehensive walkthrough of deploying a React Vite application to GitHub Pages using GitHub Actions for continuous deployment.\n\n## Table of Contents\n- [Overview](#overview)\n- [Step-by-Step Deployment Guide](#step-by-step-deployment-guide)\n  - [1. Setting up a Vite React Project](#1-setting-up-a-vite-react-project)\n  - [2. Creating a GitHub Repository](#2-creating-a-github-repository)\n  - [3. Creating the Deployment Workflow](#3-creating-the-deployment-workflow)\n  - [4. Configuring GitHub Actions Permissions](#4-configuring-github-actions-permissions)\n  - [5. Setting up GitHub Pages](#5-setting-up-github-pages)\n  - [6. Fixing Asset Links](#6-fixing-asset-links)\n- [Troubleshooting](#troubleshooting)\n- [FAQ](#faq)\n- [Resources](#resources)\n\n\n## Overview\n\nThis project is built with:\n- React - A JavaScript library for building user interfaces\n- Vite - A modern frontend build tool that significantly improves the development experience\n- GitHub Actions - For continuous integration and deployment\n- GitHub Pages - For hosting the built application\n\n## Step-by-Step Deployment Guide\n\n### 1. Setting up a Vite React Project\n\nIf you're starting from scratch, create a new Vite project:\n\n```bash\n# Create new Vite project using React template\nnpm create vite@latest my-project -- --template react\n\n# Navigate to project directory\ncd my-project\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n```\n\nInitialize Git repository:\n\n```bash\ngit init\ngit add .\ngit commit -m \"Initial Vite project setup\"\n```\n\n### 2. Creating a GitHub Repository\n\n1. Go to https://github.com/new\n2. Name your repository (e.g., react-deploy-demo)\n3. Choose \"Public\" visibility (required for GitHub Pages with a free account)\n4. Click \"Create repository\"\n\nConnect your local repository:\n\n```bash\ngit branch -M main\ngit remote add origin https://github.com/YOUR_USERNAME/react-deploy-demo.git\ngit push -u origin main\n```\n\n### 3. Creating the Deployment Workflow\n\nCreate a new file at `.github/workflows/deploy.yml` with the following content:\n\n```yml\nname: Deploy\n\non:\n  push:\n    branches:\n      - main\n\njobs:\n  build:\n    name: Build\n    runs-on: ubuntu-latest\n\n    steps:\n      - name: Checkout repo\n        uses: actions/checkout@v4\n\n      - name: Setup Node\n        uses: actions/setup-node@v4\n        with:\n          node-version: 20\n\n      - name: Install dependencies\n        uses: bahmutov/npm-install@v1\n\n      - name: Build project\n        run: npm run build\n\n      - name: Upload production-ready build files\n        uses: actions/upload-artifact@v4\n        with:\n          name: production-files\n          path: ./dist\n\n  deploy:\n    name: Deploy\n    needs: build\n    runs-on: ubuntu-latest\n    if: github.ref == 'refs/heads/main'\n\n    steps:\n      - name: Download artifact\n        uses: actions/download-artifact@v4\n        with:\n          name: production-files\n          path: ./dist\n\n      - name: Deploy to GitHub Pages\n        uses: peaceiris/actions-gh-pages@v4\n        with:\n          github_token: ${{ secrets.GITHUB_TOKEN }}\n          publish_dir: ./dist\n```\n\nThis workflow performs two key jobs:\n1. **Build**: Checks out the code, installs dependencies, builds the project, and uploads the build files as an artifact\n2. **Deploy**: Downloads the build artifacts and deploys them to GitHub Pages\n\nPush the workflow file:\n\n```bash\ngit add .github/workflows/deploy.yml\ngit commit -m \"Add deployment workflow\"\ngit push\n```\n\n### 4. Configuring GitHub Actions Permissions\n\n![GitHub Actions Permissions Settings](./src/assets/permission.png)\n\n1. Go to your GitHub repository\n2. Navigate to **Settings \u003e Actions \u003e General**\n3. Scroll down to \"Workflow permissions\"\n4. Select **Read and write permissions**\n5. Click **Save**\n\nThis is an essential step as the deployment workflow needs to write to your repository to create the `gh-pages` branch.\n\nIf your initial deployment failed, go to the Actions tab, find the failed workflow, and click **Re-run failed jobs**.\n\n![Github Re-run Failed Jobs](./src/assets/rerun.png)\n\n### 5. Setting up GitHub Pages\n\nAfter the workflow runs successfully:\n\n1. Go to **Settings \u003e Pages**\n2. Set **Source** to \"Deploy from a branch\"\n3. Select the `gh-pages` branch and the `/ (root)` folder\n4. Click **Save**\n\n![Set source to deploy the website](./src/assets/pages.png)\n\nGitHub will now build and deploy your site. You'll see a message with the URL where your site is published (typically `https://YOUR_USERNAME.github.io/react-deploy-demo/`).\n\n### 6. Fixing Asset Links\n\nIf your deployed site shows a blank page with missing assets, you need to configure the base path in Vite:\n\n1. Open `vite.config.js`\n2. Add the `base` property with your repository name:\n\n```javascript\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [react()],\n  base: '/react-deploy-demo/' // Replace with your repository name\n})\n```\n\n3. Commit and push this change:\n\n```bash\ngit add vite.config.js\ngit commit -m \"Fix: Add base path for GitHub Pages deployment\"\ngit push\n```\n\n4. Wait for the deployment workflow to complete\n\n## Troubleshooting\n\n- **Blank page after deployment**: Check browser console for errors. Typically, this is due to incorrect asset paths - ensure you've set the correct `base` in vite.config.js.\n- **Failed Actions workflow**: Verify that you've enabled the correct permissions for GitHub Actions.\n- **404 errors**: Make sure GitHub Pages is set to use the gh-pages branch, and double-check that the branch exists.\n\n## FAQ\n\n- **How do I update my deployed site?**\n  Simply push changes to your main branch, and the GitHub Actions workflow will automatically build and deploy the updated version.\n\n## Resources\n\n- [Vite Documentation](https://vitejs.dev/)\n- [GitHub Pages Documentation](https://docs.github.com/en/pages)\n- [GitHub Actions Documentation](https://docs.github.com/en/actions)\n- [React Documentation](https://react.dev/)\n- [Deploying Vite Apps to GitHub Pages (Vite Guide)](https://vitejs.dev/guide/static-deploy.html#github-pages)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanjaychoodamani%2Fvite-react-deploy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsanjaychoodamani%2Fvite-react-deploy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanjaychoodamani%2Fvite-react-deploy/lists"}