How to commit server and client folders separately?

Question

Please help me to know, how to commit server and client folder. I started a new project. And i want to write back-end node-js, and front-end react-js. I created 2 folders "client" for react, and "server" for node. I have two terminals for node and for react. When i want to commit, git says that i have ../client folder. But i want to commit it separately. If i'll commit it together i have to go to root folder and create third .env file, because node_modules not ignored in clients folder.

I need your help, maybe this question is easy, but for me this issue very heavy. I can't understand how can i do it.

Answer 1

Ok, from what i can understand you have 3 simple options,

Option 1: A "True" Monorepo with npm workspaces

You will need npm@7 or later.

With this option you take advantage of npm workspaces to manage dependencies for both the client and the server.

The folder structure would look something like this

my-app/
├─ node_modules/
├─ .git/
├─ client/
│  ├─ package.json
│  ├─ src/
│  │  ├─ index.js/
├─ server/
│  ├─ package.json
│  ├─ src/
│  │  ├─ index.js
├─ package.json

.git/ is the where git actually stores it's data, so it's parent folder is the repo, in this case my-app/

To use npm workspaces you would setup a package.json in the root of my-app/ like so

{
  "name": "my-app",
  "workspaces": [
    "server",
    "client"
  ]
}

npm init -w ./server -w ./client could help,

To install dependencies you can do npm i @some-org/some-package -w client, the -w flag is also respected for uninstall and ci.

Calling npm install will install dependencies for all workspaces.

You then use git as usual, and both client and server are in the same repo, just make sure to add a .gitignore in my-app/ and to track all package.json and package-lock.json files.

Option 2: Two co-located projects in a "Monorepo"

This option is simple, but can lead to complexity with things like dependencies, so is often best avoided except for small projects without inter-project dependencies.

With a folder structure like so

my-app/
├─ .git/
├─ client/
│  ├─ package.json
│  ├─ src/
│  ├─ node_modules/
├─ server/
│  ├─ package.json
│  ├─ src/
│  ├─ node_modules/

You will need to make sure you're in the right folder when installing dependencies.

Here both projects are separate, but are part of the same repo.

Option 3: Two git repos

I don't recommend this option, but this will work too.

my-app/
├─ client/
│  ├─ package.json
│  ├─ src/
│  ├─ node_modules/
│  ├─ .git/
├─ server/
│  ├─ package.json
│  ├─ src/
│  ├─ node_modules/
│  ├─ .git/

just make sure my-app/ doesn't have a .git/ folder in it's root.

ls -a will print hidden files/folders.