In this blog, I will share some best practices of Version Control following Salesforce Github using which Developers will be able to reduce the number of challenges they face during their development work.
Best Practices to Version Control Salesforce code
We know that, in Salesforce or any other Software Development, the developers need to perform their work by collaborating with their team members, which means good teamwork is done. In maximum IT Industries, the development team members are from different locations and each one of them performs some specific development work (coding) from their respective ends, to contribute to the product or new feature for the product. Each of them makes some changes or modifications in the source code, which leads in facing some challenges.
Let’s explain it with an example. Suppose an IT Company has assigned a new task to a team consisting of five skilled developers of them and they have to work on implementing a new feature in Salesforce. So, the team members decided to share their tasks and started working in the Development Org. Now, one of the team members has implemented a feature and pushed a package to the Development Org, which is repeated by another member of the team. This results in overriding each other’s changes, since there is no merge process.
So, to avoid this kind of problem, Developers should follow a Version Control System which will help them to work efficiently and keep their code in sync.
Addy Digital Uses Github
.Developers' favourite Code Hosting Platform for Version Control and Collaboration
About Version Control System & Salesforce Scratch Orgs
A Version Control System contains a group of software tools that help in recording changes made to files by keeping track of modifications done in the code. There are many free and high-quality version control systems and one of them is Git, which I would recommend using. So at first, we need to perform some pre-requisite actions, and then learn how to connect VS Code with GitHub, push code from VS Code to GitHub for version control, and Deploy Code from VS Code to Salesforce Org.
Let’s get started by using this fantastic process of Version Control. I would recommend using a Salesforce Scratch Org for this purpose, so let’s learn a little about it.
Scratch org is a source-driven and disposable deployment of Salesforce code and metadata, which helps in productivity and collaboration during deployment. It is configurable and allows developers to reproduce different Salesforce editions with different features and preferences.
Another best thing about Scratch Org is that its configuration file can be shared with other team members so that all the members can have the same basic Org to perform the development. Developers can also install packages and deploy dummy data for testing since it should never contain personal data.
You can use the CLI or IDE to open your scratch org in a browser without logging in. .
You need to sign up for a new scratch org when you want to:
Pre-requisite for Version Control System
A Visual Studio Code (also called VS Code) is a source code editor which is suitable for operating systems – Windows, Linux, and macOS. It is an Integrated Development Environment, IDE, consisting of support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git. Users can change the theme, keyboard shortcuts, preferences, and install extensions that add additional functionality.
[Install VS Code from here – https://code.visualstudio.com/ ]
To make the Visual Studio Code ready for Salesforce, you need to install some key extensions. These are mentioned in the next List Items.
Salesforce CLI is a command-line interface that simplifies development and builds automation when working with your Salesforce Org. You can use it to create or connect to environments for development and testing, synchronise metadata and code between your organs and a version control system, create and manage orgs, create and install packages, and more. You can install the CLI from this link – https://developer.salesforce.com/tools/sfdxcli and to verify whether it is installed properly or not, and check if it is the latest version, run the code from the command line: sfdx update and the output should be like – sfdx-cli: Updating CLI…
The extension pack will install these Salesforce extensions It contains tools for developing on the Salesforce platform in the lightweight, extensible VS Code editor. This pack will install these extensions –
Integration in the activity bar for Apex tests and Replay Debugger.
This extension (salesforce dx-vscode-core) interacts with Salesforce CLI to provide core functionality.
Apex – This extension (salesforce dx-vscode-apex) uses the Apex Language Server to provide features such as syntax highlighting and code completion.
Apex Interactive Debugger – This extension (salesforce dx-vscode-apex-debugger) enables VS Code to use the real-time Apex Debugger with your scratch orgs or to use ISV Customer Debugger for your subscribers’ orgs.
Apex Replay Debugger – This extension (salesforcedx-vscode-apex-replay-debugger) enables VS Code to replay Apex execution from Apex debug logs.
This extension supports Lightning web component bundles. It uses the HTML language server from VS Code.
Aura Components – This extension (salesforce dx-vscode-lightning) supports Aura component bundles. It uses the HTML language server from VS Code.
This extension (salesforce dx-vscode-visualforce) supports Visualforce pages and components. It uses the Visualforce Language Server and the HTML language server from VS Code.
This extension (salesforce dx-vscode-soql) enables you to interactively build a SOQL query via a form-based visual editor, view the query as you create it, and save the output to a .csv or .json file.
This extension (salesforce dx-vscode-slds) simplifies working with the Salesforce Lightning Design System (SLDS). It provides code completion, syntax highlighting, and validation with recommended tokens and utility classes.
You need to install version 8 or 11 of the JDK because some of the features depend upon the Java Platform in Salesforce Extensions for VS Code.
No wonder you must create a GitHub account to push your code from VS code to GitHub and install the GitHub Pull Requests and Issues extension. Using GitHub with Visual Studio Code allows you to share your source code and collaborate with others. When done, follow the below steps to push your code from VS Code to GitHub:
Open your GitHub account.
Click on the drop-down beside your profile picture at the top right corner and select Your Repository.
Click on the New button to create a new Repository, else, open an existing repository if you have one.
Enter the Repository Name and description (optional) for creating the new repository, and check the Public or Private checkbox as per your requirement.
Check the checkbox Add a README file if you want to initialize the repository with README.
Click on “Create Repository.”
Once the repository is created, copy and keep the repository’s web URL somewhere pasted, to push your code from VS Code to the GitHub repository. You will need it later in VS Code.
Open the Visual Studio Code and select the folder which you want to push. Then, click the Source Control icon and then click on Initialize Repository.
Give a commit message, press the “Ctrl + Enter” keyword, and then click on Yes, so that it starts committing. A message box will pop up asking you to select an option, select Yes.
Click on the 3 dots at the upper navigation bar, click Pull, Push and then select Push to. A message will pop up, where you need to click Add Remote and paste the URL of your GitHub Repository (you have copied earlier), and press Enter. Now, enter the name of Remote and press Enter again.
Now, click on Push To, and you will see the Remote Name followed by the URL. Select the URL that you have pasted and press Enter. After clicking on push, it will take some time to update the repository on GitHub.
If this is the first time you pushed the code, it will show a popup asking you to Log in to GitHub. Do as per it says and see that the code is successfully pushed to GitHub from Visual Studio Code. You should crosscheck for confirmation by navigating to your repository and viewing all the data.
How to Connect with Salesforce Org?
Follow the below steps for connecting VS Code with your Salesforce Org and deploy code from VS Code to Org:
Enable Dev Hub in Your Org
A dev hub is the main Salesforce org that you and your team use to create and manage your scratch orgs.
From Setup, enter Dev Hub in the Quick Find box and select Dev Hub. To enable Dev Hub, click Enable. After you enable Dev Hub, it can’t be disabled.
To create a new project in VS Code:
Open your VS Code.
Press Command + Shift + P on Mac or Ctrl + Shift + P on Windows to make the command palette appear. The new prompt should start with > Type SFDX: Create Project and press Enter to select the standard template.
Provide the project name as per your choice and press Enter. Select the location where you want to save your project (Desktop or any other folder so that you can find it easily)
Now, it should show an indication that the extension is preparing your project before populating the file explorer, so you need to wait for a while for the new Visual Studio Code window to open.
Search for your files:
After the new vs code window appears, press the Command + P key for Mac or Ctrl + P key for Windows to make the search palette appear so that you can search files.
Type project-scratch-def.json into the field and click the file, that will show up as a result, to open the file.
On the left-hand side of Visual Studio code, click the Find and Replace menu, and search for orgName, in the first result found in project-scratch-def.json.
Then, change the orgName value (after the: and in between the “”) to your Org Name.
Save the file by pressing Command + S key for Mac or Control + S key for Windows.
Authenticate with your Salesforce Org:
In the VS Code window, press the Command + Shift + P key for Mac or Ctrl + Shift + P key for Windows to make the command palette appear.
Type SFDX: Authorise an Org and press Enter to accept the default login URL.
Enter the Alias of your Org (To get it to click on the user icon of your Org and then select Settings. After that the Personal Information page appears where you will find the Alias under the Details section).
Notice that your default browser opens a new Salesforce login window. Log in to your Org using your Salesforce Org credentials.
When you are asked to grant access to the connected app, click on Allow, and close the browser window.
The command-line terminal window will display a success message when the transaction is complete.
Writing a component using VS Code and deploying the code to Salesforce Org
Let’s learn how to create a Lightning Web component. Keep going by following the procedures below:
Deploy Code to Salesforce Org:
Create your Lightning Web Component by this simple method:
In the VS Code, Press the shortcut keys as mentioned earlier to make the command palette appear. Then search for sfdx: create lightning web component and click.
Select the path in which the Lightning Web Component needs to be created. The path will be under force-app/main/default/lwc by default.
Now, enter the name of the Lightning Web Component, say myComponent, or name it as per of your choice and press Enter.
This will create your Lightning Web Component component successfully.
For confirming, check your component under the lwc folder in VS Code.
Let’s create your Lightning Web Component by Salesforce CLI:
Type the following command in the terminal for creating LWC and you should be in the project folder:
sfdx force:lightning:component:create –type lwc -n myComponent -d force-app/main/default/lwc
Create your code for LWC and save it in these formats – .html, .js, and .js-meta.xml
Now, deploy the component to your Salesforce Org:
In the VS Code, select the default folder in the project.
Then, right-click on the default folder, where you will find – SFDX: Deploy Source to org, select that.
This will deploy your code successfully and display this in the terminal – SFDX: Deploy Source to Org successfully ran
You can also deploy code by writing this command in the terminal – sfdx force:source:deploy -p force-app -u OrgNameWhichWasCreated
Open the Salesforce Org to which you have deployed the component by entering – sfdx force:org:open -u OrgNameWhichWasCreated. It will automatically open Salesforce Org in your web browser.
Syntax Guide:
–type implies which type of component you are creating. For example, –type lwc is used for lightning web components, and –type aura is used for aura components.
-n specifies the name of the component and -d specifies the directory in which we are creating the component.
-p is used to specify the path from which directory you want to deploy your code to org from VS Code and –u is used to specifying the username of the org to which you are deploying the component
Deploying Code to Scratch Org:
Authorize the Dev Hub
Before you can create a scratch org, authorize your Dev Hub org. Running this command opens a browser to the Salesforce login page. Enter your Dev Hub username and password. Authorize only once, not every time you work on your project.
In VS Code, press Command + Shift P, enter sfdx and select SFDX: Authorize a Dev Hub.
Or run this command –
sfdx force:auth:web:login -d -a LWC-Hub
LWC-Hub is an example of an alias for the Dev Hub org that you can use in other Salesforce CLI commands. Create any alias as per your choice.
Create a Default Scratch Org
In VS Code, press Command + Shift P, type sfdx, and select SFDX: Create a Default Scratch Org
Or run this command –
sfdx force:org:create -s -f config/project-scratch-def.json -a “LWC”
To create a scratch org, specify a scratch org definition file. This example uses the default scratch org definition file, project-scratch-def.json.
Let’s create a Lightning Web Component
Create it in the force-app/main/default/lwc folder. Follow the earlier process
Push Source to the Scratch Org.
Push new source code, including Lightning web components, to your scratch org for testing. Always save your code before pushing. At the time of pushing, only files that have changed are pushed.
In VS Code, press the Command + Shift P key, enter sfdx and select SFDX: Push Source to Default Scratch Org.
Or run this command – sfdx force:source:push. Pull Source from the Scratch Org
Or run this command – sfdx force:source:pull
Then, open the Scratch Org –
In VS Code, press Command + Shift P, enter sfdx and select SFDX: Open Default Scratch Org.
Or run this command – sfdx force:org:open
