I have built a Fullstack MERN application with my backend hosted on render.com and I am trying to connect my front end to this backend using API calls. When I run the react project locally using npm start on localhost, it works beautifully. However, when i try to run it in a build environment, it does not even connect to the API. Please help!
I have tried to update my package.json, update the route so axios is making calls directly to the API link, but it still doesn’t work. I want to replicate the local behaviour in a build environment (So the app works the way it should when i deploy it using npm run build)
2
Answers
It’s really hard to give concrete advice without more information on what exactly is failing, but I would assume it might have something to do with the way you’re calling axios stuff (i.e.
axios.get('/wordlist')). Without defining a clear URL for the API axios will probably do a little too much inferring and ping a different URL in production than it would ind dev. An easy fix would be to define a global API URL constant (or even better, a central API request handler and custom endpoints). This will give axios a clear target and hopefully preempt whatever tomfoolery is happening behind the scenes.Disclaimer: This is mostly guesswork on my part. Again, the problem needs more information to find a solution. Hope it helps!
Sorry, we may not be able to locate the problem accurately without more specific information. I guess it may be a problem with history routing. Or is axios’ underlying path inconsistent between production and live environments?