Help Needed: Deploying React Project result in a blank page

Hey, I am very new on working on a website. I made a website for my portfolio and I want to deploy on Vercel after testing with GitHub Pages. For some reason after running the deployment, my website isn't working and it's only showing a white page.

The template I’m using was made for GitHub Page but I want to bring my page to my own Vercel page to share with others.

The source code is here if anyone want see it: studiobutter/profile

Current Behavior: Showing a white page.
Expected behavior: It should look something like this

Deploy Command: yarn vercel (following the on screen setup)

Project Infomation

Deployment URL or Custom Domain: https://profile-eight-ruddy.vercel.app/
Environment (local, preview, production): local
Project Framework: React
Build Settings:
  Framework Preset: Create React App
  Build Command (if not default):
  Output Directory (if not default):
  Install Command (if not default):
Node/Runtime Version: v20.17.0
Package Manager: yarn
Relevant Packages:
        "bootstrap": "^5.2.3",
        "clipboard": "^2.0.11",
        "emailjs-com": "^3.2.0",
        "gh-pages": "^6.2.0",
        "react": "^18.2.0",
        "react-bootstrap": "^2.7.0",
        "react-device-detect": "^2.2.3",
        "react-dom": "^18.2.0",
        "react-helmet-async": "^1.0.7",
        "react-icons": "^4.1.0",
        "react-router-dom": "^6.6.2",
        "react-scripts": "^5.0.1",
        "react-transition-group": "^4.4.2",
        "reactjs-popup": "^2.0.6",
        "typewriter-effect": "^2.18.2",
        "vercel": "^37.14.0",
        "web-vitals": "^3.1.1"

I actually have no idea what I am doing since I’m just running commands and hopping it works, I don’t know how to create an environment :sob:

Hello and welcome to the community, @studiobutter! And thanks for including a link to the repo.

It looks like there’s a missing PUBLIC_URL environment variable. If I change the basename from {process.env.PUBLIC_URL} to / then it works for me.

export default function App() {
  return (
    <Router basename="/">
      <ScrollToTop>
        <Headermain />
        <AppRoutes />
      </ScrollToTop>
    </Router>
  );
}

Hey! Thanks for the help. Tho I just redeploy the web page and it still show me a white page. Here’s the deployment URL: https://profile-9f448dawz-studiobutters-projects.vercel.app

I pulled the latest version of the repo and it works for me with the following settings.

Create React App selected as the Framework Preset in Project Settings. No command overrides.

Added an environment variable called PUBLIC_URL with the value /

Please give that a try and let me know how it goes.

1 Like

I can confirmed that it works! Thank you so much!

1 Like

@studiobutter I also tried deploying the app https://testbutter.vercel.app/ and it worked after adding the PUBLIC_URL as / The problem seems to be with the routing where it’s not getting the correct value for PUBLIC_URL that seems to be defined in your index.html page.

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

Thanks @amyegan for the resoloution.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.