My react website on GitHub Pages shows blank white screen

[velaragirlgroup]

🏷️ Discussion Type

Question

💬 Feature/Topic Area

Code Search and Navigation

Body

Manus AI app created a website for me. i downloaded the zip folder from manus AI app and extracted it. i uploaded some of those files to github repository: https://github.com/velaragirlgroup/official. I made changes to the folder: client/src/pages/Home.txs. My site at https://velaragirlgroup.github.io/official/ shows only a blank white screen. The build is green in GitHub Actions but nothing displays. My website on GitHub shows blank white screen.

i asked copilot chatgpt to help me but nothing has changed. AI cant help me at all and im stuck. im completely new to this and dont know how to handle these things. i really want this website to work: https://velaragirlgroup.github.io/official/. will anyone please help out?

[vishalvivek14332-source]

A blank white page with a successful Pages build usually means the React app is throwing a JavaScript error at runtime or is using incorrect asset/router paths for deployment under /official/.

The first thing I would do is open the browser's Developer Tools (F12) and check the Console and Network tabs for 404s or JavaScript errors. For React apps hosted in a repository subdirectory, you typically need to configure the app's base path (for example, base in Vite or homepage in Create React App) to /official/ and rebuild/redeploy. Also double-check that the file you edited is really Home.tsx (not Home.txs) and that all imports still resolve correctly.

If you can share the exact console error message (or a screenshot of it), it should be possible to pinpoint the issue quickly.

[velaragirlgroup]

i checked and i edited Home.tsx: https://github.com/velaragirlgroup/official/blob/main/client/src/pages/Home.tsx. if you look at the top side of the blank white page, its written "Velara - Official Website" but nothing is showing. The website is still white: https://velaragirlgroup.github.io/official/. you said that i need to configure the apps base path, i actually dont know what that means because manus ai created the website. will you please help

[mohamedosama2004]

A blank white screen with a successful GitHub Actions build usually means the app is loading but failing at runtime.

A few things to check:

Open Developer Tools (F12) → Console and see if there are any JavaScript errors.
Open the Network tab and check if any JS or CSS files return 404.
If this is a React + Vite project deployed to GitHub Pages, make sure vite.config.ts contains:
export default defineConfig({
base: "/official/",
})
If it's Create React App, make sure package.json includes:
"homepage": "https://velaragirlgroup.github.io/official/"
Verify that GitHub Pages is serving the correct build output (dist or build) rather than the source files.

If you can share the repository structure (especially package.json, vite.config.ts, or webpack config), it'll be much easier to identify the exact cause.

[velaragirlgroup]

hello package.json is inside the folder called client. here is the link: https://github.com/velaragirlgroup/official/blob/main/client/package.json Regarding vite.config.ts and webpack config, i dont know where they are. My repository is https://github.com/velaragirlgroup/official

[Mr-Nilarnab]

@velaragirlgroup

Since you're new to React and GitHub Pages, I'd suggest taking a step back and first determining whether the problem is with the deployment or with the application itself. A blank white page can be caused by several different issues that all look identical from the browser.

Here's a simple way to narrow it down:

1. Open your website and press F12 to open Developer Tools.
2. Check the Console tab:
   • Red error messages usually indicate that the application crashed while loading.
   • Copy the first error you see, as later errors are often just consequences of the first one.
3. Check the Network tab and refresh the page:
   • If JavaScript or CSS files return 404, the deployment path is likely incorrect.
   • If all assets load successfully but the page is still blank, the problem is probably inside the React application.
4. Verify that the branch GitHub Pages is publishing matches the output of your build (for example, the generated dist or build folder rather than the source files).

Because you mentioned that the project was generated by Manus AI, there's another possibility: the generated project may rely on environment variables, APIs, or configuration files that weren't included when you downloaded the ZIP. In that case, the project can build successfully but fail immediately when it starts in the browser.

If you're comfortable sharing a few additional files, the community can usually identify the issue much more quickly. The most helpful ones would be:

