Express / React應用程序可在本地運行，但不能在Heroku上運行

Question

更新資料

好的，所以我更新了Procfile將組件捆綁在一起

程序文件

web: npm run build-client && node server/index.js

但是現在，由於捆綁需要很長時間，因此我的應用需要花很長時間才能加載。 有一個更好的方法嗎？ 這是一種可怕的用戶體驗

...如果沒有別的，有沒有一種方法可以立即渲染靜態頁面，顯示：

怪赫魯庫，不是我

======原始上下文=======

我的應用程序可在heroku local和localhost:8080 ，但在部署heroku open無法呈現我的視圖。 從控制台，我收到此錯誤消息：

app.bundle.js:1 Uncaught SyntaxError: Unexpected token <

這個特定的包包含我的React組件。 我使用帶webpack的codeplit在不同時刻加載依賴項，因為我在前端使用了vr框架（aframe / three.js）並做出了反應。 我不明白為什么在本地就可以正常工作。

index.html

我已經通過index.bundle內的index.bundle /三個組件對一些JS模塊進行了代碼index.bundle 。 我所有的react組件都在app.bundle內部

<head>
  <meta charset="utf-8">
  <title>Faceoff!</title>
  <script src="./commons.js"></script>
  <script src="./index.bundle.js"></script>
  <script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.13.1/dist/aframe-extras.min.js"></script>
  <style> ... </style>
</head>

<body>
  <div id="app"></div>
  <script src="./app.bundle.js" defer></script> 
</body>

webpack.config.js

'use strict'
const webpack = require('webpack')
const path = require('path')

const extractCommons = new webpack.optimize.CommonsChunkPlugin({
  name: 'commons',
  filename: 'commons.js'
})

const config = {
  context: path.resolve(__dirname, 'client'),
  entry: {
    index: './index.js',
    app: './app.jsx'
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: '[name].bundle.js'
  },
  devtool: 'source-map',
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /jsx?$/,
        include: path.resolve(__dirname, 'client'),
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  },
  plugins: [
    extractCommons
  ]
};

module.exports = config

index.js

應用程序的服務器端代碼。 我已經看到其他人在這個一般的位置上犯了錯誤，所以我會提出充分的措施。

'use strict'
const express = require('express');
const path = require('path');
const app = express();

const production = process.env.NODE_ENV === 'production';
const port = production ? process.env.PORT : 8080;

var publicPath = path.resolve(__dirname, '../public');

app.use(express.static(publicPath));

app.use('/', (req, res, send) => {
  res.sendFile(path.resolve(__dirname, '..', 'index.html'))
})

app.listen(port, () => {
 console.log(`Virtual Reality Enabled On Port ${port}`);
});

Answer 1

如果您的npm腳本build-client構建了webpack捆綁包。 閱讀您的webpack.config.js會告訴我，這些捆綁包將位於名為public的目錄中，並且您的所有文件名都將帶有.bundle.js作為后綴。 因此，您應該將Procfile更改為web: npm run build-client && node public/index.bundle.js

Express / React應用程序可在本地運行，但不能在Heroku上運行

問題描述

1 個解決方案

解決方案1
0 已采納 2017-12-30 20:43:20

Express / React應用程序可在本地運行，但不能在Heroku上運行

問題描述

1 個解決方案

解決方案1 0 已采納 2017-12-30 20:43:20

解決方案1
0 已采納 2017-12-30 20:43:20