简体   繁体   中英

how to run react project with web pack which contains frontend and backend

I am having problem with running the project, the project is contains the frontend(react) and backend(node) how should run the frontend side for the project

{
  "version": "1.0.0",
  "description": "' open source project",
  "main": "index.js",
  "dependencies": {
    "bootstrap": "^4.5.2",
    "express": "^4.17.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "reactstrap": "^8.6.0"
  },
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/plugin-proposal-function-bind": "^7.11.5",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-react": "^7.10.4",
    "babel-loader": "^8.1.0",
    "css-loader": "^4.3.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12"
  },
  "scripts": {
    "serve": "node src/backend/main.js",
    "watch": "webpack --mode=development -d --watch",
    "build": "webpack --mode=production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": { "type": "git", "url": "" },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": { "url": "" },
  "homepage": ""
}

If you want to run frontend(React) and backend(Node) at the same time install concurrently and nodemon.

npm i concurrently 
npm install -g nodemon

then at the package.json file add concurrently to run both frontend and backend together.

"scripts": {
    "start": "node server/index.js",
    "backend": "nodemon server/index.js",
    "frontend": "npm run start --prefix client",
    "dev": "concurrently \"npm run backend\" \"npm run start --prefix client\""
  },

If you want to run only your frontend go to client folder and open your terminal and type

npm start or yarn start 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM