[英]How do I build react and node together?
I've encountered a slight problem.我遇到了一个小问题。 I know that I can build react-app using
npm run build
and it will create optimized build folder which I can load to production.我知道我可以使用
npm run build
来构建 react-app,它将创建优化的构建文件夹,我可以将其加载到生产环境中。 But some days ago I started to use node.js
with my react
application.但是几天前,我开始在我的
react
应用程序中使用node.js
。 I am confused now - how should I build such an app now?我现在很困惑 - 我现在应该如何构建这样的应用程序?
My folders structure:我的文件夹结构:
my-app-|
|-client-|
| |-package.json // root react package file
|
|
|- server.js // node.js (express) root file
|- package.json // root node package file
EDIT 1编辑 1
> server@1.0.0 build C:\Users\Horseman.mini\PhpstormProjects\landing
> npm run build && cd ./client && npm run build
> server@1.0.0 build C:\Users\Horseman.mini\PhpstormProjects\landing
> npm run build && cd ./client && npm run build
> server@1.0.0 build C:\Users\Horseman.mini\PhpstormProjects\landing
> npm run build && cd ./client && npm run build
> server@1.0.0 build C:\Users\Horseman.mini\PhpstormProjects\landing
> npm run build && cd ./client && npm run build
'npm' is not recognized as internal or external command, operable program or batch file
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! server@1.0.0 build: `npm run build && cd ./client && npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the server@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Horseman.mini\AppData\Roaming\npm-cache\_logs\2021-02-22T14_49_23_308Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! server@1.0.0 build: `npm run build && cd ./client && npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the server@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Horseman.mini\AppData\Roaming\npm-cache\_logs\2021-02-22T14_49_23_345Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! server@1.0.0 build: `npm run build && cd ./client && npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the server@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
PS npm --version
returns 6.14.10
PS
npm --version
返回6.14.10
If I go to client folder and build it will build, but without server side如果我 go 到客户端文件夹并构建它将构建,但没有服务器端
You can now delegate the responsibility of serving your frontend build folder to the server.js
ie the server only.您现在可以将提供前端构建文件夹的责任委托给
server.js
,即仅服务器。 The simplest thing could be using express.static
to serve the frontend like so:-最简单的事情可能是使用
express.static
像这样为前端提供服务:-
app.use(express.static(path.join(__dirname, "./dist")));
where app
is the instance of your express
server.其中
app
是您的express
服务器的实例。
where ./dist
is the relative path to your root folder so something like my-app/dist
where you place your build files.其中
./dist
是根文件夹的相对路径,因此类似于my-app/dist
放置构建文件的位置。 Again it's totally upto you what name you want to use.同样,您要使用什么名称完全取决于您。 Essentially all the static files ie js,css and html will be part of this
dist
folder and will be served to the user when he/she hits the base path.基本上所有 static 文件,即js、css 和 html都将成为此
dist
文件夹的一部分,并将在用户点击基本路径时提供给用户。 Since both frontend and backend would be available from the same server, there would not be any need to handle CORS scenarios as well unless well it's absolutely required by your implementation.由于前端和后端都可从同一服务器获得,因此无需处理CORS场景,除非您的实现绝对需要它。
Using parent folder with package.json
and put your respective build commands in that.将父文件夹与
package.json
一起使用,并将您各自的构建命令放入其中。
my-app-|
|-client-|
| |-package.json // root react package file
|
|
|- server.js // node.js (express) root file
|- package.json // root node package file ---> add build command for front and back here.
Your root package.json
can have following command.您的根
package.json
可以具有以下命令。
{
"build": "npm run build && cd ./client && npm run build"
}
This will build your backend first and then frontend, if you want both command to run simultaneously then you can use package like concurrently .这将首先构建您的后端,然后构建前端,如果您希望两个命令同时运行,那么您可以同时使用package 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.