I can't serve subroutes when I reload the page

Hi everyone,
It’s the first time I deployed a full-stack app I created on Render and all seems to be working fine except for the fact that my routes are not found when I reload the component. I’ve got a general idea why as I did a research online but I haven’t managed to solve the problem yet.
Here’s my server file

const express = require("express");
const dotenv = require("dotenv");
const connectDB = require("./config/db");
const path = require("path");

const cors = require("cors");
const corsOptions = {
  origin: "*",
  credentials: true,
  optionSuccessStatus: 200,
};

const app = express();
app.use(cors(corsOptions));

// read variables and save them as environment variables
dotenv.config({path: "./.env"});

// Init Middleware
app.use(express.json({extended: false}));

// data from req object is added to it(middleware)
app.use(express.json());

// Define Routes
app.use("/api/data", require("./routes/data"));
app.use("/api", require("./routes/collection"));
app.use(`/api/item`, require("./routes/item"));
app.use(`/api`, require("./routes/under"));
app.use("/api/users", require("./routes/users"));
app.use("/api/auth", require("./routes/auth"));
app.use("/api/email", require("./routes/email"));
app.use("/api/basket", require("./routes/basket"));
app.use("/api/size", require("./routes/size"));
app.use("/api/wishlist", require("./routes/wishlist"));
app.use("/api/checkout", require("./routes/checkout"));
app.use("/api/payment_confirmation", require("./routes/confirmation"));

const PORT = process.env.PORT || 5000;

// Connect to Database
connectDB();

// Load React App in production
if (process.env.MODE === "production") {
  app.use(express.static(path.join(__dirname, "build")));

  app.get("*", (req, res) => res.sendFile(path.resolve(__dirname, "build", "index.html")));
} else {
  app.get("/", (req, res) => {
    res.send("Welcome to the home page");
  });
}

app.listen(PORT, () => {
  console.log(`App running on port ${PORT}`);
});

`Preformatted text````
That's my package.json and my scripts

“scripts”: {
“start”: “node app.js”,
“server”: “nodemon app.js”,
“client”: “npm start --prefix …/client”,
“client:install”: “npm install --prefix client”,
“build”: “npm install --prefix client && npm run build --prefix client”,
“dev”: “concurrently "npm run server" "npm run client"”
}Preformatted text

folder structure is project/backend-api and project/client if that makes sense. 
I get this error on the console
Error: ENOENT: no such file or directory, stat '/opt/render/project/client/build/index.html'
Although on the events log it says that build is successful so I'm not sure what the correct folder would be. 
Thanks in advance

Hi,

You’ve not said which of those commands you’re running in your Build & Start commands.

The error sounds like it’s expecting a React app to be built in client/build/ which isn’t there. Maybe the build isn’t being run?

Alan

My build command is: pm install && npm install --prefix …/client && npm run build --prefix …/client.
My start command : npm start

Those client prefixes seem to have too many dots. And if you’re going up a directory, I’m assuming you’ve also set a Root Directory?

Alan

Sorry extra dot was actually accidental. --prefix …/client && npm run build --prefix …/client.
Yes I’ve got a project folder as the root and in root directory option I used ./backend-api
These are the scripts on the front end:

"scripts": {
    "compile:sass": "node-sass src/sass/main.scss src/css/main.css -w",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

Root directory on the front end is ./client

I did it again. Two dots I meant and then client. Apologies

Ok, I’m still a litle unclear on the issue you’re trying to resolve. Are you still seeing:

Error: ENOENT: no such file or directory, stat '/opt/render/project/client/build/index.html'

The details you’ve supplied seems like it’s set up correctly.

Please could you share some more specific details of the issue you are experiencing that may help us troubleshoot it with you, e.g. specific URLs, service name/ID, reproduction steps, etc. If you don’t want to share these details on the community forum, please feel free to raise a ticket from the “Contact Support” link at the bottom of the Dashboard.

Alan

Thanks for getting back. I don’t have a problem sharing details of the service, just not sure exactly about service ID and reproduction steps. Service link though is https://ellnot-shop.onrender.com if that helps. I actually don’t get an error on the backend any more but I’m still not able to serve any of my routes when I reload any of them. It all seems to be working fine in development mode. That’s my project link https://github.com/tneos/ellnot-online

Sounds like you’re referring to client-side routing on a Static Site, you’ll need this rewrite rule, as covered in the docs: https://render.com/docs/deploy-create-react-app#using-client-side-routing

Alan

That actually worked! Probably beginners error. Thank you.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.