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

回答

相關問題