• package.json
• vite.config.ts or vite.config.js (if present)
• tsconfig.json (if present)
• A screenshot of the browser Console showing the first error
• The repository's file tree (or a screenshot of it)

Those details would help determine whether this is a GitHub Pages configuration issue, a React runtime error, or a missing project dependency.

[velaragirlgroup]

hey it seems that i did not upload these files: vite.config.ts/js and tsconfig.json. i just uploaded them and waited 10 minutes but the website is still white. but here is link and screenshot of package.json: https://github.com/velaragirlgroup/official/blob/main/client/package.json

i found a file called vite.config on my laptop and uploaded it, it changed to vite.config.ts. here is the link: https://github.com/velaragirlgroup/official/blob/main/vite.config.ts

i found tsconfig.json and uploaded it as well: https://github.com/velaragirlgroup/official/blob/main/tsconfig.json

i managed to upload vite.config.ts and tsconfig.json but still no change. i double-clicked on white page and selected 'inspect' and chose 'console'. i see red errors. here is the screenshot:

But i went to Actions on github but there are green marks

here is a screenshot of all the files i uploaded:

here is whats in the client folder:

Are there still files i need to upload?

[deepakraog]

The base-path advice above is right in general, but I went and looked at your actual repo/workflow and think there's something more specific going on.

Your vite.config.ts (at the repo root) sets root to the client folder and outDir to dist/public. But your GitHub Actions workflow runs the build with working-directory: ./client, and then uploads ./client/dist as the Pages artifact. Vite normally looks for its config in whatever directory the build is run from — so when the build runs from inside client/, it may not be picking up that root-level config at all, and even if it did, the output path it writes to (dist/public, relative to repo root) doesn't match the folder your workflow is uploading (client/dist).

That would explain exactly what you're seeing: the build genuinely succeeds (green check), but the thing GitHub Pages is serving isn't the right build output, so you get a blank page.

Two things I'd try:

Move vite.config.ts (and tsconfig.json) inside the client/ folder, next to package.json, so it's actually picked up when the build runs from there.
Add base: '/official/' to that config, since you're serving from a subpath, not the domain root.

After that, check the Network tab again — if JS/CSS start loading with a 200 instead of 404, you're most of the way there.

[velaragirlgroup]

thanks: i deleted vite.config.ts (and tsconfig.json) on the root and managed to upload them again in client folder next to package.json. Do you know how i can add base: '/official/' to that config?

[deepakraog]

@velaragirlgroup — good progress moving the config files into client/. I re-checked your repo just now and can answer your question directly, plus flag two things that are still blocking the site.

How to add base: '/official/'

1. Open client/vite.config.ts in GitHub (click the file → pencil icon to edit).
2. Find the export default defineConfig({ block.
3. Add this line inside the { ... }, near the top:

base: "/official/",

It should look like:

export default defineConfig({
  base: "/official/",
  plugins: [react(), tailwindcss()],
  // ... rest of your config
});

4. Click Commit changes.

That tells Vite all JS/CSS paths should be prefixed with /official/, which matches your GitHub Pages URL.

---

Two bigger issues I see right now

1. Your build workflow is not actually running

Your deploy.yml is still at the repo root. GitHub Actions only picks up workflows inside:

.github/workflows/deploy.yml

Right now the only workflow running is GitHub's default pages-build-deployment — that's why you see green checks, but the site still doesn't work. Those green checks are not running pnpm build.

Fix: In GitHub, click Add file → Create new file, and type this exact path in the filename box:

.github/workflows/deploy.yml

Paste the contents from your existing root deploy.yml, commit, then delete the root-level deploy.yml so you don't have two copies.

2. Your client/vite.config.ts currently has a syntax error

You already added base: "/official/" — good — but the file was accidentally broken when editing. Right now it closes defineConfig too early and leaves a stray server: { ... } block outside it. That will cause the build to fail once the workflow actually runs.

When editing client/vite.config.ts, make sure server is inside the same defineConfig({ ... }) block, like this:

export default defineConfig({
  base: "/official/",
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(import.meta.dirname, "src"),
    },
  },
  build: {
    outDir: "dist",
    emptyOutDir: true,
  },
  server: {
    port: 3000,
    host: true,
  },
});

