Question

我有一个自定义Express项目，该项目带有一个用gulp构建的小型React前端。

我想做的是在项目中添加一个create-react-app作为第二个前端，例如this one，所以我：

在项目的根目录中创建了一个src/文件夹
在我的项目src/中将src/形式的create-react-app粘贴到了
在我的react-scripts中添加了create-react-app和所有package.json依赖项
安装了所有新的依赖项
在我的"build": "react-scripts build",脚本中添加了package.json

我想在默认文件夹create-react-app中构建/build，并使用此索引来响应所有与我的API路由不匹配的请求，并使用构建的create-react-app的索引路线底部的代码：

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

但是运行npm run build我得到：

> node-js-scaffolder@0.0.1 build /Users/matt/dev/my-api
> react-scripts build

Could not find a required file.
Name: index.html
Searched in: /Users/matt/dev/my-api/public

我实际上有一个public/文件夹，其中gulp将我构建的前端文件和一些图像保存在一起，但是react-scripts应该在src/文件夹中查找{{1 }}。

编辑：我的完整create-react-app：

package.json

我在做什么错了？

Answer 1

我已经建立了一个新的存储库，但是我仍然想为create-react-app提供快递服务，因此我遵循了this tutorial并在我的项目中创建了一个/client文件夹，并将其放置在这里create-react-app文件和文件夹及其package.json。

我在开发模式下用于部署或午餐的脚本如下：

"client": "cd client && yarn start",
"server": "nodemon server.js",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"",
"build": "yarn && cd client && yarn && yarn build && cd ../",
"deploy": "git pull origin master && yarn build && pm2 restart server.js || pm2 start server.js"

如果有人有经验，我想知道这种方法的缺点。

Answer 2

首先，像这样弹出您的create-react-app项目：

npm run eject或yarn eject

第二，您可以从index.html

配置public folder和[react-project-dir]/config/paths.js路径

在您的情况下，我假设eject命令将在项目的根目录中创建一个文件夹，以便您可以在以下位置找到它：[project-dir]/config/paths.js

您可以更改以下参数：

... appPublic: resolveApp('public'), appHtml: resolveApp('public/index.html'),

像这样：

appPublic: resolveApp('public_react'), appHtml: resolveApp('public_react/index.html'),

将create-react-app添加为Express项目中的前端

2 个答案: