CODEWITHSUNDEEP
javascriptreactjsheroku
ko_ma
ko_ma

Reputation: 1021

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

My directory :

enter image description here

I try depoly to my react project in Heroku.

But, it print error message.

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

My node.js server code

server/app.js: 

import express from  'express';
import morgan from 'morgan';
import path from 'path';
import loader from './loader';

const app = express();

// server static file
app.use(express.static(path.resolve(__dirname, '../build')));

app.use('/', loader);

// exporting module
export default app;

server/loader.js : 

...
export default (req, res) => {
const filePath = path.resolve(__dirname, '../build', 'index.html');

fs.readFile(filePath, 'utf8', (err, htmlData)=>{
  if (err) {
    console.error('read error', err)
    return res.status(404).end()
  }
  const context = {}
  const markup = renderToString(
  <StaticRouter location={req.url} context={context}>
    <App/>
  </StaticRouter>
  )

  if (context.url) {
    redirect(301, context.url)
  } else {
    const Rendered = htmlData.replace('{{SSR}}', markup)
    res.send(Rendered)
  }
})

I think I have no problems, but when I try to connect, I get a 'not found' page.

How can I fix the problem?

+edit:

My package.json: 

...
"engines": {
  "node": "6.11.1"
},
"dependencies": {
  "axios": "^0.16.2",
"express": "^4.15.4",
"morgan": "^1.8.2",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-ga": "^2.2.0",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"react-scripts": "1.0.10",
"semantic-ui-css": "^2.2.12",
"semantic-ui-react": "^0.71.4"
},
"scripts": {
"start": "NODE_ENV=development ./node_modules/.bin/babel-node server",
"start:server": "NODE_ENV=development babel-node server",
"build": "react-scripts build",
"test": "mocha test",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-plugin-transform-require-ignore": "^0.1.1",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-app": "^3.0.2",
"babel-preset-stage-0": "^6.24.1",
"chai": "^4.1.1",
"mocha": "^3.5.0",
"mz": "^2.6.0",
"supertest": "^3.0.0",
"supertest-as-promised": "^4.0.2"
 }
 }

Upvotes: 0

Views: 4947

Answers (3)

Cong Li
Cong Li

Reputation: 36

sure you could generate and push the build folder, but I don't think it's the best way to build locally. you could

  1. use npm script such as 'heroku-postbuild' to handle build step when deploy(plz read https://devcenter.heroku.com/articles/nodejs-support), so it will generate the build file on the server.
  2. use CI to handle the test and build parts, but it's pretty complex and normally for large projects

Upvotes: -1

rimraf
rimraf

Reputation: 4126

You can use a CI solution for building and pushing to heroku such as circleci or travisci. This is what I do so i'm sure to get a fresh build without errors.

Pushing the build folder to github is fine as well. I'm sure someone would disagree for some reason i'm not aware of but it works just fine.

Upvotes: 1

ko_ma
ko_ma

Reputation: 1021

figured it out.
It has ' build ' in my .gitignore file.

If so, build directory will also push in github, is there any other way?

Upvotes: 2

Related Questions