React project hosting

[Salehmoradi2005]

Select Topic Area

Question

Body

I have React project built with NextUI in my repository
It works perfectly fine while running in react development but after running npm run build and upload it to Github pages it will just displays nothing but a blank web
Do you have any idea about whats wrong

[locflamedia]

I think the issue might be with your method. You can use the gh-pages library to deploy to GitHub, just like I did.

Reference link: https://github.com/tschaub/gh-pages

[yours7himanshu]

Select Topic Area

Question

Body

I have React project built with NextUI in my repository It works perfectly fine while running in react development but after running npm run build and upload it to Github pages it will just displays nothing but a blank web Do you have any idea about whats wrong

Honestly I don't prefer github for deploying my React Projects..U can use Netlify for deploying your react project...You can tag me if u need to deploy it...And i will suggest watch a youtube video on how to deploy MERN project using netlify or how to deploy react project using netlify.

[natasabrunet]

I think When you deploy to Github Pages, You need to make sure your homepage in Package.json is set to your Github Repo URL.

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬

[hostbett]

i think your Next.js project with NextUI isn't displaying on GitHub Pages because GitHub Pages doesn’t support server-side rendering (SSR). To fix this, ensure your project is fully exported as static files by adding { output: 'export' } in next.config.js and running npm run export instead of npm run build. Also, check your package.json and set the correct "homepage" path to match your GitHub repository URL. If GitHub Pages still doesn’t work, consider using Hostbet.com.in, Vercel, or Netlify, which provide better support for Next.js deployments.

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬

[dushaDev]

GitHub Pages serves static files. If your project isn’t configured to load resources relative to the correct base path, or if routing isn't handled as a static fallback (common in SPAs), it’ll just show a blank page.

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬

[dariogeorge21]

THere are the following steps to host a react app on github pages:
This guide assumes you're using a React app created with Create React App.

---

1. Install gh-pages package

In your project root, install the GitHub Pages deployment package:

npm install --save gh-pages

---

2. Update package.json

Open your package.json and add the following:

• Homepage field:

  "homepage": "https://<your-username>.github.io/<repository-name>"

• Add scripts:

  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }

So your file should finally look like this:

package.json:

{
  "name": "my-react-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://<github-username>.github.io/<repo-name>",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "devDependencies": {
    "gh-pages": "^6.1.1"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

---

3. Push Your Code to GitHub

Make sure your app is pushed to a GitHub repository:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/<your-username>/<repository-name>.git
git push -u origin main

---

4. Deploy to GitHub Pages

Run the deploy script:

npm run deploy

This will:

• Build the app.
• Push the build directory to a branch called gh-pages.

---

5. Enable GitHub Pages

Go to:

• https://github.com/<your-username>/<repository-name>/settings/pages
• Under "Source", select gh-pages branch and set root as / (if not already).

---

6. Done!

After a few seconds, your app will be live at:

https://<your-username>.github.io/<repository-name>

---

[msa-iqbal]

If you're looking for a fast, free, and developer-friendly platform to host your React project, I highly recommend using Vercel. It's perfect for frontend frameworks like React, and it handles deployment, custom domains, and CI/CD out of the box.

How to Deploy Your React App on Vercel (Step-by-Step)

1. Push your React project to GitHub

   • Make sure your project is version-controlled with Git and pushed to a GitHub repo.

2. Sign up at vercel.com

   • Use your GitHub account to log in and authorize Vercel to access your repositories.

3. Import your project

   • Click “Add New Project”
   • Choose the repository with your React app
   • Vercel will auto-detect it's a React app

4. Set build settings (if needed)

   • Framework: React
   • Build command: npm run build or yarn build
   • Output directory: build

5. Deploy

   • Click “Deploy”
   • Your site will be live at: https://your-project-name.vercel.app

[Saksham-Goel1107]

@Salehmoradi2005 if you need any assistance please tell otherwise select any best answer you liked and mark this question answered

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