Confusion about how to add submodule in Git

I’m learning the MERN stack and have managed to make a simple application that at least connects everything. I have a main directory for Node with a folder in it called “frontend” where my React code is. When I tried to use Git to upload it in the regular way to Github, it made the “frontend” file a kind of folder that I couldn’t click on and that I couldn’t even figure out how to delete.

Anyway, I did some research and learned about submodules. I have tried follow various tutorials and posts here as well to get my desired result but am not having success. What I want is to have the GitHub repository have all of my files appear the same way they do on my computer when I run the program on my localhost, which is I guess the goal of uploading stuff to GitHub almost every time anyway.

Here are the repositories:
https://github.com/phershbe/nodeandreactwithdatabase
https://github.com/phershbe/frontend

The “nodeandreactwithdatabase” is my application, but when I built it on my computer it had a folder in it called “frontend” with contained the React code. I want that “frontend” repository to be a folder at the top level of the “nodeandreactwithdatabase” repository. Obviously this shouldn’t be that hard and there are some resources talking about it, but I haven’t been able to get it to work.

I already tried cloning the submodule. Where I’m at now is that when I try “git submodule add https://github.com/phershbe/frontend.git” I get:
“‘frontend’ already exists in the index”
and when I try “git push” I get:
“To https://github.com/phershbe/nodeandreactwithdatabase.git ! [rejected] main -> main (fetch first) error: failed to push some refs to ‘https://github.com/phershbe/nodeandreactwithdatabase.git’ hint: Updates were rejected because the remote contains work that you do hint: not have locally. This is usually caused by another repository pushing hint: to the same ref. You may want to first integrate the remote changes hint: (e.g., ‘git pull …’) before pushing again. hint: See the ‘Note about fast-forwards’ in ‘git push –help’ for details.”

I’m obviously pretty confused and lost here. How would I go step by step from the beginning the get the “frontend” repository into the “nodeandreactwithdatabase” repository as a folder?

Answer

“‘frontend’ already exists in the index”

Then remove it:

git rm -r fontend
git commit -m "remove local frontend"

Then git submodule add has a chance to work.

Finally, push, or force push if you have to (git push --force), since you are the only oe working on that repository.