1

Please see edits below Please put me out of my misery here. I've spent hours looking through docs and trying different approaches found on this site. I am getting this error when heroku tries to build after pulling code from github:

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

I have my client code in root and my express server code in /server.
Node is being started from the root package.json (e.g. node server/index.js).
If I bash into heroku I can see the /build/index.html file.

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

EDIT

Something else that is curious. If I set the path like so I can browse my images in /build folder on localhost:5000 (same path off of root) but I still get the same error in prod.

app.use(express.static(path.join(__dirname, '/../build')));

enter image description here

EDIT 2:
It turns out that I needed to add a static reference to 'public'. Argh!
I can now see index and anything else in the build directory working.
However, there is no reference to the static/js files that are created during the build and thus the page is empty. I can see them on the server in bash prompt.

app.use(express.static(path.join(__dirname, '..', 'build')));
app.use(express.static('public'));

app.use((req, res, next) => {
  res.sendFile(path.join(__dirname, '..', 'build', 'index.html'));
});
AdamCodes716
  • 155
  • 2
  • 11
  • Is this similiar to the problem in https://stackoverflow.com/a/39535945/7306148 – Rohit Khanna Jan 21 '21 at 18:04
  • Thanks for the response! No, in that post the issue was that the dev was doing a local build and a command line push and was missing a folder because of an issue with .gitignore. I am having heroku do the build. – AdamCodes716 Jan 21 '21 at 18:27
  • `ENOENT` makes it sound like your paths are incorrect. What's the directory that the app on `Heroku` is being served from? What if you do something like `path.join(__dirname, "./build/index.html")`? – goto Jan 21 '21 at 20:31
  • @goto1 Thank you so much for the response. The app is being served from app/build (unlike "server", the client code is not a level down) and this code is in app/server. __dirname affirms that the current directory at run time is app/server. res.sendFile(path.join(__dirname, './build/index.html')); I tried this and got this error: Error: ENOENT: no such file or directory, stat '/app/server/build/index.html'. – AdamCodes716 Jan 21 '21 at 21:08
  • @AdamCodes716 if I am understanding correctly, your client-side code is under `app/build` and your server-side code is under `app/server`, so you should go up a directory, like so: `path.join(__dirname, "../build/index.html")` – goto Jan 21 '21 at 21:19
  • Thanks again @goto1. Same result: Error: ENOENT: no such file or directory, stat '/app/build/index.html'. Once again it works just fine it localhost:5000 while pointing to build path. I am bashed into the prod server and I can see the build folder. I am racking my brains trying to figure out how to troubleshoot this. – AdamCodes716 Jan 21 '21 at 21:39
  • @AdamCodes716 what is the piece of code that's causing this error? Did you make sure to change `path.join(__dirname, "../build/index.html")` everywhere that's necessary? The error message should tell you the line number that's causing this error, go there and see if everything looks correct. – goto Jan 21 '21 at 21:42
  • @goto1 This is currently the only route in express and it should simply forward the request to the frontend index.html file. Once again, it doesn't seem to be finding anything in the app/build folder (I added a screen shot above) as I can't navigate to the graphics files. There isn't an application error with a line number - that's the error returned to the screen and to the node console. app.get('*', (req, res) => { res.sendFile(path.join(__dirname, '../build/index.html'))}; – AdamCodes716 Jan 21 '21 at 21:49
  • @goto1 - I just had a breakthrough - please see second edit if you are still around (and thank you!). – AdamCodes716 Jan 21 '21 at 22:11
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/227660/discussion-between-goto1-and-adamcodes716). – goto Jan 21 '21 at 22:14

2 Answers2

0

I never did find the issue so I scaled it back and had another go of it. Ultimately I don't think you even need to reference the index.html file. At the root level I have server.js. In that file I simply reference the client/build after my route files and this acts as the default for anything not found in the route:

app.use(express.static("client/build"));

AdamCodes716
  • 155
  • 2
  • 11
0

I hope this will help other people with this issue. I ran into this error this week and I solved it. In my case it has nothing to do with the client/build/index.html path. And I bet it's the same thing in your case as well.

Please bear with me and go through these points first to understand where the problem comes from:

The problem is that when you create your react app, it somehow runs a git init command automatically. You end up with 2 git folders: one for the Express backend and another for your react client folder. The result is that when you do commit your changes, those in the client folder are not being pushed to heroku.

To convince yourself that this is the case, run these commands in your terminal at the root of your project:

a) heroku run bash

b) cd into the client folder

c) ls client

if at this stage you don't see the content of your client folder, then that's what caused the problem in the first place.

Now for the remedy:

Go to your terminal and run these commands (credit goes to: Content of create-react-app is not pushed in github)

mv client subfolder_tmp
git submodule deinit client
git rm --cached client
mv subfolder_tmp client
git add client

now make changes in your client folder and then push them to heroku (git add . , git commit -m "", git push heroku master)

Let me know if this helps, I know I solved my problem this way.

omar
  • 401
  • 1
  • 7
  • 26