Got some time to take a look at your repo. It's not the setupProxy.js
, but instead it's how you've set up your API.
First issue: You're trying to serve production assets in development.
app.use(express.static(path.join(__dirname, "build")));
app.get("*", (req, res) => {
res.sendFile(path.join(__dirname, "build", "index.html"));
});
Fix: When you're in production, it'll capture requests and fallback to the client index.html
if a requested route doesn't match.
if (process.env.NODE_ENV == "production") {
app.use(express.static(path.join(__dirname, "build")));
app.get("*", (req, res) => {
res.sendFile(path.join(__dirname, "build", "index.html"));
});
}
Second issue: You're serving the above assets as a wildcard /
(changed to *
) before you're serving your API routes. In other words, it'll never reach your GET
requested API routes since /
(*
) catches all GET
requests first.
Fix: All of your API routes must sit above your client production build -- this way, requests flow through the API first and then fallback to the client second.
app.get("/api/message", (req, res) => {
res.json({ message: "Test déploiement d'O'Films sur Heroku" });
});
app.get("/api/hello", (req, res) => {
res.json({ message: "Hello world !" });
});
if (process.env.NODE_ENV == "production") {
app.use(express.static(path.join(__dirname, "build")));
app.get("*", (req, res) => {
res.sendFile(path.join(__dirname, "build", "index.html"));
});
}
app.listen(port, () => {
console.log(`Server is on up ${port} now !`);
});
Working example repo: https://github.com/mattcarlotta/ofilms-refactored