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

user_14058564 0
Viewed 4113

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!

react-fullstack reactjs node.js github git
5 Answers

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!

user_147733710

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

user_99750640

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

user_142763960

Delete the node_modules and push it from the root.

user_121109800

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

user_200018830
Related