node.jsreactjspackage.jsonconcurrently

Run Node & React Concurrently in separate folders


My app did work but I want to re-organise it so it is easier to manage. I want to move the server files from the root to their own directory.

Currently I use concurrently to load my server and client so they can run simultaneously.

When I run npm run dev I want concurrently to load the server and the client. When run the server loads, the client fails and a new folder called client gets generated in within the server directory.

My new folder structure

client
client/package.json
server
server/package.json

The previous (working) folder structure

server files in root
package.json  {for server}
/client {all client files including /client/package.json}

I am using concurrently and am trying to get it now to work. I think I need to do is change to the correct syntax in my server/package.json file but the changes have not worked.

concurrently code in my server package.json file

  "dev": "concurrently \"npm run server\" \"npm run client\"",

I get the error

] /bin/sh: ..npm: command not found
[1] ..npm run client exited with code 127

I have tried changing the line different ways but still cannot get the client to load

    "dev": "concurrently \"npm run server\" \"cd ../client && /npm run client\"",
    "dev": "concurrently \"npm run server\" \"cd ../client && /npm run client\"",

    "dev": "concurrently \"npm run server\" \"npm run ./client\"",
    "dev": "concurrently \"npm run server\" \"npm run ../client\"",
    "dev": "concurrently \"npm run server\" \"npm run //client\"",

I think it may be a simple syntax change however the fact a new directory is getting created makes me a bit more concearned. Any solutions or thoughts would be appreciated.


Solution

  • The correct code in the package.json for the server is below

    "scripts": {
        "start": "node server.js",
        "server": "nodemon server.js",
        **"client": "npm start --prefix ../client/",**
        "clientinstall": "npm install --prefix client",
        "dev": "concurrently \"npm run server\"  \"npm run client\"",
        "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client "
      },
    

    I had to put the path to the new client directory after the command. Seems obvious now I know but I was focussing on the other line.