{"id":20651918,"url":"https://github.com/abdullah-niaz/reactdeployment","last_synced_at":"2026-04-11T14:06:44.066Z","repository":{"id":254108692,"uuid":"845511718","full_name":"Abdullah-Niaz/reactDeployment","owner":"Abdullah-Niaz","description":"Guidance for deploying React projects built with Vite/simple to GitHub Pages. Covers setup, configuration, and deployment steps for success.","archived":false,"fork":false,"pushed_at":"2024-08-21T12:02:54.000Z","size":2,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-09T20:59:50.210Z","etag":null,"topics":["githubpages","javascript","react","tailwindcss","vite"],"latest_commit_sha":null,"homepage":"https://abdullah-niaz.github.io/BGChange/","language":null,"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/Abdullah-Niaz.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":"2024-08-21T11:50:08.000Z","updated_at":"2024-08-28T14:43:03.000Z","dependencies_parsed_at":"2024-08-21T13:30:09.217Z","dependency_job_id":null,"html_url":"https://github.com/Abdullah-Niaz/reactDeployment","commit_stats":null,"previous_names":["abdullah-niaz/reactdeployment"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Abdullah-Niaz/reactDeployment","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abdullah-Niaz%2FreactDeployment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abdullah-Niaz%2FreactDeployment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abdullah-Niaz%2FreactDeployment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abdullah-Niaz%2FreactDeployment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Abdullah-Niaz","download_url":"https://codeload.github.com/Abdullah-Niaz/reactDeployment/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abdullah-Niaz%2FreactDeployment/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262936726,"owners_count":23387437,"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":["githubpages","javascript","react","tailwindcss","vite"],"created_at":"2024-11-16T17:30:41.522Z","updated_at":"2025-12-30T22:11:55.763Z","avatar_url":"https://github.com/Abdullah-Niaz.png","language":null,"readme":"# Deploying a React Project Created with Vite on GitHub Pages\n\nFollow these steps to deploy your React project created using Vite to GitHub Pages.\n\n## 1. Set Up Your Project\n\nEnsure your React project is ready for deployment. If you haven't already, initialize your project with Vite:\n\n```js\nnpm create vite@latest my-react-app --template react\ncd my-react-app\nnpm install\n```\n\n### 2. Update vite.config.js\n\nIn your vite.config.js file, add the base option. This is necessary because GitHub Pages serves your project from a subdirectory **(/your-repo-name/)**, not from the root (/).\n\n```js\n// vite.config.js\nimport { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({\n  plugins: [react()],\n  base: \"/your-repo-name/\", // Replace 'your-repo-name' with your GitHub repository name\n});\n```\n\n### 3. Build the Project\n\nRun the build command to generate the static files:\n\n```js\nnpm run build\n```\n\nThis will create a dist folder containing your compiled project.\n\n### 4. Install gh-pages\n\nYou need to install the gh-pages package to deploy the dist folder to GitHub Pages:\n\n```js\nnpm install gh-pages --save-dev\n```\n\n### 5. Update package.json\n\nIn your package.json file, add the following **homepage** and **deploy** script:\n\n```json\n{\n  \"name\": \"my-react-app\",\n  \"version\": \"0.0.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"build\": \"vite build\",\n    \"preview\": \"vite preview\",\n    \"deploy\": \"gh-pages -d dist\"\n  },\n  \"homepage\": \"https://your-username.github.io/your-repo-name/\", // Replace with your GitHub username and repo name\n  \"dependencies\": {\n    // other dependencies\n  },\n  \"devDependencies\": {\n    // other dev dependencies\n    \"gh-pages\": \"^3.2.3\"\n  }\n}\n```\n\n### 6. Deploy to GitHub Pages\n\nDeploy your project to GitHub Pages by running:\n\n```js\nnpm run deploy\n```\n\nThis command will create a gh-pages branch in your repository and push the contents of the dist folder to it.\n\n### 7. Verify Deployment\n\nGo to https://your-username.github.io/your-repo-name/ to see your deployed React app.\n\n### 8. Set Up GitHub Pages\n\nIf it's your first time deploying to GitHub Pages, make sure to enable GitHub Pages in your repository settings:\n\n    1. Go to your repository on GitHub.\n    2. Click on the \"Settings\" tab.\n    3. Scroll down to the \"Pages\" section.\n    4. Under \"Branch,\" select gh-pages and /root as the source.\n    5. Save your changes.\n    6. Your site should be live after a few minutes.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdullah-niaz%2Freactdeployment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabdullah-niaz%2Freactdeployment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdullah-niaz%2Freactdeployment/lists"}