0

I am a new to Github and have created two MERN stack projects (one simple and the other more complex). However, whenever I upload either project to Github via the terminal, the code in the front-end folder (that contains all the React stuff) does not upload "properly". I can't click the client link to it.

enter image description here

When I click the First commit link in the middle of the attached image, it mentions something about large "diffs".

enter image description here

This happens to both MERN projects. I have even tried to manually drag the files (whole folder), but; too big. So this makes me think that something from React is causing this issue.

Does Github not allow React stuff inside? I have seen other projects just like mine, especially the ones that I used to teach myself, and they look almost like mine in terms of folders so that cannot be it.

To clarify, I installed React the following way:

npx create-react-app client
cd client

I then added axios, bootstrap, and react-router-dom via npm:

npm install axios bootstrap react-router-dom

There is nothing else added to it. I didn't go around pasting other files to that directory just for the LOLs. I did add concurrently via npm but this is in the main project directory (above client and server):

npm install concurrently

That is why there is that package.json file next to the client and server directories.

I thought all the node_modules caused the issue, so I then followed the advice online about adding a .gitignore file with node_modules/, however, that did not help either as can be shown by the absence of the node_modules in the first picture.

I hoped that the client files still existed in the repo and just downloading the files via cloning or zip would alleviate my worry, but I tried that and the client folder arrived empty.

Any advice is greatly appreciated. If more information is required, I will add to this.

Hugo y
  • 1,421
  • 10
  • 20
Reggie
  • 63
  • 2
  • 9
  • Cannot see the images you attached in the description. Can you tell me what exactly the error is ? Well the issue is not because of the react you might have missed something during connecting to your github. – Saif Khan Dec 12 '19 at 07:21
  • What could I have missed? I just followed the instructions for uploading my project via the terminal. Everything went through without issue except the front-end folder. It is too large by the looks of it but I do not know why. – Reggie Dec 12 '19 at 07:26
  • What error comes up while it's uploading ? – Saif Khan Dec 12 '19 at 07:27
  • I uploaded my project that has both a client and server folder. The client folder has all my react stuff. When the uploading finishes on my terminal, I check my Github repo and find everything fine except the client folder. It is not clickable like the server folder is. – Reggie Dec 12 '19 at 07:34
  • Well I found this answer ( https://stackoverflow.com/questions/35140715/directory-showing-up-as-a-grey-folder-on-github-but-not-tracking-its-content-w ). As it says there is " git cache that needed to be reset." try resetting your git cache as mentioned here. – Saif Khan Dec 12 '19 at 07:41
  • Could not make it work. I think it is because I am new to Git. The lingo is still not 100% clear. – Reggie Dec 12 '19 at 07:57
  • Okay one more thing to ask kindly check your front-end folder have .git file in it ? and also the main folder do they both have .git file ? – Saif Khan Dec 12 '19 at 08:04
  • Yes there is a .git in the main folder and front-end folder. It i created when I run the git init command. – Reggie Dec 12 '19 at 08:08
  • 1
    Delete the .git folder from both folders and reinitialize git in your main folder and follow the instruction again. The git folder should be only in your main folder. – Saif Khan Dec 12 '19 at 08:09

4 Answers4

2

You have .git folder in your front-end folder and in main folder as well delete the .git folder from both you folder and reinitialize the git into the main folder. And follow the instructions again.

Saif Khan
  • 484
  • 1
  • 7
  • 21
0

All you need to do is delete the git related file from front end part that is .git and .gitignore. If you are using vscode you won't see .git folder.You have to disable from setting to see. After deleting reinitialize and everything will work.

YoungHeart
  • 11
  • 2
0

I had the same issue as yours and I checked hidden files in the frontend file and found .git file in it and deleted it. git file should only be in the main folder.

Shukhrat Mamadaliev
  • 1
0

In 2023

When you put your client INSIDE your backend Folder, Make sure that you open your main backend folder ("the one your uploading to heroku") in your desktop. Once you have this opened in your desktop use your command to view hidden files.

On a mac it is CMD + Shift + .

Delete your git folder and your gitignore folder

Open your terminal in vscode and go to your main backend folder

run


git init

git rm --cached frontendFolderName

git add frontendFolderName

Now close your Terminal and open it back up to your root backend Folder

git init

git add .

git commit -m "AddingOurFrontend"

git push heroku master

everything should add

KingJoeffrey
  • 303
  • 5
  • 16