CODEWITHSUNDEEP
node.jsreactjsexpressdirectory-structuregit-init
Halp_am_stuck
Halp_am_stuck

Reputation: 207

Folder structure for backend and frontend

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

Upvotes: 2

Views: 4055

Answers (1)

ThatAnnoyingDev
ThatAnnoyingDev

Reputation: 1

  • 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.

Upvotes: 0

Related Questions