How to push both the client side and server side project folders together as a one project (api + front end) on github?

Question

I have completed my project.

My stack :

Front-End UI => Reactjs
Back-End => Nodejs/Expressjs + MongoDB

And below is my project structure containing both the folders:

project_Name > client + server

project_Name is the main folder client and server are the separate folders both are inside project_Name folder. And inside client and server folder I have installed the respective npm modules (reactjs + nodejs)

My API end point is running on localhost:8000 and reactjs on localhost:5000

So now I want to add my project to github repository. I am confused how to achieve that? Do I need to push both client and server side code on separate 2 different gits?

Or

I need to upload just project_Name folder containing both side project files? But is it so then how can I do that? Since before pushing to git, the directory should have the package.json file and node_modules which will be only inside the client and server side folders.

These are the git commands to push the project I am using:

git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/vik.........git
git push -u origin main
                

But I don't know in which folder I have to initiate the repository first? Let me know the solution please . Thanks!

Charlet

You completed the project before getting it under version control? That was a really bad idea. But git doesn't care much about what exact files and folders you're tracking (and you'd usually ignore node_modules from the repo), so it's up to you whether you want to maintain one or two repos for this. – Pule

Tell me how to achieve that with one single folder? – Charlet

...run those commands in your question in that one single folder? – Pule

Answer 1

If your project that you created has it's own folder then what you would need to do is:

Root Folder: Project ./client ./server

1. Initiate .git from your ROOT FOLDER.
2. git add . (which then adds all the files)
3. git commit... And so on. Feel free to comment if you need any help!

It'll add all your files in one go, so don't worry so much and it won't push any empty folders.

There's some instances where create-react-app, will create a git repo on it's own. On your file explorer look for the hidden files, and be sure to delete that .git folder in your client before pushing your stuff, it'll throw you an error.

run NPM install on your main folder, it'll create a package.json for you. Try not to think about it so hard and take it slow.

Hopes this helps!

Highspeed

Answer 2

I think you should use this structure:

  -projectName: folder
     - frontend: folder
        - package.json
     - backend: folder
        - package.json
     - package.json

For executing the app you can use github actions:

https://docs.github.com/en/free-pro-team@latest/actions

https://github.com/features/actions

OR

You can also use services like heroku or firebase, see my project (it is just a simple project for resolving this problem you are asking for)

https://github.com/simCecca/InformationVisualizationWorldWide

The structure is:

 -projectName: folder 
     - frontend: folder 
        - package.json
     backend code
     package.json // containing the BE dependencies and the dependencies for the 
                     deploy in heroku in this case

https://dashboard.heroku.com/

I hope I responded to your question, if I'have not, please reply to this response

Il

I want this structure the first one: -projectName: folder - frontend: folder - package.json - backend: folder - package.json - package.json – Charlet

But How to develop one more package.json file for main Project folder now? I have the respective project folder's package.json inside client and server folder. – Charlet

Answer 3

Finally i found the answer after 2 hours

to push your folder in format like this:

 -projectName: folder
     - frontend: folder
        - package.json
     - backend: folder
        - package.json
     - package.json

you have to follow the following steps:

1. Open the gitbash terminal
2. first git init ouside the client and server folder
3. then delete the .git folder from client folder if you using any frontend framework like (reactJs, nextJs)
4. Then outside the client and server folder instead of using git add ., use git add ./client it removes the all node modules and only puts the json file to the github.
5. Do the same for server folder
6. remember both folders have their .gitignore file separately but you push only the outside of the both folders git to github.
7. now do regular github things like git commit -m"initial commit",git remote add origin lkdjfhgoiuehg.git , git push origin master

Then you are good to go!

Roi

Answer 4

just copy and paste the .gitignore file in both frontend and backend folder, git will not upload node_modules folder in git repository.

Mcmaster

Answer 5

I solved this problem by adding the .gitignore file in the root folder (in same level as client and server) and inside that this line: node_modules/

this will ignore node_modules of both client and server.

after that initialize git:

1. Git init
2. git add .
3. git commit -m 'commit message'
4. git push -u origin master

Now you can visit GitHub repositories and confirm there isn't node_modules folder anymore

Aynat

Answer 6

Delete the node_modules and push it from the root.

Olga

Answer 7

After creating two folders named client and backend in a root folder(suppose the name is: my-project). Now we would like to push our code to remote like this.

a) create a repo named my-project in GitHub(same name as the root folder) b)checking in the terminal of my local to check if it is in the root or not. c)from root: my-project % run all the following commands.

git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/vik.........git
git push -u origin main

d) now from the root in each folder[client and backend] create a .gitignore file and write node_modules to ignore node_modules if needed.

e)git add .
f)git commit -m 'all codes is pushed to remote'
g)git push origin main

Now all codes are in the remote. If any code is changed for example in the client.

a) cd client
b) git status
c9 git add ./ file name
d) git commit -m 'client code is pushed'
e) git push origin main

client code is now updated in remote too. Hope it would help.

Conservatism

Answer 8

I got your problem ... You just need to navigate to project_name in the terminal and then run the command git init
and then you can track and push all the files of client and server without creating separate git for client and server

Somnambulate