使用Express设置create-react-app

时间:2017-07-26 07:26:56

标签: javascript node.js reactjs express

问题 - 在点击localhost:9000时,我无法收到邮递员的任何回复。它应该给我一个用户json返回,它只在我的路由文件中暂时。相反,它会吐出以下内容。

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="text/javascript" src="/static/js/main.ce2f0561.js"></script>
</body>

设置

使用create-react-app与express进行连接。

我的文件夹结构是

- src React app lives in this

- 服务器

- index.js

- express.js

- 控制器

- 路线

-- rs_notes.js

rs_routes.js

'use strict';



  module.exports = function(router){
     const notesController = require('../controllers/cs_notes');

    router.route('/', function(req, res, next) {
        // Comment out this line:
        //res.send('respond with a resource');

        // And insert something like this instead:
        res.json([{
            id: 1,
            username: "samsepi0l"
        }, {
            id: 2,
            username: "D0loresH4ze"
        }]);
    });
    };

express.js

 const express = require('express');
const morgan = require('morgan');
const path = require('path');

const app = express();

const router = express.Router();
// Setup logger
app.use(morgan(':remote-addr - :remote-user [:date[clf]] ":method :url HTTP/:http-version" :status :res[content-length] :response-time ms'));

// Serve static assets
app.use(express.static(path.resolve(__dirname, '..', 'build')));
require('./routes/rs_notes')(router);
// Always return the main index.html, so react-router render the route in the client
router.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html'));
});

module.exports = app;

index.js

'use strict';

const app = require('./express');

const PORT = process.env.PORT || 9000;

app.listen(PORT, () => {
    console.log(`App listening on port ${PORT}!`);
});

完整的项目链接 - https://drive.google.com/file/d/0B35OQMkRo3KcSHlkeXdWVjVjc0U/view?usp=sharing

我的疑问或怀疑是

  1. 我是否以正确的方式通过了路由器。我们曾经在这里传递app 快递4之前的方式?所以不确定这里是否有相同的结构。
  2. 我可以通过点击localhost:9000(服务器由配置的节点服务器命令运行)在浏览器中加载它,但不能在邮递员中。

1 个答案:

答案 0 :(得分:0)

我能够通过适当地学习使用路由器并在这里和那里移动一些代码来修复这个堆栈。但它仍然不适用于基本路由,即当我只做router.get('/',...)。给出相同的错误消息。所以我宁愿颠倒连接节点和反应的方法。我在媒体上发表了我的努力,原因与两个单独的帖子相同。

https://medium.com/@kushalvmahajan/i-am-about-to-tell-you-a-story-on-how-to-a-node-express-app-connected-to-react-c2fb973accf2