Website showing blank page - React project

Hi everyone, originally when deploying my website, after a successful deployment, I would get a 404 error page. Did some debugging and now having a new issue. My website brings me to a blank page. Looked at the console and removed somethings that were causing errors and now my console is error free ( but still with the blank page ). But besides that, from the looks of it, it is displaying my index.html because I can see my text in the noscript tag when I use the inspect tool. If someone can help me better understand why it is not displaying the project.

Website: https://effulgent-torrone-cbb4c6.netlify.app/
Github: GitHub - Lexx426/Todo

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

I think I gave all the information that would be useful, but if there is something else, let me know.

Hi @Lexx426, thanks for the post and welcome.

If you have not read the support guide in the link below already, kindly visit it and try the suggestions there to see if it helps resolves your problem.

Thanks.

I have already! Also have used the Netlify AI bot to help me try and figure out how to debug. Still not resolved.

Hi @Lexx426, thanks for the feedback.
In order to resolve the problem, kindly change your build settings to the below.

  • Base Directory: todo
  • Build command: npm run build
  • Publish directory: todo/build

Redeploy and the let me know the outcome.

Thanks.

1 Like

thank you very much. that worked! If you have time, can you explain to me why the publish directory would be todo/build? specifically /build? That was the only part that I had to change. Just unsure why it would be build since I do not have anything build in my directory.

1 Like

Hi @Lexx426, You are welcome. Glad to know my suggestions helped solve the problem.

Based on the Netlify Framework Integrations documentation page below, Netlify requires that you specify the publish directory as build for React applications. You can read more in the documentation link below

Thanks.

1 Like

@Lexx426, @clarnx is correct but I might be able to help you understand a bit more.

It’s all less of a Netlify requirement and more simply “how your project operates due to what you’re using (react)”.

The public folder isn’t where your build output lives, it is source code that react-scripts processes and then outputs into your build output, see the documentation here:
https://create-react-app.dev/docs/using-the-public-folder/

The build folder is where your react project outputs to by default as outlined here:
https://create-react-app.dev/docs/production-build

Netlify will publish to the CDN whatever you tell it to, by telling it to publish public it does just that, and publishes only the unprocessed index.html file which does not contain a <script> tag and thus will appear blank as you discovered.

The build folder is created when npm run build is executed, and since it contains your build output, it is what needs to be deployed.

You can test this by running the project locally with npm run build and you’ll see that the build folder is created.

2 Likes

thank you! I have made other projects with react before. I dont remember changing it to build but I will look at my other projects to see if it just went over my head today!! Thank you though for your help.