代码之家  ›  专栏  ›  技术社区  ›  lellefood

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

  •  2
  • lellefood  · 技术社区  · 6 年前

    我有一个定制的快速项目与一个小反应前端建设与大口。

    我想做的是添加一个create react应用程序作为第二个前端 this one 在我的项目中,我:

    • 创建了 src/ 项目根目录中的文件夹
    • 粘贴 src公司/ 在我的项目中形成create react应用程序 src公司/
    • 补充 react-scripts 以及所有 create-react-app 我的依赖项 package.json
    • 安装了所有新的依赖项
    • 补充 "build": "react-scripts build", 给我的 包.json 脚本

    我想建造 创建react应用程序 在默认文件夹中 /build 并响应所有与我的API路由不匹配的请求 创建react应用程序 在routes底部使用此代码:

    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保存我的建筑前端和一些图片的文件夹,但是 反应脚本 应该看看 src公司/ 的入口点的文件夹 创建react应用程序 .

    编辑:我的全部 包.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"
      },
    } 
    

    我做错什么了?

    2 回复  |  直到 6 年前
        1
  •  1
  •   lellefood    6 年前

    我已经建立了一个新的仓库,但我仍然想为 create-react-app 所以我跟着 this tutorial 创造了一个 /client 在我的项目中文件夹并将所有 创建react应用程序 文件和文件夹及其 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"
    

    如果有人有经验的话,我想知道这种方法的缺点是什么。

        2
  •  0
  •   aprogrammer    6 年前

    首先,弹出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'),