This section covers a simple developer workflow, which we will be adapting to build Apex and Lightning Components using the Salesforce DX CLI, Visual Studio Code, and the Visual Studio Code extension pack for the Salesforce plugin.

The following is a rough diagram of one of the developer workflows that we will be following for all of the components and code in subsequent chapters:

Let's follow the preceding workflow step by step using Salesforce DX commands.

Create a Salesforce DX project in the directory you would like the project folder to be in. The following command shows a sample command:

sfdx force:project:create -n HelloWorldProject

The following screenshot shows the command-line Terminal:

Note that HelloWorldProject is the name of the project directory. Once you create the project, you will see the following file structure:

Then, follow these steps:

1. Open the project folder in Visual Studio Code.

2. Authorize the Dev Hub using Visual Studio Code. On the command palette, type SFDX:Authorize a Dev Hub. This is shown in the following screenshot. Once the command executes, enter the credentials for your Org, and once logged in, close the window:

3. Create a default scratch Org for your project. Again, this can be done from the Visual Studio Code View menu and using the command palette. On the command palette, type SFDX: Create a Default Scratch Org....
4. You will be prompted to use scratch def JSON and an alias. Note that the alias is optional. The following screenshot shows the default scratch Org creation command:

5. The next step is to create a Lightning Components and code components locally. Again, use the View option and the Command Palette to create a Lightning component bundle. Use the SFDX:Create Lightning Components:

6. Push to the scratch Org. Again, use the View option and the command palette to push code to the scratch Org. To do this, use SFDX:Pushsource to default scratch Org. Open the scratch Org using SFDX:Open Default Scratch Org.
7. You can work locally and push code to the server or work in the scratch Org directly and then you can pull back the source using SFDX:Pull source from scratch Org. Note that you can create objects, workflows, and other components directly, and force:pull will retrieve everything from the scratch Org into the local folder.

8. To experiment with this, let's open the scratch Org and use the Developer Console to edit the components:

9. Use SFDX:Pull source from default scratch Org to get the changes to the local folder.

10. The following are some of the utilities listed in the table provided by the DX plugin for VS Code to compare local and changes on the server:

11. The final step is to always make sure you synchronize the code to the Git repository. VS Code has GitHub integration built in, so it's easier to set up a repository and push source code. Note that, for this, you will need to install Git the instructions for this are documented here: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git.

12. To get started with creating your own Git repository at github.com and note the repository URL, execute the following commands in the project folder:

12. 12. 1. Initialize the Git repository:

git init

12. 12. 2. Create a .gitignore file in the root of the project with the following contents. Feel free to add more files that you do not want to commit:

.DS_Store
.sfdx
.project
.Salesforce
.settings
node_modules
.idea

12. 12. 3. Add all of the local files and commit them to the repository using the following command:

git add.

git commit -m "commit message"

12. 12. 4. Set up a stream for pushing to remote Git:

git remote add origin <reposiortyURL>

12. 12. 5. If you run into conflicts and need to overwrite, use the following command:

git pull origin master --allow-unrelated-histories
git merge origin origin/master
//Fix any conflicts if found
git add.
git commit -m "merge conflicts"
git push origin master

12. 12. 6. You will notice that VS Code has built-in support for committing changes to the Git repository. This is indicated in the following screenshot: