ver*_*ris 6 heroku node.js express reactjs
我React + Node + Express在 Heroku 上上传了一个应用程序。该应用程序在本地运行，但在部署后显示为空白屏幕。控制台日志未显示任何错误。
这里是新手，所以请多多包涵。
我怀疑，在 server.js 中，我出错了：
if (process.env.NODE_ENV === 'production') {
// Serve any static files
app.use('client/public', express.static(path.join(__dirname, '/')));
// Handle React routing, return all requests to React app
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'client/public', 'index.html'));
});
}
我们的文件夹结构有点奇怪（我们一直在研究不同的教程）。/client/public/index.html有/client/src/index.js渲染到的 div 。App.js持有路线。我想知道是否res.sendFile真的应该发送“index.js”而不是“index.html”？我也尝试过，但页面仍然是空白的。
任何其他指针将不胜感激，因为我不确定我明白我哪里出错了。
谢谢！
项目代码可以在https://github.com/windwardpassage/ubcplanner找到
Heroku：https : //ubcplanner4.herokuapp.com/
文件夹结构
.
??? client
? ??? App.css
? ??? App.js
? ??? index.js
? ??? public
? ? ??? index.html
? ??? src
? ??? Folders of components, stores, images, etc.
??? package.json
??? server.js
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
应用程序.js
class App extends Component {
render() {
return (
<div className="App">
<MainHeader />
<div className="ui-container">
<Route path="/" exact component={ IndexPage } />
<Route path="/signup" exact component={ SignupPage } />
<Route path="/forgotpassword" exact component={ ForgotPasswordPage } />
</div>
</div>
);
}
}
export default App;
索引.js
const store = createStore(
rootReducer,
composeWithDevTools(applyMiddleware(thunk))
);
ReactDOM.render(
<BrowserRouter>
<Provider store={store}>
<App />
</Provider>
</BrowserRouter>,
document.getElementById("root")
);
registerServiceWorker();
服务器.js
const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const passport = require('passport');
const config = require('./config');
var cors = require('cors');
const port = process.env.PORT || 5000;
// connect to the database and load models
require('./server/models').connect(config.dbUri);
const app = express();
if (process.env.NODE_ENV === 'production') {
// Serve any static files
app.use('client/public', express.static(path.join(__dirname, '/')));
// Handle React routing, return all requests to React app
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'client/public', 'index.html'));
});
}
// tell the app to look for static files in these directories
//app.use(express.static('./server/static/'));
app.use(express.static('./client/dist/'));
// routes
const authRoutes = require('./server/routes/auth');
const apiRoutes = require('./server/routes/api');
app.use('/auth', authRoutes);
app.use('/api', apiRoutes);
app.use(cors());
// start the server
app.listen(port, () => console.log(`Listening on port ${port}`));
| 归档时间： |
|
| 查看次数： |
531 次 |
| 最近记录： |