用一个后端 Nodejs 运行两个源前端 Reactjs答案

【问题标题】：Run two source front-end Reactjs with one backend Nodejs用一个后端 Nodejs 运行两个源前端 Reactjs
【发布时间】：2020-05-03 22:24:17
【问题描述】：

我想通过 react 运行两个源客户端，分别是 client 和 client_admin

我为此创建了这样的目录：

admin
 //source reactjs (create-react-app)
client
 //source reactjs (create-react-app)
back
server.js
package.json

我是这样同时创建的：

"clientonly": "concurrently \"npm run start\" \"npm run client\" \"npm run admin\""

但由于客户端和管理员都在 PORT 3000 上运行，因此会发生冲突。

此外，我希望客户端在端口 3000 上运行：localhost:3000

但管理员将在子路径上运行：localhost:3000/admin

对这个问题有什么建议吗？谢谢

【问题讨论】：

你试过Lerna吗？ github.com/lerna/lerna
@Kalaiselvan 谢谢，但我想管理源反应
好吧，如果 admin 和 client 本质上是两个不同的项目，它们被构建到各自的 bundle 中，您可以设置节点路由以在 / 路径返回客户端的 index.html，并在/admin 路径返回管理员的index.html。

标签： node.js reactjs

【解决方案1】：

您可以将所有管理页面放在管理文件夹中，然后将所有客户端页面放在客户端文件夹中你应该在两个文件夹之外都有index.js。在这个文件中你应该管理路由，例如：

<Router basename={process.cwd()}>
            <ErrorBoundary>
                <Switch>
                    <Route
                        path={join(`${process.env.PUBLIC_URL}/admin`)}
                        render={props => <Admin {...props} />}
                    />
                    <Route
                        path={join(`${process.env.PUBLIC_URL}/:lang(en|th)?/`)}
                        render={props => <App {...props} parentFn={this.updateState} />}
                    />
                </Switch>
            </ErrorBoundary>
        </Router>

【讨论】：

index.js 如何在 react src 之外运行。管理员和客户端是不同的反应源