Blank Page (404): Linking GitHub page- React + Vite

Support
1

Any help would be appreciated. I’ve been trying to follow some tutorials and reading through the documentation. I read through [Support Guide] I’ve deployed my site but I still see "Page not found” and this Published the page on netlify, but blank page appears endlessly.

Website: https://worldofverdure.netlify.app/
Github: GitHub - worldOfVerdure/Portfolio

The following are my build settings ------
Base Directory: /
Build Command: npm run build
Publish Directory: dist

I do not have “homepage” in my package.json. I do see a dist folder in the Deploy File Browser which contains an index.html, a favicon.ico and an assets folder with all my images and a single js file from the build process. I feel like I am missing something obvious maybe? Any help would be appreciated. I apologize in advance if I missed something obvious.

2

@worldOfVerdure Your issue is the base that you have set in your vite.config.js:

The related Vite documentation is:
https://v2.vitejs.dev/config/#base
https://v2.vitejs.dev/guide/build.html#public-base-path

It presumes you will host your project in /Portfolio/:

image
image1234×566 185 KB

But doesn’t seem to produce a Portfolio folder within dist, it outputs only:

image
image836×1066 106 KB

Which is why your JavaScript doesn’t load and you end up with a blank page:

image
image763×122 29.3 KB

Set your base to the default of /

1 Like
3

I really appreciate your time. I will get to reading the documentation you presented.

Edit: This was indeed the solution. Thank you again.