MERN app deployed but refuses to load

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:

  • Build Command cd client && npm install && npm run build && cd ../server && npm install
  • Start Command 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 :woman_technologist::man_technologist:

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

Bl1xvan/mernportfolio at main (github.com)

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:

  • Build Command: npm run render-postbuild
  • Publish Directory: ./client/build

Once that’s complete, add these to the “Redirects/Rewrites” of the Static Site:

  • Source /api/* Destination https://mernportfolio.onrender.com/api/* Action Rewrite
  • Source /* Destination index.html Action Rewrite
    They should be in that order.

Then 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