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!

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!

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

Answer 3

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

Answer 4

Delete the node_modules and push it from the root.

Answer 5

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

Answer 6

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.