CODEWITHSUNDEEP
reactjsherokuheroku-cli
askaale
askaale

Reputation: 1199

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

I have been struggling with this error for literally almost three weeks now, and it's honestly driving me crazy. I have been using Heroku to deploy my projects for over a year now, and I have never experienced any errors until I was going to release this new website of mine. You see, I currently have a mail server installed in my node project, called "index.js" while my full React project is in a folder called client.

enter image description here Now, here is what's weird. My index.js looks like this:

if (process.env.NODE_ENV === 'production') {
    app.use(express.static('client/build'));
    const path = require('path');
    app.get('*', (req, res) => {
      res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
    });
  }

But each time I push to Heroku, I get this error message in the console:

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

I have also been trying to change and modify the directories in the path, to see if anything changes. I have also looked through what feels like the whole internet regarding a potential solution for this issue, without any luck. I would be extremely grateful if someone could at least point me in the right direction of what I seem to do wrong here.

Thanks in advance.

Upvotes: 6

Views: 9793

Answers (5)

Suneel Kumar
Suneel Kumar

Reputation: 1

First you create a folder with the name of the app and put your client folder on it.

After that, yo ugo on the server.js file.

if (process.env.NODE_ENV) {
  //static folder add
app.use(express.static('app/client/build'));
app.get("*", function (req, res) {
  // res.sendFile(path.resolve('client', 'build' , 'index.html'));
  res.sendFile(path.resolve(__dirname , "app/client/build", "index.html"));
});
}

After that you change the package.json file.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "server": "nodemon server.js",
     "client": "npm start --prefix client",
     "client-install": "npm install --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "heroku-postbuild": "cd app && cd client && npm install --only=dev && npm 
     install && npm run build",
    "full-install": "npm install && npm install --prefix client"
   },

Then your problem is resolved.

Upvotes: 0

mlod_
mlod_

Reputation: 132

I had the same error but my issue was none of the above, so I decided to post it here - maybe could help someone.
I wanted to deploy my current working branch, which is not master, but when running the command git push heroku master I wasn't realizing that the branch being deployed by default was master. As I'm ahead of master by a few commits including wiring up my server.js file in a new location, heroku wasn't able to find it.
So actually my solution was as simple as running git push heroku <current-branch-name>:master instead and now everything is working fine.

Upvotes: 1

dragon
dragon

Reputation: 1264

I had the same in a project React with NodeJS and Express. In the folder where I have NodeJS files(so not in the client folder, where React is) I have in the package.json this:

"scripts": {
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "client-install": "npm install --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
  },

And in the server.js I have:

// Serve static assets in production
if (process.env.NODE_ENV === 'production') {
  // Set static folder
  app.use(express.static('client/build'));

  app.get('*', (request, response) => {
    response.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  });
}

In the same folder(NodeJS) I have a file production.js for Mongo user and pass:

module.exports = {
  mongoURI:
    'mongodb+srv://yyyyyyyyy:[email protected]/test?retryWrites=true&w=majority',
};

So in server.js I bring this file:

const db = require('./config/production').mongoURI;

and still here, connect to MongoDB, using db:

mongoose
  .connect(db, {
    useNewUrlParser: true,
    useCreateIndex: true,
    useFindAndModify: false
  })
  // use a promise to check if success
  .then(() => console.log('MongoDB Connected!'))
  .catch(error => console.log('MongoDB did not connect: ', error));

For me worked like this.

Upvotes: 0

EFH
EFH

Reputation: 441

I just ran into the same issue. You need to add a heroku-postbuild script in your package.json. I used create-react-app for my project, so if you didn't this line may differ a bit:

"heroku-postbuild": "cd client && npm install --only=dev && npm install && npm run build"

When I run npm run build, create-react-app compiles a minified index.html file in the build/ folder, so you might need to modify the command if the build file you are pointing to lies elsewhere.

My server structure is like this:

server.js
client/
  build/
  public/
    - index.html
  src/
    - index.js

I found the solution in this handy article

Upvotes: 7

dstana
dstana

Reputation: 380

Not having used Heroku, I would guess the problem is '/app/client/build/index.html'.

Is it really under /app/? Maybe you should be using a relative path like:

app/client/build/index.html

Upvotes: -4

Related Questions