(You can keep your full Manus plugins list — just make sure there's only one export default defineConfig({ and one closing });.)

---

How to know it's working

After committing all three fixes (deploy.yml location, vite.config.ts syntax, base path):

1. Go to Actions — you should see a run called "Build and Deploy" (not just pages-build-deployment).
2. Wait for it to finish green.
3. Open https://velaragirlgroup.github.io/official/
4. Right-click → Inspect → Network tab → refresh.
5. You should see files like index-xxxxx.js and index-xxxxx.css with status 200.

Right now your page is loading /client/src/main.tsx directly — that's raw source code, not a built site. Once the real workflow builds and deploys client/dist, those script tags will change to bundled .js files and the page should render.

---

Quick checklist

Step	Status in your repo now
vite.config.ts in client/	Done
base: "/official/" added	Done, but file has syntax error — fix needed
package.json build = "vite build"	Done
Workflow at .github/workflows/deploy.yml	Not done yet — this is the main blocker
Pages source = GitHub Actions	Already set

The @initial-d advice on .github/workflows/ and simplifying the build script is correct — the missing workflow file is the reason the green Actions checks haven't fixed the blank page.

If you want, share a screenshot of the Actions tab after creating .github/workflows/deploy.yml and we can confirm the right workflow is running.

[initial-d]

I looked at the public repo, and there are a few concrete repo-structure problems that are more specific than the usual “blank React page” checklist.

The main issues I see are:

1. Your workflow file is named deploy.yml at the repository root. GitHub Actions only discovers workflow files under .github/workflows/, so this should be moved to something like:

.github/workflows/deploy.yml

GitHub’s Pages docs describe the custom workflow path/pattern here: https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site

2. client/package.json appears to have invalid JSON. This part is missing a comma after the build script:

"scripts": {
  "dev": "vite --host",
  "build": "vite build"
  "start": "NODE_ENV=production node dist/index.js"
}

It should be:

"scripts": {
  "dev": "vite --host",
  "build": "vite build",
  "start": "NODE_ENV=production node dist/index.js",
  "preview": "vite preview --host"
}

3. Your vite.config.ts is at the repository root, but your workflow runs the build from ./client and uploads ./client/dist. When Vite runs from client/, it normally looks for config in client/, so the root-level config may not be used.

For your current layout, I would make the setup consistent like this:

• move vite.config.ts into client/
• in that config, add the GitHub Pages base path because your site is served at /official/:

export default defineConfig({
  base: "/official/",
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(import.meta.dirname, "src"),
    },
  },
  build: {
    outDir: "dist",
    emptyOutDir: true,
  },
});

Vite’s official GitHub Pages guide also calls out the base setting for repository pages: https://vite.dev/guide/static-deploy#github-pages

Then your workflow can keep building from ./client and uploading ./client/dist.

So my suggested fix order would be:

1. Move deploy.yml to .github/workflows/deploy.yml.
2. Fix the missing comma in client/package.json.
3. Move/adapt vite.config.ts into client/.
4. Add base: "/official/".
5. In repository Settings -> Pages, set the source to GitHub Actions.
6. Push to main, then open the browser DevTools Network tab and confirm the generated .js and .css files load with 200 responses instead of 404s.

That should get you much closer than changing Home.tsx itself. The blank page is very likely deployment/build configuration rather than the page component.

[velaragirlgroup]

hello thanks for the help. i copied and pasted. I checked on actions and it failed

The website is still white: https://velaragirlgroup.github.io/official/

Here is what I see on inspect and console

Will you please help me by making changes to my repository directly. This website is so important because its for a new music group from Namibia. Will you help, please, by editing

[velaragirlgroup]

Inspect - Network - JS and CSS

[deepakraog]

@velaragirlgroup — I went ahead and opened a pull request with the fixes so you do not have to keep editing files by hand:

PR: velaragirlgroup/official#1

What was actually broken

