javascript - 在 express 项目中添加 create-react-app 作为前端
问题描述
我有一个使用 gulp 构建的小型 React 前端的自定义 Express 项目。
我想做的是在我的项目中添加一个 create-react-app 作为第二个前端,所以我:
src/
在项目的根目录中创建了一个文件夹- 在我的项目中粘贴了
src/
create-react-app 的形式src/
- 添加
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/
文件夹中查找create-react-app
.
编辑:我的完整package.json
:
{
"name": "my project",
"version": "0.0.1",
"private": true,
"scripts": {
"build": "react-scripts build",
"start": "npm run gulp -- --production && sequelize db:migrate --config=config/migrations.json --env=production && pm2 startOrReload config/pm2/production.json",
"dev": "npm run gulp dev -- --development",
"gulp": "gulp",
"prestart": "npm install",
"startStaging": "npm install && npm run gulp -- --staging && sequelize db:migrate --config=config/migrations.json --env=staging && pm2 startOrReload config/pm2/staging.json",
"stop": "pm2 stop config/pm2/production.json",
"stopStaging": "pm2 stop config/pm2/staging.json",
"deploy": "git pull && npm start",
"deployStaging": "git pull && npm run startStaging",
},
"dependencies": {
"@babel/runtime": "7.0.0-beta.55",
"@material-ui/core": "1.4.1",
"@material-ui/icons": "2.0.0",
"@types/googlemaps": "3.30.11",
"@types/markerclustererplus": "2.1.33",
"ajv": "6.5.2",
"async": "^2.6.0",
"babel-polyfill": "^6.26.0",
"body-parser": "^1.18.2",
"bunyan": "^1.8.12",
"chance": "^1.0.12",
"chartist": "0.10.1",
"cheerio": "^0.20.0",
"classnames": "2.2.6",
"compression": "^1.7.1",
"connect-flash": "^0.1.1",
"continuation-local-storage": "^3.2.1",
"cookie-parser": "^1.3.3",
"csv-parse": "^2.2.0",
"del": "^2.2.2",
"express": "^4.16.2",
"express-brute": "^1.0.1",
"express-brute-redis": "0.0.1",
"express-jwt": "^3.4.0",
"geolib": "^2.0.24",
"glob": "^6.0.4",
"helmet": "^2.3.0",
"inky": "^1.3.7",
"js-cookie": "^2.2.0",
"jsonwebtoken": "^7.4.3",
"juice": "^2.0.0",
"lodash": "^4.17.4",
"material-ui": "^0.19.3",
"method-override": "^2.3.10",
"minimist": "^1.2.0",
"moment": "^2.19.3",
"moment-timezone": "^0.5.14",
"morgan": "^1.9.0",
"multi-glob": "^1.0.1",
"mysql": "^2.15.0",
"node-fetch": "^2.1.2",
"node-sass": "^3.13.1",
"node-schedule": "^1.2.5",
"nunjucks": "^2.5.2",
"perfect-scrollbar": "1.4.0",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-chartist": "0.13.1",
"react-dom": "16.4.1",
"react-dropzone": "^4.2.3",
"react-google-maps": "9.4.5",
"react-redux": "^5.0.6",
"react-router-dom": "4.3.1",
"react-scripts": "1.1.4",
"react-swipeable-views": "0.12.15",
"redux": "^3.7.2",
"redux-thunk": "^2.3.0",
"request": "^2.83.0",
"run-sequence": "^1.2.2",
"sequelize": "^3.31.0",
"serve-favicon": "^2.4.5",
"slugify": "^1.3.0",
"uuid": "^3.1.0",
"validator": "^9.2.0",
"vinyl-buffer": "^1.0.0"
},
}
我究竟做错了什么?
解决方案
我已经创建了一个新存储库,但我仍然想create-react-app
使用 express 提供服务,所以我按照本教程在我的项目中创建了一个/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"
如果有人有任何经验,我想知道这种方法的缺点。
推荐阅读
- android - 在自定义工具栏中对齐多个视图
- php - 为什么 npm watch 什么都不做
- asp.net-web-api2 - Swagger/Swashbuckle doc:没有为 [FromUri] 参数生成参数描述
- java - 当 HasMap 增加它的大小时,它的值的索引会发生什么?
- javascript - 使用node js从mongodb下载大量数据
- exception - RxJava2 Flowable onErrorReturn 未调用
- python - 如何使用python对复杂列表进行排序?
- python - 如何从字典中仅提取某些值(python)
- python - 如何在 pex 文件中使用 ubuntu 包
- javascript - 将 JSON 转换为 ANY 类型的 TW 对象