Express服务器不能服务我bundle.js

我想成为从我的反应的组分一个bundle.js文件，但文件为什么没有被送达我不确定。我使用Express和与这些文件的项目：Express服务器不能服务我bundle.js

project 
    /dist 
     bundle.js 
    /views 
     /home 
      index.ejs 
    /routes 
     index.js 
    app.js

在我app.js，我试图以服务bundle.js：

DIST_DIR = path.join(__dirname, 'dist') 
app.use(express.static(DIST_DIR));

我简单views/home/index.ejs样子：

<!DOCTYPE html> 
<html> 

<head> 
    <title></title> 
    <link rel='stylesheet' href='css/styles.css'/> 
</head> 

<body id="main-page"> 
    <div class="container"> 
    </div> 
    <script src="bundle.js"></script> 
</body> 

</html>

我使用终于GET的页面在我routes/index.js：

var express = require('express'); 
var router = express.Router(); 

router.get('/', function(req, res, next) { 
    res.render('home/index.ejs'); 
}); 

module.exports = router;

这是我app.js

var express = require("express"); 
    path = require("path"), 
    cookieParser = require('cookie-parser'), 
    bodyParser = require('body-parser'); 

    index = require('./routes/index'), 
    app = express(); 

    DIST_DIR = path.join(__dirname, 'dist'), 
    app.use(express.static(DIST_DIR)); 
    app.use('/', index); 
    app.set('views', path.join(__dirname, 'views')), 
    app.set('view engine', 'ejs'); 

    module.exports = app;

但我回来一个错误：空响应每当我尝试加载页面。我错过了一些东西，不确定在哪里。任何帮助，将不胜感激。

来源

2017-04-13 user7050542

以上的更新，因为我的意思是写bundle.js的代码片段，而不是index.js – user7050542

你得到这个错误_only_为'bundle.js'请求，或整个页面？错误指向'app.js'中的一个问题，但是如果没有更多信息（比如路由/路由器配置等）很难说。 – robertklep

@robertklep我只收到bundle.js请求的错误。否则整个页面加载正常。我已经添加了我的app.js以获取更多上下文。 – user7050542

通常你有一个index.html包含这里的一切获取加载一个div。如果你想建立一切从头看到类似下面http://andrewhfarmer.com/build-your-own-starter/#0-intro

或者，如果你想花更少的时间工装左右，多的时候有反应，再看看使用https://github.com/facebookincubator/create-react-app

来源

2017-04-13 01:38:02 Chris

您可以使用通用这样的路由。

// src/server.js 
 

 
import path from 'path'; 
 
import { Server } from 'http'; 
 
import Express from 'express'; 
 
import React from 'react'; 
 
import { renderToString } from 'react-dom/server'; 
 
import { match, RouterContext } from 'react-router'; 
 
import routes from './routes'; 
 
import NotFoundPage from './components/NotFoundPage'; 
 

 
// initialize the server and configure support for ejs templates 
 
const app = new Express(); 
 
const server = new Server(app); 
 
app.set('view engine', 'ejs'); 
 
app.set('views', path.join(__dirname, 'views')); 
 

 
// define the folder that will be used for static assets 
 
app.use(Express.static(path.join(__dirname, 'static'))); 
 

 
// universal routing and rendering 
 
app.get('*', (req, res) => { 
 
    match(
 
    { routes, location: req.url }, 
 
    (err, redirectLocation, renderProps) => { 
 

 
     // in case of error display the error message 
 
     if (err) { 
 
     return res.status(500).send(err.message); 
 
     } 
 

 
     // in case of redirect propagate the redirect to the browser 
 
     if (redirectLocation) { 
 
     return res.redirect(302, redirectLocation.pathname + redirectLocation.search); 
 
     } 
 

 
     // generate the React markup for the current route 
 
     let markup; 
 
     if (renderProps) { 
 
     // if the current route matched we have renderProps 
 
     markup = renderToString(<RouterContext {...renderProps}/>); 
 
     } else { 
 
     // otherwise we can render a 404 page 
 
     markup = renderToString(<NotFoundPage/>); 
 
     res.status(404); 
 
     } 
 

 
     // render the index template with the embedded React markup 
 
     return res.render('index', { markup }); 
 
    } 
 
); 
 
}); 
 

 
// start the server 
 
const port = process.env.PORT || 3000; 
 
const env = process.env.NODE_ENV || 'production'; 
 
server.listen(port, err => { 
 
    if (err) { 
 
    return console.error(err); 
 
    } 
 
    console.info(`Server running on http://localhost:${port} [${env}]`); 
 
});

请通过this tutorial获取更多信息。

来源

2017-04-13 05:57:16 Tolsee

Express服务器不能服务我bundle.js

回答

相关问题