How to connect VSCode Salesforce Project to GitHub ? | Getting Started with Version Control System

Hello Trailblazers,

In this post, we're going to learn how we can connect VSCode Saleforce Project to GitHub. We're going to create a new GitHub repository, commit our changes and push it to our GitHub repository. Let's Begin.

Download Git

The first step is to download and install git in your system. In order to download git, go to this link:-  https://git-scm.com/downloads and you'll see the below screen.

Git is available for Mac, Windows and Linux. Download by clicking on the button as shown in the above image and follow simple steps to install git in your system.

Initialize git in VSCode

Now, as you've installed git in your system, move on to your Salesforce Project in VSCode and click on Initialize Repository button available on the 3rd section in the left side bar as shown below:-

As you click on this button, it will automatically initialize the repository for you as shown below:-

If you want to initialize repository using command, you can just open terminal and write git init and press enter in order to initialize a new repository in the project folder. You can see in the above image, in the left sidebar, we're having all the files with an indicaton U where U means Untracked i.e. these files are currently not being tracked by git.

Commiting the files

Just to give you a brief overview:-  Git is a version control system which basically tracks all the changes that you're doing. Any new file that you create is initially Untracked. Each file in a git repository can be in one of the below state:-

1. Untracked:- When a new file is created by the user, it is untracked or we can say that this file is unknown to git.

2. Tracked / Index Added:- When we specify or tell git that this is a newly created file and you've to track this file (particularly known as staging the file), the status of the file is changed to tracked or we can say that a particular index (number) is given to the file so that it can be identified by git.

3. Committed:- When we're done with the required changes, we commit that file. Git mark that file as committed and add an entry in  it's internal changelog which has the required updates with a Commit Message.

4. Untracked / Modified:- When a previously commited file is updated, the status of the file is changed to untracked / modified. We need to stage this file again to tell git that this file is ready to be committed.

5. Tracked / Index Modified:- When a modified file is staged by the user, it's status is again changed to tracked. At this point the index of the file is modified with recent changes and the file is again ready to be committed.

The basic flow for new files will be:-

Untracked -> Index Added (Tracked) -> Committed

and for existing files that are committed before, the flow will be:-

Untracked -> Index Modified (Tracked) -> Committed

So, we've just initialized a git repository and all our files are untracked by default. The next step is to stage the files. This basically tells git that these are the files in which the changes are completed and these files are now ready to be committed.

You can manually stage each file one by one or only some of the files by clicking on the + icon after that file name as shown below:-

Once you've marked even a single file as staged, you can see the staged files under the Staged Changes heading and unstaged files under the Changes heading in VSCode as shown below:-

If you want to stage all the files at once, click on the + icon on the Changes heading as shown below:-

Once all your files are staged, the next step is to commit these files. In order to commit the files you need to specify a Commit Message. As you can see in the below image, you can specify a Commit Message in the message box in VSCode and click on the right (tick) icon to make a commit.

As you can see in the above image, I have specified a commit message as Initial Commit as it's the first time I am committing all the changes to git. You can give any commit message of your choice. Once you've committed all the files, your git changes sidebar will become empty as there is no further change made by you after the last commit.

After committing, if you do even a single change, your git bar will show you that file as Modified and you need to stage and commit that file again to mark the change as done.

As you can see in the above image, I have removed opening brace { from my setRequestMap() method and as I saved this file, it's specified as modified by the git in sidebar. After I am done with all the changes, I need to follow the same procedure as we did above to stage and commit the file. You can click on the filename in the git sidebar to review the change you've done as shown below:-

You can revert one or all the changes by clicking on the Undo icon which says (Discard Changes), on the left of the + icon for single file as shown in the above image or it'll show Discard All Changes if you see on the Changes heading.

Creating a GitHub repository

Now, we've done our first commit locally, it's time to create a new GitHub repository and push our changes here. To do that, first create an account on https://github.com/ 

After you created an account and you're logged in on github, the next step is to create a new repository. Go to the top menu bar and click on the + icon there and choose New repository as shown below:-

You'll see a new page as shown below:-

As you can see in the above image, first of  all you need to add a repository name, then you can give a description of your choice. After that you need to specify if your repository is public or private.

Public Repository:- Visible to everyone. Anyone can have a look at the code, clone your repository or submit a pull request.

Private Repository:- Visible only to you and the collaborators. You can invite people to collaborate on a private repository on github and they'll have access to this repository.

We don't need to initialize  this repository with a README as our project in VSCode already has a readme file as shown in the below image, so keep it unchecked.

Click on the Create Repository button to create a new repository as shown below:-

Once a new repository is created you'll be taken to a new screen as you can see in the below image:-

As you can see in the above image, I have a HTTPS URL automatically generated which is:- https://github.com/rahulmalhotra/ci-cd-tutorial.git

Adding origin to local repository in VSCode

Our next step is to tell VSCode git repository that it has to push the changes to this repository URL that we got from GitHub. So, we need to specify a remote server by giving this URL to our local git repo. In order to do that, open the terminal in your VSCode and execute the below command:-

git remote add origin <YOUR-REPOSITORY-URL>

As you can see in the below image, I have given my repo URL that I got from github after the git remote add origin command. This will basically tell my local git that this is the remote origin (server url with the name or alias origin) where I am going to push my code. You can also run a git remote -v  command to verify the remote URLs as shown below:-

I have also executed git status command to check the status and make sure that everything is clean and ready to be pushed.

Pushing our changes to GitHub

To push your changes, you need to execute the git push command from your terminal as shown below:-

As you can see above, as I executed git push I got a message that this branch has no upstream branch set. This message basically means that we haven't mapped our local git branch to the git branch on github server. By default, when you create a new git repo. You have a master branch automatically created. Similarly, on github when we created a new repository, a master branch is automatically created. But our next task is to tell git that you need to push our code in the local master branch to the remote master branch on github. In order to do that execute the command as specified by git in the above image which is:-

git push --set-upstream origin master

The above command will tell git to set the upstream (remote) branch as master for the current local branch which is also master by default and push the code. The shortcut for the above command is git push -u origin master where -u stands for --set-upstream

As you can see above, as I executed this command, the command asked for my github username and password that I entered and everything is pushed onto my github repository and I got a message that Branch master set up to track remote branch master from origin.

If you now go to your github repository and refresh that page, you can see that the code is pushed and is available on your github repository as shown below:-

Note:- Any empty folders in your project are automatically not tracked by git and will not be pushed to your github repository as well.

You can also push to your github repository by using the push option in VSCode as shown below, but make sure that you've set the remote origin first which is a one time effort that we did above.

Now it's your time. Make some changes, commit them and push them again to GitHub. Explore your commits in the GitHub repository and see what information you can see from there. You can have a look at the CI/CD Tutorial github repository that I used in this tutorial by clicking here.

Tired of reading or just scrolled down, don't worry, you can watch the video too.

That's all for this tutorial everyone, If you liked it, make sure to share it in your network and let me know your feedback in the comments down below.

Happy Trailblazing..!!