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
amyegan
(Amy Egan)
November 5, 2024, 11:19pm
4
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
amyegan
(Amy Egan)
November 6, 2024, 5:57pm
7
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
system
(system)
Closed
November 14, 2024, 8:20am
10
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.