Folder structure for backend and frontend

Question

Im setting up a project with a express node.js backend and react frontend. This is my first time setting a project up with a backend and their are a few things im unsure of...

First question:

So my current folder structure is this:

--backend
   --node_modules
   --package-lock.json
   --package.json
   --server.js
   --yarn.lock
--client
   --node_modules
   --package.json
   --public
   --.gitignore
   --README.md
   --yarn.lock
   --src
      --boilerplate create-react-app files

My package.json file:
BACKEND

{
  "name": "yelp-clone-2-backend",
  "license": "MIT",
  "version": "1.0.0",
  "scripts": {
    "client": "cd client && yarn start",
    "server": "nodemon server.js",
    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
  },
  "dependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.17.1"
  },
  "devDependencies": {
    "concurrently": "^4.0.1"
  }
}

My package.json file:

FRONT-END

{
  "name": "yelp-clone-2-front-end",
  "version": "0.1.0",
  "license": "MIT",
  "private": true,
  "proxy": "http://localhost:5000/",
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I am using the command from the BACKEND package.json to combine the frontend and backend server

"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""

The problem im having is with my current folder structure when i run this command (from the /backend dir) i get

[1] /bin/sh: line 0: cd: client: No such file or directory
error Command failed with exit code 1.

But... if i move everything out of backend and into the root dir so outside of client and not in backend folder anymore, the command works and the server starts and listens on port 5000 like expected.

Why does the command only work with the backend files in the root dir and not in the backend folder like i want.

Ive tried running the following commands with everything back inside of the backend folder before starting the server with no luck:

rm -rf node_modules
yarn cache clean
yarn
yarn start

You can use `--prefix` instead of `cd`ing into the client folder: ```"client": "yarn start --prefix client",``` — Matt Carlotta, Oct 26 '21 at 19:35
What does --prefix do im not familiar with it ? and im confused why would i run "yarn start --prefix client" — Halp_am_stuck, Oct 26 '21 at 19:48
The `--prefix` command specifies the folder in which to run the command. In this case you'll want to target the `client` folder and within the client folder you'll want to run one of the scripts within your client package.json.For example, in my client package.json file I have a `dev` script, but I want to run it from the server package.json: `"client": "npm run dev --prefix client",` — Matt Carlotta, Oct 26 '21 at 22:19
If you're using concurrently, then you'd just target the above `client` script within the server package.json: `"dev": "concurrently \"npm run server\" \"npm run client\"",`. Now when I run `npm run dev` it'll load both the server and the client in a dev environment. — Matt Carlotta, Oct 26 '21 at 22:21

score 0 · Answer 1 · answered Oct 26 '21 at 19:39

For the cd command which fails to run, you need to understand that the npm command executes inside the backend folder. That means that if you want to change the directory to the client folder you need to append two dots before the folder: cd ../client. You tried to go to backend/client which is nonexistant.
To generate a git repository you need to run git init and not npm init.

Please understand how the cd command works before using it blindly as it could have some really bad results on a professional environment.

For any more questions reply to this answer and I can gladly edit it.

I'm running the npm run dev command from the /backend folder and its not working. If i understand correctly you think im running the command from someplace other than inside the backend folder? — Halp_am_stuck, Oct 26 '21 at 19:46

Folder structure for backend and frontend

1 Answers1