I have a node js app in VPS and static files are served from dist folder (react app build files). However when i make a http request from my client, I get html as response instead of JSON

const express = require("express");
const publicRoute = require("./routes/publicRoute");
const cookieParser = require("cookie-parser");
const privateRoute = require("./routes/privateRoute");
const path = require("path");
const app = express();

app.use(function (req, res, next) {
  const allowedOrigins = process.env.ALLOWED_ORIGINS.split(",");
  const NODE_ENV = process.env.NODE_ENV;

  const origin = req.headers.origin;
 if (origin && allowedOrigins.includes(origin)   ) {
    res.setHeader("Access-Control-Allow-Origin", origin);
  }

  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, PUT, DELETE, OPTIONS",
  );
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Content-Type,Authorisation,x-client-type,Accept",
  );
  res.setHeader("Access-Control-Allow-Credentials", "true");
  if (req.method === "OPTIONS") {
    return res.status(200).end();
  }
  next();
});

app.use(cookieParser());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use("/user", publicRoute); // routes for Login,reset etc
app.use("/private", privateRoute); // private routes for dashboard,profile etc

app.use(express.static(path.join(__dirname, "dist")));
app.get("*", (req, res) => {
    res.sendFile(path.join(__dirname, "dist", "index.html"));
});

app.get("/test", (req, res) => {
  res.json({ test: true });
});

app.listen(3000, () => console.log("app started on port 3000"));

Sample API request from client

axios.get(`/[email protected]`, {
withCredentials: true,
}).then((res) => {
console.log(res.data);
})
.catch((e) => {
console.log(e);
});

What am I doing wrong here? When i tried the same setup in development environment there were no issues. I got only JSON as response. But I get HTML response in the Application hosted in VPS

I have a node js app in VPS and static files are served from dist folder (react app build files). However when i make a http request from my client, I get html as response instead of JSON

const express = require("express");
const publicRoute = require("./routes/publicRoute");
const cookieParser = require("cookie-parser");
const privateRoute = require("./routes/privateRoute");
const path = require("path");
const app = express();

app.use(function (req, res, next) {
  const allowedOrigins = process.env.ALLOWED_ORIGINS.split(",");
  const NODE_ENV = process.env.NODE_ENV;

  const origin = req.headers.origin;
 if (origin && allowedOrigins.includes(origin)   ) {
    res.setHeader("Access-Control-Allow-Origin", origin);
  }

  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, PUT, DELETE, OPTIONS",
  );
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Content-Type,Authorisation,x-client-type,Accept",
  );
  res.setHeader("Access-Control-Allow-Credentials", "true");
  if (req.method === "OPTIONS") {
    return res.status(200).end();
  }
  next();
});

app.use(cookieParser());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use("/user", publicRoute); // routes for Login,reset etc
app.use("/private", privateRoute); // private routes for dashboard,profile etc

app.use(express.static(path.join(__dirname, "dist")));
app.get("*", (req, res) => {
    res.sendFile(path.join(__dirname, "dist", "index.html"));
});

app.get("/test", (req, res) => {
  res.json({ test: true });
});

app.listen(3000, () => console.log("app started on port 3000"));

Sample API request from client

axios.get(`https://example./[email protected]`, {
withCredentials: true,
}).then((res) => {
console.log(res.data);
})
.catch((e) => {
console.log(e);
});

What am I doing wrong here? When i tried the same setup in development environment there were no issues. I got only JSON as response. But I get HTML response in the Application hosted in VPS

• javascript
• reactjs
• node.js
• json
• express

• 1 The * route matches before the test route. See Order of router precedence in express.js – Guy Incognito Commented Nov 20, 2024 at 9:41
• @GuyIncognito Yeah i followed the same steps as per link.. i moved the app.get(/test) before serving static files. Still having same issue. The private and public routes dont work also – adithyan sivaraman Commented Nov 20, 2024 at 10:10

1 Answer 1

Your app.get("*") handler should be placed after all your other route definitions like so:

app.use("/user", publicRoute);
app.use("/private", privateRoute);

app.get("/test", (req, res) => {
  res.json({ test: true });
});

app.use(express.static(path.join(__dirname, "dist")));

app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "dist", "index.html"));
});