Salesforce · Visual Studio

Version Controlling using VS code

Hi all,

In this blog, I am going to explain to you how to install Visual Studio and sync code with bitbucket. By the end of this blog, you will be able to code directly in VS code and sync code with bitbucket seamlessly.

There are some prerequisites for this blog. The prerequisites are given below.

Prerequisite 

  1. Install the latest version of the VS code.
  2. Install the latest version of Salesforce CLI.
  3. Install VS code extensions. VS Code extensions to be installed are listed below
    1. Salesforce Extension pack.
    2. Salesforce CLI integration
    3. Lightning web components.
  4. Create a bitbucket account. Every account comes with 5 free user accounts.

Installing VS code :

Here I am explaining how to retrieve and deploy to an org(DEV/Sandbox/Production but not scratch org).

Step 1 :

First, open VS Code and create a project. Since we are not using scratch orgs in this blog so we need to create a project with the manifest.

To create a project with a manifest, open the command palette (press Ctrl+Shift+P on Windows or Linux, or Cmd+Shift+P on macOS) and run SFDX: Create Project with Manifest.

1 st Image a.PNG

Step 2 :

Next, we need to authorize the org you want to develop against. So to start the login process, open the command palette again and run SFDX: Authorize an Org.

2nd Image.PNG

Step 3 :

You need to select your login URL and then provide your project name. Then your browser opens and you can log in to your org.

After you finish logging in, close the browser and return to the VS Code.

3rd Image

Step 4 :

After you authorize an org, we need to retrieve your source from it.

Right-click on the manifest, in the Visual Studio Code explorer, then select SFDX: Retrieve Source in Manifest from Org.

4th Image

There are other ways of retrieving source :

  • With a manifest file open in the editor, open the command palette (press Ctrl+Shift+P on Windows or Linux, or Cmd+Shift+P on macOS) and run SFDX: Retrieve Source in Manifest from Org.
  • If a source file is open in the editor, right-click anywhere in the editing pane. Select SFDX: Retrieve This Source File from Org.

Deploy Source :

To deploy source to an org(to an org that’s not a scratch org), you can:

  • Right-click on the manifest, in the Visual Studio Code explorer or the editor, then select SFDX: Deploy Source in Manifest to Org.
  • With a manifest file open in the editor, open the command palette (press Ctrl+Shift+P on Windows or Linux, or Cmd+Shift+P on macOS) and run SFDX: Deploy Source in Manifest to Org
  • In the Visual Studio Code explorer, right-click a source file or a directory. Select SFDX: Deploy Source to Org.
  • In a source file that’s open in the editor, right-click anywhere in the editing pane. Select SFDX: Deploy This Source File to Org.
  • With a source file open in the editor, open the command palette (press Ctrl+Shift+P on Windows or Linux, or Cmd+Shift+P on macOS) and run SFDX: Deploy This Source File to Org.

5th Image

Version controlling with VS code using bitbucket

First, you need to create an account in bitbucket if you don’t have one please create an account in bitbucket.

Step 1:

We need to initialize git for your project, so open the command palette (press Ctrl+Shift+P on Windows or Linux, or Cmd+Shift+P on macOS) and run the below command

Git: Initialize Repository

6th Image

Then navigate to default in the current project and navigate to default in the current project.

Step 2:

Navigate to Terminal in VS code and navigate to default in the current project.

7th Image

Step 3:

We need to configure user email address, so from the terminal run

git config –global user.email “<userEmial address>”.

8th Image

Step 4:

We need to configure user name, so from the terminal run                        

git config –global user.name “<username>”.

9th Image

Step 5:

We need to add remote origin, this specifies the repository we need to sync with. To get the remote origin login into your Bitbucket account and navigate to your repository and click on the clone.

10 th Image

Select HTTPS from the drop-down.

11 th Image

Copy your repository URL as shown below.

12 th Image

Run command git remote add origin <url copied from butbucket>.

Step 6:

Now you need to authenticate to bitbucket account, run git remote show origin.

Now you need to authenticate to bitbucket account.

Step 7:

Now we need to pull the branches present in the repository, run git pull –rebase.

13 th Image

Step 8:

Now you need to pull from the branch you want to sync with. To do that click on 3 dots near-source control and click on the pull from and select the branch.

14 th Image

STEP 9:

 If there are any conflicts present then a number of conflicts will be displayed over the source control icon as shown below.

15 th Image

STEP 10:

 Now you need to stage the changes which you want to push to branch and if you want to stage all changes then Select All Changes as shown below. If you want to stage individual files then go to a specific file and stage that file.

Note: To stage a file is simply to prepare it finely for a commit.

STEP 11:

Now we need to commit the changes.

Commit Image

STEP 12:

Then you need to push to the specific branch you want to sync with.

push to image

Now you can see your commits in your bitbucket with commit id and version control is enabled for your development.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s