Combined backend and frontend on Github

#github #fullstack

We have been taught about updating separated repository, for backend, and frontend, on Github, for various reasons such as better deployment, and better control broken codes.
In some instances where you have to update both you backend and frontend on the same repository, like me, some people which first time experience might caught off guard since Github will not show the file, you and other people can't review your code, something like this:

Github probably changed its designs hence the folder might just look grayed out, or lighter color, indicating that you cannot open it on github.

So, how do you fix this issue? You will probably need to use gitignore so that Github will not interpret your files as submodule. Let's say, for my project named transmission, I have a folder called transmission, with the two subfolder for frontend and backend. Called transmission-ruby (backend), and transmission-react (frontend). Organized like this:

---tranmission
     |
     |---tranmission-ruby
     |
     |---tranmission-react

Here, both files have different languages, with node_module folders, so how does Github supposed to know which one to ignore without you telling it specifically?

The solution

On the root folder, transmission, add a .gitignore file.
And then for each gitignore lines that you do in a normal repo, add the names of your subfolder before it, like this, for my example:


# dependencies
transmission-react/node_modules
transmission-react/.pnp
transmission-react/.pnp.js
# testing
transmission-react/coverage
# production
transmission-react//build
# misc
transmission-react/.DS_Store
transmission-react/.env.local
transmission-react/.env.development.local
transmission-react/.env.test.local
transmission-react/.env.production.local
transmission-react/npm-debug.log*
transmission-react/yarn-debug.log*
transmission-react/yarn-error.log*

# Ignore bundler config.
transmission-ruby/.bundle
# Ignore all logfiles and tempfiles.
transmission-ruby/log/*
transmission-ruby/tmp/*
transmission-ruby!/log/.keep
transmission-ruby!/tmp/.keep
# Ignore uploaded files in development.
transmission-ruby/storage/*
transmission-ruby!/storage/.keep
transmission-ruby.byebug_history
# Ignore master key for decrypting credentials and more.
transmission-ruby/config/master.key

Okay, now we got the gitignore file to warn github about what to not push (since we have files such as Node Module on both subfolders), the next step is to delete the .git folder inside both of your subfolders, leave the .git folder at the root alone.
The process will be a little odd, because when command


 you won't see .git folder, but they are there, not just one but maybe many. You can google how to delete a .git folder.

Push on Github and now you will be able to open both folders.