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);
});

Answer 2

dist folder is ignored. therefore heroku returns this error. When you list your application files in heroku, you can see it is missing.

How to list folder/files in heroku

1. run heroku run bash in command line inside of your app folder
2. type dir and enter. then you will see the list of folders and files

Answer 3

Check your package.json file

"postinstall": "ng build --aot --prod"

Check your server.js file

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(__dirname + '/dist/YOURPROJECTNAME'));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname + '/dist/YOURPROJECTNAME/index.html'));

});

app.listen(process.env.PORT || 8080);

Answer 4

I had the same issue but I had set everything. Heroku Post build inside my node package.json file. See below

"scripts": {
  "start": "node index.js",
  "heroku-postbuild": "cd client && npm install && npm run build"
}

• Was still getting the error Error: ENOENT: no such file or directory, stat + app/client/build/index.html'

Just found out that this was happening because in my react folder index.js file Please see below

import React from 'react';
import ReactDom from 'react-dom'
import App from './App' #importing the App.js component

ReactDom.render(<App/>, document.getElementById('root')) 
// render the react app

However I was not exporting my App.js component, hence, when I deployed to heroku the file was not being picked up.

Here is the line to export my App component

export default App;

• Hope this helps someone.