I have deployed my front end vite React application and getting 404 error on API call

[muzaffar640]

I have deployed my front end vite React application by dragging the dist folder and getting 404 error on API call. I am getting this for all end points those are working fine in my local machine though.
App link: https://musical-frangollo-063d57.netlify.app/

I have tried redirect and rewrite rule that is mentioned in this documentation.
Created a netlify.toml in root directory

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

I have checked a few methods that are mentioned in some issues but nothing helped.

[hrishikesh]

Where’s the API hosted?

[muzaffar640]

It is hosted on Render. Here is the front end application that I have deployed. I had drag the dist folder after the build.

[nathanmartin]

@muzaffar640 Do you have a redirect that handles the /api/ path and sends those requests to the backend on Render?

The redirect in the netlify.toml that you’ve shown catches all requests and returns the index.html… it’s for handling “Single Page Applications”.

If your api isn’t hosted on Netlify, you would need a rule above that one that catches requests to /api/* and sends them to the destination accordingly.

[jasiqli]

Documentation for Nathan’s suggestion is Proxy to another service @muzaffar640

[muzaffar640]

Thank you for the help I have updated netlify.toml but still no help. This is my first time with netlify.

[[redirects]]
  from = "/api/*"
  to = "/api/index.html"
  status = 200

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[nathanmartin]

@muzaffar640 You’ve said that your backend API is hosted on Render, but the API proxy that you’ve created directs from /api/* to /api/index.html.

That file likely doesn’t exist, and if it did, it would just be an index.html file on Netlify.

The to of your first proxy should point to the URL of your backend on Render.

E.g. https://yourprojectname.onrender.com/api/:splat

[jasiqli]

@slaymance Your issue is completely different to the issue in the original post on this thread.

The original had a 404 Not Found error, while your function is returning a 500 Internal Server Error. This likely means your function code is wrong. And without seeing the code no one can help you.

Please create a new thread.

[slaymance]

@jasiqli Thank you for your prompt support and cordial demeanor. I am disappointed that I didn’t share my code in order to solicit more of your helpful advice. I’ll go ahead and delete my comment since it doesn’t pertain to the topic at hand. Thanks again!

[jasiqli]

@slaymance

cordial demeanor

What flavour? I have orange, lime, and apple & raspberry.

[muzaffar640]

@nathanmartin so in my case it should be something like this

[[redirects]]
  from = "/api/*"
  to = "https://mernbackend-gg7o.onrender.com/api/users"
  status = 200

[[redirects]]
  from = "/*"
  to = "https://mernbackend-gg7o.onrender.com/api/users"
  status = 200

but it is still not working.

[nathanmartin]

@muzaffar640 No, I believe you’ve misunderstood.

Each redirect needs to point to where it’s content is hosted.

You’ve said that you have:
backend = Render
frontend = Netlify (React SPA)

So…

[[redirects]]
  from = "/api/*"
  to = "https://mernbackend-gg7o.onrender.com/api/:slug"
  status = 200

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

One rule catches any requests you’re making to /api/ANY/CHILD/PATH and proxies to https://mernbackend-gg7o.onrender.com/api/ANY/CHILD/PATH… that’s your backend.

The other rule catches any requests that weren’t made to /api/* and sends those to the /index.html so that they can be handled/displayed by your react frontend.

[muzaffar640]

@nathanmartin let me what I am doing wrong…

[[redirects]]
  from = "/api/*"
  to = "https://mernbackend-gg7o.onrender.com/api/users"
  status = 200

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
  

here is my postman response…

still getting the error.

[muzaffar640]

@nathanmartin
here is the screenshot of browser

[nathanmartin]

@muzaffar640

let me what I am doing wrong…

What you’re doing wrong is you’re not following the instructions as written.

You don’t understand how it works, but you keep making guesses and changing what has been provided, your changes then break the solution.

Twice now I’ve specified to use :splat in your API path for the render backend, but you keep changing it to a hardcoded path of /api/users.

Detail is important in the world of development.

With the proxy path incorrectly set to https://mernbackend-gg7o.onrender.com/api/users you’re ignoring the path that the app requests (in this case /users/auth), and forcing everything to /api/users… even if the front-end called /api/products/list the proxy you have would just call /api/users on render.

With the :splat in place, the * portion of the requested path is passed through.

So when your front-end requests /api/users/auth, (as you can see it doing in your most recent screenshot), it will in turn request /api/users/auth on render.