Question

我将一个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/

文件夹结构

/

--- server.js

--- package.json

/客户

--- App.js

--- App.css

--- index.js

--- public /

------ index.html

--- src /

------组件，商店，图像等的文件夹

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

Answer 1

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

这最近发生在我身上，我设法解决了这一问题，从public删除了.gitignore目录。

Heroku上的空白应用程序：express.static和/或res.sendFile问题？

1 个答案: