I can’t see any errors in the console. Or even in the render logs. The site just keeps loading until there is a request timeout.
It says “Failed to load resource: the server responded with a status of 504 ()”
I put the client folder inside of the root folder of my repo this time. And the service I used is Node rather than Docker.
My GitHub repo is here
And the name of my site is
https://mernportfolio.onrender.com/
Hi there,
Thanks for reaching out.
It looks like you’re trying to run a monorepo, which Render has support for. Your client folder looks like a “create react app” project, and the server a Node Express server.
However, they also seem to have some dependent cross-over, as your backend seems to serve the built “client” files.
A more common pattern would be to deploy the React site to a Static Site and the backend to a Web Service and have them interact with client-side calls.
In your case, it looks like you’ll need to correct your Build & Start Commands to be a little more complex, maybe something like:
cd client && npm install && npm run build && cd ../server && npm install
cd server && npm start
These commands are only my guess based on what I can see from your repo, but you’ll know what you need to do to get your app up and running.
Alan
I’m seeing cd server in the start command. Do I need that even thought I don’t have a server folder?
I’ve also recently started following this tutorial to install the MERN app
Render Deployment (free tier) of MERN App - DEV Community 
But the logs keep saying that the “react scripts are not found”
I’ve tried deleting and reinstalling node_modules and package-lock.json. I’ve also installed react-scripts both locally and globally
Build command is npm install concurrently
and start command is npm run dev
If I don’t put the word concurrently in there the build fails because of that. Should I put it into the build command like this?
cd client && npm install concurrently && npm run build && cd …/server && npm install
I’m seeing cd server in the start command. Do I need that even thought I don’t have a server folder?
It looks like you have a server folder to me:
Deleting and recreating services wouldn’t make a difference. Your current build command only installs one package npm install concurrently. Your package.json files are in the subfolders, so you’ll either need to set a Root Directory, or cd into them. As they call each other, traversing into each folder seems necessary.
I’ve made my suggestions above, this isn’t a Render issue, it’s a case of getting your application ready for production deployment. You’ll know your app the best, but from what I can see in the repo my suggestions may be worth a shot, even just to rule them out to work toward your own solution.
Alan
Oh! This shows the master branch. In this topic I’m referring to the main branch
Seems odd to have both main & master branches, which are also different. But even so, the process would be similar.
cd client && npm install && npm run build && cd ../ && npm install
Alan
I’ll admit I went a little nuts here. I’ve been trying and failing to deploy this portfolio for around 2 months now.
It deployed, but it’s saying not found ;__;
We really are well beyond the scope of our support here, but I see the issue.
The tutorial you’re following isn’t great. However, when it gets to the deploying to Render part, it uses two service method that I mentioned earlier:
A more common pattern would be to deploy the React site to a Static Site and the backend to a Web Service and have them interact with client-side calls.
Your Node Web Service is pretty much just there to serve /api/v1/projects, which seems to work: https://mernportfolio.onrender.com/api/v1/projects
Now you need to create a Static Site from your same repo/branch:
npm run render-postbuild./client/buildOnce that’s complete, add these to the “Redirects/Rewrites” of the Static Site:
/api/* Destination https://mernportfolio.onrender.com/api/* Action Rewrite/* Destination index.html Action RewriteThen visit the Static Site URL.
Alan
This link definitely works! https://mernportfolio.onrender.com/api/v1/projects
And the client page is finally up! But it doesn’t seem to be fetching the api as is.
React App (mernportfolio-client.onrender.com)
These are the errors I’m getting now
Failed to load resource: the server responded with a status of 404 ()
/api/v1/projects?p=1&languages=&title=:1
Uncaught (in promise) SyntaxError: Unexpected token 'N', "Not Found" is not valid JSON
mernportfolio-client.onrender.com/:1
I tried changing the rewrites to “api/v1/projects” but that didn’t seem to work either
YAS! It’s up!
I changed the fetch api to the server site instead!
Then I added the cors extension into my app.js on the server site!
FINALLY!!
Thank you so much for helping me get to this point @al_ps!! Like I said, I’ve been trying to get this site working for MONTHS!!
Very glad to hear you’re up and running!
Thanks for using Render!
Alan
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.