Sharing Reusable Component in React.Js

You probably stuck with sharing reusable component through your project modules. If npm does that it’s taken me plenty of time to share the code base between modules. So git has an answer for it saying git submodules.

git submodules

You don’t need deeper knowledge in git to understand what the hell of this git modules. Don’t worry, it’s within your day to day knowledge.

Think, you know that git is distributed source version control system with origin and local setup on it. So the origin could be either bitbucket, github or any other. Then it’s down towards to repository. So what does this repository mean ? It’s a virtual code based having a URL on it. Think like it’s a folder in somewhere in the cloud. So to identify and to it’s having a name and address ( URL ).

Wait, So where is this sub modules ? Simply think that if this repository having a repository as a child. Ah? For a example, Folder inside a folder as a child to it’s parent folder. Simple right ?

So that’s what it calling as Sub Module. Bellow contains your main repository code based.

Then the sub modules inside /src

So how do to you adding sub module to your project ?

git submdoule add -b developer git@bitbucket.org:<YourCompanyWorkspace>/us.icons.git

Does this parent repository care about it ?

Yes. It’s keeping their child modules configurations inside .gitmodules file inside the repository root.

Here you see that you can configure each and every module by

1. path : where you want to clone the module
2. url : origin url ( bitbucket, github or any where )
3. branch : default branch to pull and push updates from origin

Also other configurations too.

Okay, Then how do you push and pull changes from a module

let’s get into us.style sub module.

Change your directory using cd src/us.styles

Then use

git add -a

git commit -m '<COMMIT_MESSAGE>' and

git push origin <BRANCH>

Simple right ?

So that’s right.

So how does it get by other collaborator ?

There are two ways.

If you go the root folder of your project, you can get all sub module updates by

git submodule update --remote

This would get all the sub module updates to the latest commit by their own.

or

git submodule update

But this get all the sub module updates related to main repository.

What does this difference ?

To build the project through CI or to share specific version ( tag ) of the parent repository you need to attach stable commit to it. Cause sub modules keep their own git history independently. You would find .git folder inside every sub module folder. So when publish the repository you need to attach latest commits or specific commit/branch to the parent repository.

What other benefits you get using git module concept?

1. Restrict contributor access levels. For certain modules you can set Read Only Access for some contributors and write Access or some other.
2. Minimal code conflicts. Since every sub module keep their own git history, contributors easily can work together without conflicting code based
3. Visual Code support out of the box

You can push pull checkout fetch and many others using Visual Code.

Does this support on CI ?

Yes. AWS, Azure, Jenkins support sub module out of the box.

Big Smile :) Thanks to git and the contributors for this awesome feature.

For more information please read original article

Thanks for reading and i hope you like this article. Don’t forget to read upcoming articles.