2016-02-19 3 views
1

Я создаю приложение Express с использованием React. Я запускаю свой сервер, перехожу к localhost и вижу пустую страницу, когда я проверяю инструменты разработчика на chrome, это показывает мне, что мой js-файл является простым HTML. Почему это?Экспресс-приложение не отображает мои реактивные компоненты

Это мой server.js:

var express = require('express'); 

var app = express(); 
var port = process.env.NODE_ENV || 3000; 

app.get('*', function(req, res) { 
    res.sendFile(__dirname + '/public/views/index.html'); 
}); 

app.listen(port, function() { 
    console.log('Listening to http://localhost:' + port); 
}); 

Это мой app.js:

var React = require('react'), 
    ReactDOM = require('react-dom'); 

var App = React.createClass({displayName: "App", 
    render() { 
     return (
      React.createElement("h1", null, "Hello World!!!!!") 
     ) 
    } 
}); 

ReactDOM.render(React.createElement(App, null), document.getElementById('main-app')); 

Мои index.html:

<body> 
    <div id="main-app"></div> 
</body> 
<script src="public/assets/dist/javascripts/app.js"></script> 

Это то, что я вижу на инструменты разработчика: image

ответ

2

Проблема в том, что в любом файле, который вы запрашиваете на своем сервере, вы всегда возвращаете index.html.

Итак, когда вы идете в http://localhost:3000/ вы получите index.html

Проблема заключается в том, что ваш index.html запрашивает public/assets/dist/javascripts/app.js но вы все равно вернуться index.html, как если бы это было app.js.

Необходимо обновить маршрут, чтобы он возвращал искомый файл.

Я думаю, что добавление этого в ваш server.js может исправить его.

app.use(express.static(__dirname + '/public')); 

Вместо

app.get('*', function(req, res) { 
    res.sendFile(__dirname + '/public/views/index.html'); 
}); 
+1

Спасибо! Это решило мою проблему, но теперь я получаю 'Can not GET/javascripts'. – corasan

Смежные вопросы