Search code examples
node.jsreactjsherokustatic-files

Problem serving static files with Node.js, sometimes files is found, sometimes not, how to solve it?

I made a React project with create-react-app with Node.js as backend. Im serving the static files with Node.js.

I have tried to figure it out couple of hours. When i run in docker and push the application to Heroku, i get this error sometimes: Error: ENOENT: no such file or directory, stat '/usr/src/app/server/build/index.html'

Thats strange ? If i click around, everything is working. Suddenly its not working and its telling me that it cant find the index.html ?

And if i go in to the page again and click around again everything is working. Why is this happening?

My code for serving static files in node.js server.js file:

// Serve static files if in production or running in docker
if ( process.env.NODE_ENV === "production" || process.env.NODE_ENV === "docker" ) {
  // Set static folder
  app.use("/", express.static("build"));

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

My folder structure:

Folder structure

And my react-routers:

import Homepage from "./pages/Homepage";
import Dashboard from "./pages/Dashboard";
import Leaderboard from "./pages/Leaderboard";
import Signup from "./pages/Signup";
import Login from "./pages/Login";
import About from "./pages/About";
import Quiz from "./pages/Quiz";
import Locked from "./containers/Locked";

import WebSocketService from "./services/WebSocketService";

// Add the redux.dispatch function to WebSocketService
WebSocketService.setDispatch(store.dispatch);

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <Switch>
        <Route exact path="/" component={Homepage} />
        <Route exact path="/signup" component={Signup} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/about" component={About} />
        {/* Locked */}
        <Locked>
          <Route exact path="/leaderboard" component={Leaderboard} />
          <Route exact path="/dashboard" component={Dashboard} />
          <Route exact path="/play/:quizId" component={Quiz} />
        </Locked>
        {/* 404 */}
        <Redirect to="/" />
      </Switch>
    </Router>
  </Provider>,
  document.getElementById("root")
);

In development mode everything is working fine, but in production i get these problems. When i refresh page in development mode, im still on the page. If i refresh in production mode, i also get the same error: Error: ENOENT: no such file or directory, stat '/usr/src/app/server/build/index.html'

Is there any tweak i can do to avoid it ? Thanx for help!

Solution

  • I solved the problem.

    New code for serving static files.

    // Serve static files if in production or running in docker
if ( process.env.NODE_ENV === "production" || process.env.NODE_ENV === "docker" ) {
  // Set static folder
  app.use(express.static(path.join(__dirname, '../build')));

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