Hey folks, I’m stuck with a weird issue. I made a React app with Node.js backend and MongoDB. The backend’s working fine - it’s fetching data from the database and all. But when I try to show the React pages, I just get a blank screen. No errors, nothing.
I’ve set it up like this:
- Backend: Using Render web services (shoppe-globe-app)
- Frontend: Using Render static site (shoppe-globe)
Both are from the same repo. The backend routes are okay, except for ‘/’ which throws a ‘cannot get /’ error.
Here’s what my project looks like:
/
├── src/
├── Backend/
├── dist/
├── node_modules/
├── package.json
└── vite.config.js
In my root package.json, I’ve got scripts for development, building, and starting the server. The vite.config.js file has settings for the build output, server proxy, and CORS.
Any ideas what might be causing the blank frontend? I’m totally stumped!
yo, might be a CORS issue. check ur backend if it’s allowing requests from ur frontend domain. also, try adding a catchall route (*) in ur backend to serve the React app. could help with that blank page problem. dont forget to peek at the network tab in devtools too!
hmm, have u tried checking the console in your browser? sometimes theres hidden errors there that dont show up on the page. also, maybe double-check ur build process? ive had issues before where my react app built fine locally but didnt work when deployed. oh, and hows ur routing set up? that could be causing problems too. just some ideas to explore!
It sounds like you might be facing a routing issue with your React app after deployment. Since your backend routes are working except for ‘/’, it’s possible that your static site deployment isn’t properly configured to handle client-side routing.
One common solution is to add a ‘_redirects’ file in your public folder with the content ‘/* /index.html 200’. This tells the server to redirect all requests to index.html, allowing React Router to handle the routing on the client side.
Also, check your build output in the ‘dist’ folder. Ensure all necessary files are present and correctly referenced. Sometimes, issues with asset paths can cause blank screens.
Lastly, double-check your CORS settings. Even if the backend is working, improper CORS configuration can prevent the frontend from accessing the API, resulting in a blank page. Make sure your backend is properly configured to accept requests from your frontend’s domain.