1. Actions failed immediately because actions/upload-pages-artifact@v2 still pulls in deprecated upload-artifact@v3, so GitHub cancels the workflow before any deploy happens.
2. pnpm install could not succeed — package.json pointed at a missing patches/wouter@3.7.1.patch.
3. The Vite build itself failed — in client/src/pages/Home.tsx, the PageSEO description string was missing its closing quote, which broke the JSX and stopped production builds.
4. The live blank page was still serving the old root index.html, which points at /client/src/main.tsx. That file is source code, not a built asset, so the browser gets 404 for JS/CSS (exactly what your Network screenshots show).

What the PR changes

• Repairs the broken Home.tsx markup so vite build works
• Updates the Pages workflow to current actions (upload-pages-artifact@v3, deploy-pages@v4) and Node/pnpm versions that match the project
• Moves the lockfile into client/, removes the missing patch reference
• Sets the router base to /official so routes work under GitHub Pages
• Removes the broken root index.html so Pages only serves the real Vite dist output

What you need to do

1. Open the PR and click Merge pull request
2. Wait for the Build and Deploy workflow on main to finish green
3. Hard-refresh https://velaragirlgroup.github.io/official/ (Cmd/Ctrl + Shift + R)
4. In DevTools → Network, confirm the .js / .css files under /official/assets/ return 200

After merge, if Actions is still red, paste a screenshot of the failed run and I can follow up. You should not need to replace vite.config.ts with the short 7-line sample — keeping your Manus config with base: "/official/" is correct.

[velaragirlgroup]

Thanks for all the help. i clicked on approve & merge and visited https://velaragirlgroup.github.io/official/. This time the white screen has disappeared.

Im getting a message that the page is taking long to load. i refreshed the page many times but im still getting same message

Regarding vite.config.ts, i already made changes. Earlier today, i managed to copy and paste in the last part of vite.config.ts

[deepakraog]

Here: https://velaragirlgroup.github.io/official/

[Hafiz-Muhammad-Umar12]

I think the blank page is caused by deployment configuration rather than React itself. The project needs to deploy the generated client/dist folder, Vite should use base: "/official/", and the GitHub Actions workflow must complete successfully. The browser should be loading /official/assets/... files, not /client/src/main.tsx. Once the workflow is fixed and the built assets are deployed, the site should load normally.

[velaragirlgroup]

Thanks

[krithu2006]

Hi velaragirlgroup, welcome! This is one of the most common React + GitHub Pages issues, and it almost always comes down to paths — your build looks for assets at the domain root, but GitHub Pages is serving your site from a subfolder (/official/). A few things to check, in order:

1. Set the homepage field in package.json
   If you're using Create React App (which Manus AI likely generated), open package.json and add:

   "homepage": "https://velaragirlgroup.github.io/official/"

   Without this, your built index.html references /static/js/... instead of /official/static/js/..., so the browser can't find your JS/CSS bundle at all — which shows up as a blank white screen.

2. If you're using Vite instead of CRA, the fix is different — set base in vite.config.js:

   export default defineConfig({
     base: '/official/',
   })

3. Open the browser console on your live site (right-click → Inspect → Console tab) and check for 404 errors on JS/CSS files. This will confirm immediately if it's a path issue — you'll see failed requests like GET https://velaragirlgroup.github.io/static/js/main.xxxx.js 404.

4. Check your React Router setup, if you're using one. BrowserRouter needs a matching basename:

   <BrowserRouter basename="/official">

   Otherwise routing breaks even if the initial load works.

5. Rebuild and redeploy after making these changes — a green GitHub Actions build only confirms the build succeeded, not that the app runs correctly in the browser. You'll need to run your build again (npm run build) and push the updated build/dist folder (or let your Actions workflow rebuild) for the fix to take effect.

6. Double check client/src/pages/Home.tsx for typos introduced when editing — a broken import or syntax error there can also cause a silent blank screen with no visible error unless you check the console.

Start with the browser console — it'll tell you exactly what's failing and save a lot of guesswork. Let us know what errors show up and we can narrow it down further.

[velaragirlgroup]

Thank you