How to run Nextjs app and Express server concurrently using npm concurrently package?

0
votes

How to run Nextjs app and Express server concurrently using npm concurrently package?

I have a project which is created using Node Express as the backend and NextJs as the frontend. I want to use concurrently npm package to start both Express server and NextJs frontend using npm run dev. The server uses port 5000 and the frontend uses port 3000 And the Folder structure as follows. 1.

    |-next-bootstrap-express-app.
       |frontend(NextJs App)
            |.env
            |package.json
            |src
       |server.js
       |package.json

package.json(next-bootstrap-express-app):

   {
  "name": "next-bootstrap-express-app",
  "version": "1.0.0",
  "description": "Next Bootstrap Express App",
  "main": "server.js",
  "scripts": {
    "frontend-install": "npm install --prefix frontend",
    "start": "nodemon server.js",
    "server": "nodemon server.js",
    "frontend": "npm start --prefix frontend",
    "dev": "concurrently \"npm run server\" \"npm run frontend\""
  },
  "author": "test",
  "license": "ISC",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "config": "^3.3.6",
    "express": "^4.17.1",
    "express-validator": "^6.12.1",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^6.0.2",
    "request": "^2.88.2",
    "concurrently": "^6.2.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.12"
  }
}

How can I use concurrently npm package to start Nextjs 3000 for client and Express Server which uses port 5000 for admin.

1
node.jsexpressnpmnext.jsconcurrently

1 Answers

1
votes

In your next-bootstrap-express-app directory's packages.json file you can include your frontend script like this

"frontend": "cd ./frontend && npm run dev"

Then you can run npm run dev command from the next-bootstrap-express-app directory.