Question

我正在尝试从我的React组件提供bundle.js文件，但我不确定该文件未被提供的原因。我正在使用Express并且有一个包含这些文件的项目：

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;

但是我回来时遇到错误：每当我尝试加载页面时都会出现空响应。我错过了什么，不确定在哪里。任何帮助将不胜感激。

Answer 1

通常你有一个index.html，其中包含一个div，其中所有内容都被加载。如果您想从头开始构建所有内容，请参阅以下内容http://andrewhfarmer.com/build-your-own-starter/#0-intro

或者，如果你想花更少的时间在工具上，花更多的时间做出反应，那么看看使用https://github.com/facebookincubator/create-react-app

Answer 2

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

// 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。

Express服务器不提供我的bundle.js

2 个答案: