在node / express App的静态目录中呈现index.html

Question

I am having issue rendering index.html in my react/node/express app in production environment. My app file structure is:

 -project --app ---dist ----index.html ----main.js ----style.css --server ---server.js 

With my server/server.js looking like this:

 var express = require('express'); var bodyParser = require('body-parser'); var mongoose = require('mongoose'); var path = require('path'); require('dotenv').config(); require('dotenv').load(); var app = express(); var router = express.Router(); var cons = require('consolidate'); // view engine setup app.engine('html', cons.swig) app.get('/',function(req,res){ res.sendFile(path.join(__dirname,"../app/dist/index.html")); }); // controllers and mailers var emailController = require('./controllers/emailController'); var campaignController = require('./controllers/campaignController'); // Express request pipeline app.use(express.static(path.join(__dirname, "../app/dist"))); app.use(bodyParser.json()); app.use('/api/email', emailController); //any request in the form of /api will be handled by emailController app.use('/api/campaign', campaignController); //any request in the form of /api will be handled by emailController var theport = process.env.PORT || 7777; app.listen(theport, function(){ console.log("started listening on port " + theport); }); 

Here is my package.json

 { "name": "project_s", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \\"Error: no test specified\\" && exit 1", "start": "node server/server.js" }, "engines": { "node": "5.11.1" }, "author": "Oat Wongsajjathiti (oatlikeoatmeal.com)", "license": "ISC", "dependencies": { "body-parser": "^1.15.2", "boron": "^0.2.3", "bower": "^1.7.9", "browserify": "^13.1.0", "consolidate": "^0.14.1", "dotenv": "^2.0.0", "es6-promise": "^4.0.3", "express": "^4.14.0", "fs": "0.0.1-security", "guid": "0.0.12", "gulp": "^3.9.1", "jquery": "^3.1.1", "json2csv": "^3.7.0", "moment": "^2.15.1", "mongodb": "^2.2.10", "mongoose": "^4.6.1", "nodemailer": "^2.6.4", "nodemailer-ses-transport": "^1.4.0", "nodemon": "^1.10.2", "rc-time-picker": "^2.0.2", "react": "^15.3.2", "react-date-picker": "^5.3.28", "react-datepicker": "^0.29.0", "react-dom": "^15.3.2", "react-file-input": "^0.2.5", "react-timepicker": "^1.1.3", "reactify": "^1.1.1", "sendgrid": "^4.4.0", "sendgrid-rest": "^2.2.2", "ses": "0.0.1", "setimmediate": "^1.0.5", "swig": "^1.4.2", "underscore": "^1.8.3", "vinyl-source-stream": "^1.1.0" } } 

When running on local server its fine, but when I deploy to heroku, I get the following error:

Error: ENOENT: no such file or directory, stat '/app/app/dist/index.html' 2016-10-04T20:01:54.987024+00:00 app[web.1]: at Error (native) 2016-10-04T20:02:01.486373+00:00 heroku[router]: at=info method=GET path="/" host=tcb-project-s.herokuapp.com request_id=58797fda-0b12-4046-9390-2088d4b53b2f fwd="207.102.85.144" dyno=web.1 connect=1ms service=5ms status=404 bytes=208

I think I am doing something wrong with the routing, since my file organization is quite different from the recommended express structure, with views in its own file outside dist folder.

Answer 1

It looks like the paths you're using are messed up:

app.use(express.static(path.join(__dirname, "../app/dist")));

app.get('/',function(req,res){
  res.sendFile(path.join(__dirname,"../app/dist/index.html"));
});

Try changing these values to:

path.join(__dirname, "./dist")

path.join(__dirname,"./dist/index.html")