Heroku ENOENT: no such file or directory, stat '/app/build/index.html'

Question

I'm having trouble running a simple test site in Heroku. For some reason it's trying to serve the content from /app/build/ when I want it to serve from /build/.

Error: ENOENT: no such file or directory, stat '/app/build/index.html'

I read here not to use __dirname in the express app as Heroku set it to /app and that I should use process.cwd();

process.env.PWD = process.cwd();

But it didn't work. Below is my server.js express app and folder structure

const path = require('path');
const express = require('express');
const port = process.env.PORT || 8080;
const app = express();

process.env.PWD = process.cwd();

app.use(express.static(process.env.PWD + '/build'));

app.get('*', function (req, res) {
  const index = path.join(process.env.PWD, '/build/index.html');
  res.sendFile(index);
});

app.listen(port);
console.log('server_started');

Answer 1

First, don't use PWD. Just use __dirname. It works on Heroku exactly as it works anywhere else. Using PWD makes your app more brittle if you, for instance, execute a binary from a non-local directory.

Second, the reason that file doesn't exist on Heroku is likely because you've added it to your .gitignore file or generally haven't checked it into git. You can see this from the color coding of your editor - all of the files checked into git are white, the ones ignored are gray (like the node_modules directory and build/bundle). Your index file is red (not white like the checked-in files). So when you git push heroku master, those files you're referencing don't exist.

Finally, the reason ENOENT says /app/build is just because your root/home directory on Heroku is /app. Never build apps that are locked into an absolute file structure; just use relative paths (otherwise, your app will break if you even move it to another directory on your local machine).

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