This is my first time deploying a full-stack application and I am not sure how to fix this issue.
I have deployed my app on Render and it is deploying successfully for the client side. It is the server side I am having issues with. In my local machine environment I was making server calls like this
helper function:
import axios from 'axios';
const usersRoute = process.env.REACT_APP_SERVER + ":" + process.env.REACT_APP_SERVER_PORT + "/users";
export default async function getAllUsers() {
const { data } = await axios.get(usersRoute);
// setData(data);
// console.log('users data:', data);
// setUsers(data);
// return usersList;
return data;
};
environment variables:
REACT_APP_SERVER=http://localhost
REACT_APP_SERVER_PORT=8000
server file:
// Get all users
app.get("/users", (req, res) => {
db.query("SELECT * FROM users", (error, results) => {
if (error) {
throw error;
}
res.status(200).send(results.rows);
});
});
This works in my local machine environment of course, but when I put it all into Render, it was still making the calls to my local environment, so it’s only working on my computer. I am not sure how to exactly fix it.
In my localhost environment, the client side is running on “localhost:3000/” and the server was running on “localhost:8000/”
I have tried changing it so it is just using /plants as the path, which failed when put together with the deployed application URL, I have tried different variables, and seeing if I could get it to run off of the main URL in my localhost environment but that also failed.
I am just really turned around and confused right now, so any help would be appreciated.
