捆绑React/Express App进行生产 [英] Bundle React/Express App for production

问题描述

我的应用程序是使用"create-react-app"以及Express.js作为后端构建的. 我应该如何设置要用于生产的应用程序?

My app is built with "create-react-app" and also Express.js as back-end. How should I set up for the app for production?

这是Express中我的user.js文件:

Here is my user.js file from Express:

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.json(['Hello World'])
});

module.exports = router;

我在React文件夹的package.json文件中设置了代理".

I have "Proxy" setup in the package.json file in the React folder.

"proxy": "http://localhost:3001"

"create-react-app"具有用于构建的命令:

"create-react-app" has the command for build:

npm run build

如果我仅在react文件夹中运行"npm run build"，还是必须在Express文件中设置某些内容，我的应用程序是否已捆绑用于生产?

Is my app bundled for production if I just run "npm run build" in the react folder or I have to setup something in my Express files?

推荐答案

如果Express同时充当您的API和应用程序服务器，则在基本级别上，您需要设置Express来加载React应用程序的index.html当没有其他API路由被捕获时.您可以通过将sendFile()与Node的path一起使用，在所有其他API端点之后之后在Express应用程序的主文件中注册全部捕获"路由来做到这一点.

If Express acts as both your API and your application server, at a basic level you'd need to setup Express to load the index.html of the React application when no other API routes are caught. You would do this by using sendFile() along with Node's path, registering a "catch-all" route after all your other API endpoints, in the main file for your Express application.

app.use('/users', usersRouter);

app.use('*', function (request, response) {
  response.sendFile(path.resolve(__dirname, 'index.html'));
});

sendFile()中的路径需要指向React客户端/前端应用程序的index.html的位置.确切地讲，sendFile()中的内容完全取决于项目的结构.例如，如果您将React应用程序放在名为client的文件夹中，该文件夹具有由 create-react-app npm run build生成的build文件夹，则sendFile()看起来像:

The path within sendFile() needs to point to the location of the index.html of the React client/frontend applicaiton. Exactly what goes into sendFile() entirely depends on the structure of your project. If for exampple you have the React application in a folder called client which has a build folder generated by create-react-app npm run build, the sendFile() would look like:

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

// API route
app.use('/users', usersRouter);

app.use('*', function (request, response) {
  response.sendFile(path.join(__dirname, 'client', 'build', 'index.html'));
});

app.use()中的*(例如app.use('*', function (request, response));)实际上表示所有HTTP动词(GET，POST，PUT等).如果您不在API路由/路径后放置 ，它将阻止您的React客户端应用程序调用API，因为它将捕获所有请求，顺序非常重要.

The * in app.use() such as app.use('*', function (request, response)); means effectively all HTTP verbs (GET, POST, PUT, etc). If you do NOT put this after your API routes/paths, it will prevent your React client application from making calls to the API as it will catch all requests, order is very important.

然后，您只需构建React应用程序，然后运行Express应用程序.

Then you simply build the React application then run the Express application.

希望有帮助！

这篇关于捆绑React/Express App进行生产的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！