个人中心
gpt4 book ai didi

node.js - Heroku 上的空白应用程序 : express. 静态和/或 res.sendFile 问题？

转载 作者：行者123 更新时间：2023-12-03 13:32:07 25 4
gpt4 key购买 nike

我将 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

index.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>

App.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;

index.js

const store = createStore(
    rootReducer,
    composeWithDevTools(applyMiddleware(thunk))
);

ReactDOM.render(
    <BrowserRouter>
        <Provider store={store}>
            <App />
        </Provider>
    </BrowserRouter>,
    document.getElementById("root")
);
registerServiceWorker();

server.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}`));

最佳答案

您可能忽略了 .gitignore 文件中的 public 目录。

这最近发生在我身上，我设法从 .gitignore 中删除 public 目录来解决它。

关于node.js - Heroku 上的空白应用程序 : express. 静态和/或 res.sendFile 问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51552893/

25 4 0
文章推荐： javascript - 开 Jest : how to test setInterval
文章推荐： wcf - WCF数据服务-如何诊断请求错误？
文章推荐： markup - ReStructuredText 编号的标题
文章推荐： react-native - 什么是react-native中的 'layout-only view removal'优化？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com