使用 express 服务 REACT 组件不起作用（仅呈现 html 文件）答案

【问题标题】：Serving REACT component using express is not working (just html file is rendered)使用 express 服务 REACT 组件不起作用（仅呈现 html 文件）
【发布时间】：2018-05-15 14:33:02
【问题描述】：

您好，我正在学习 MERN 堆栈，但在为我的 react 组件提供服务时遇到问题，这是 server.js 代码

const path = require('path')
const fs = require('fs')
const express = require('express')
const app = express()

app.set('view engine', 'html')
app.engine('html', function (path, options, callback) {
  fs.readFile(path, 'utf-B', callback)
})

const cors = require('cors')
app.use(cors({
  'origin': '*',
  'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
  'preflightContinue': false,
  'optionsSuccessStatus': 204
}))

const bodyParser = require('body-parser')
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: true}))

app.use(express.static(path.join(__dirname, '/build')))

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '/build'), 'index.html')
  res.end()
})

app.use('/*', (req, res) => res.status(404).send())

const isDev = true
app.use((err, req, res, next) => {
  res.status(500).json({
    error: 500,
    message: 'Internal Server Error!',
    stack: isDev
      ? err.stack
      : null
  })
})

const port = 8080
app.listen(port, () => {
  console.log('app running at localhost:' + port)
})

文件夹结构

build
  bundle.js
  index.html
client
  App.js
  index.html
  index.js
server
  server.js
webpack.config.js
package.json

在控制台中没有可见问题 - HTML 正在正确呈现，但 React 组件不可见。

这是我的 index.html 文件：

 <!doctype html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='x-ua-compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
  <meta name='author' content='Bartosz Ciach'>
  <meta name='description'
    content='Check how your habits, weather conditions and daily activities affect your life & health.'>
  <meta name='keywords' content=''>
  <link rel='icon' type='image/svg+xml' href='assets/icons/favicon.ico'>
  <title>Doctor Crohn</title>
</head>
<body>
<div id='app'></div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>

下面是我的 webpack.config.js 文件代码

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './client/index.html',
  filename: 'index.html',
  inject: 'body'
})

module.exports = {
  entry: './client/index.js',
  output: {
    path: path.join(__dirname, '/build'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './client',
    hot: true,
    port: 3000
  },
  module: {
    loaders: [
      {
        enforce: 'pre',
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'standard-loader',
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loaders: ['react-hot-loader/webpack', 'babel-loader']
      },
      {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.(png|jpg)$/,
        loaders: ['url-loader', 'img-loader']
      },
      {
        test: /\.svg$/,
        loader: 'svg-url-loader'
      }
    ]
  },
  plugins: [HtmlWebpackPluginConfig]
}

我尝试了各种方法，但不幸的是它仍然无法正常工作

【问题讨论】：

也许这可以回答你的问题：serving-static-html-into-a-react-component
1.您的 index.html 中是否有对您的 bundle.js 的引用？ 2. 使用当前的结构和服务器代码，您将无法从构建目录（您的捆绑包所在的位置）提供静态资产，只能从客户端目录提供 - 顺便说一句，这似乎是错误的，这样会更好让 Webpack 使用位于客户端目录中的 index.html 作为模板重建 index.html，并从 build 目录中提供所有内容。这可以通过html-webpack-plugin npm 模块来完成。它还将动态插入对已编译的 bundle.js 的调用，从而也解决了第 1 点。
我刚刚添加了代码sn-ps
是的，所以从您的 index.html 来看，bundle.js 文件应该与 index.html 文件位于同一目录中，根据您的文件夹结构，情况并非如此。
基本上，这里有两个选择。 1. 将 webpack 配置中的输出路径更改为 /client 而不是 /build，这通常可以与您当前的服务器配置一起使用，但总体而言并不好，因为它将生产构建直接输出到源文件夹中，或者 2. 更改您的服务器配置从/build 目录而不是/client 提供资产和index.html，并找到一种方法在构建过程中将index.html 的副本生成到/build 文件夹中（您也可以手动复制它，至少第一次看看它是否有效）。

标签： reactjs express webpack mern

【解决方案1】：

只是为了结束这个问题。

让应用程序正确呈现的最后一个障碍是修改server.js 文件中的几行以正确指向/build 目录。考虑到文件夹结构，以及/build 目录相对于server.js 文件位置的位置，更新了以下几行：

app.use(express.static(path.join(__dirname, '../build')))

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../build'), 'index.html')
  res.end()
})

【讨论】：

Jaxx 是否有机会对我遇到的问题再提出一个问题？
那太好了
@Rachomir 您仍然可以使用原始问题下方 cmets 中的聊天链接。给我留言，我很乐意提供帮助。