Post 2 – Building Your First Lightning Web Component for Salesforce Series

This will be the second of a series of posts I will be doing over the next few weeks. They will all lead up to the introduction of my new course titled, “Building Your First Lightning Web Component for Salesforce” from Pluralsight.

Setting Up Your Development Environment (in 5 somewhat easy steps)

Step 1: Signup for a Developer Org

I know you may already have one of these, but  I suggest you sign up for another one since this will be used primarily as a DevHub. You go can signup here.

The primary function of the DevHub is to create and manage scratch orgs. To enable the DevHub, go to Setup and type Dev in the Quick Find Box and go to the DevHub Page. Click the Enable button and just remember that once enabled, you cannot disable a DevHub org.

Step 2: Install the latest version of Visual Studio CodeVSCode

Even if you already have Visual Studio Code running on your machine, I suggest you to download and install this version by going here.

This is this is the IDE that Salesforce has chosen to recommend and fully support for LWC.

Step 3: Install the Salesforce CLI

The CLI, or Command Line Interface helps to simplify Salesforce development by allowing you as a developer to pretty much do everything you need to do to develop, test and deploy your code.

Be aware that unlike the rest of Salesforce,  the CLI is updated weekly.  You can download the version for your operating system here. Just remember to run the sfdx update command frequently so you know you have the latest version.

Step 4: Install the Salesforce Extension Pack for Visual Studio Code

To get this installed, you should launch Visual Studio Code and when you do,you will want to start by clicking the extensions icon on the left toolbar. If you start to type in Salesforce, you should see a list of all the Salesforce extensions. For now, you will want to click install for the Salesforce Extension Pack.

SalesforceCLI

Step 5: Install the Java Platform Standard Edition Development Kit

This can be found on the Oracle website and you will want to make sure you have installed the latest version 8 or 11 for your particular operating system. During the installation, you will need to ensure that the install points to the directories listed here for either Windows or the mac:

  • Windows: C:\Program Files\Java\jdk1.8.0_221.jdk\
  • MacOS: /Library/Java/JavaVirtualMachines/jdk1.8.0_221.jdk/Contents/Home.

Once the installation is complete you will also need to change a setting in VS Code to reflect this. You do this by going to File, Preferences and Settings. This is where you will point VS code to the right Java install. Enter apex java and select Salesforcedx-vscode-apex. Notice that the path here is not the one you installed to.

UPDATED Instructions below:

So,we will need to change this. You can do that by clicking on the input box, right below the wrong setting and then entering the correct one for your operating system. I am on Windows here. And finally you will relaunch VS Code.

After you re-launch, go to the terminal and type java -version and you should see the output like below.

SettingsJava

I know this seems like a pain, but there are some features in the Salesforce Extension pack that rely on this SDK, so it is important that you install it.

That’s it (Phew)…

See you next week, when we will be talking about composition and communication of your LWC’s.

13 Comments

  1. Hi Sara. Many thanks for this great Blog which I will follow until conclusion. When we have queries, is it best simply to communicate with you via this chat? If so, how do we send screenshots? Or, do you have a more direct correspondence e.g email of facebook? I have followed the instruction and have V.S Code installed but am getting runtime faults. Please can you advise?

  2. Hi Sara. Many thanks for this great Blog which I will follow until conclusion. When we have queries, is it best simply to communicate with you via this chat? If so, how do we send screenshots? Or, do you have a more direct correspondence e.g email of facebook? I have followed the instruction and have V.S Code installed but am getting runtime faults. Please can you advise?
    Screenshot links;
    https://drive.google.com/file/d/1iAVSkyP9jq0j51d4tNTD4XHfUCw9w7N_/view?usp=sharing
    https://drive.google.com/file/d/1XEU08w4TNbShY2SUl4FL5E3t3jeiaDCl/view?usp=sharing
    https://drive.google.com/file/d/1iJb60GOqfAanS_21P5x3Ydd5KFf952lw/view?usp=sharing

    1. Hi Federick,

      I am sorry you are having so many problems getting VS Code installed. When you installed the Java runtime, which version did you install, 8 or 11?

      I see you are doing this on Windows. I actually run it all myself on a mac and was just using the Windows machine to record the course. I have never run into this particular error myself, but perhaps someone else reading this blog has and can respond with an answer. Sorry I could not offer more help.

    2. Hi Frederick.. I apologize that my original post did not have more helpful instructions. I am about to make a revision, but wanted you to be aware of this first. If you look here, https://developer.salesforce.com/tools/vscode/articles/getting-started/java-setup, you will see that you want to change the salesforcedx-vscode-apex.java.home setting to the full pathname of your Java Runtime. Do not set it to the Java executable itself.I noticed that in your screenshot of the settings, you were pointing to the bin folder. Try changing that and restarting VS Code and see if that does not resolve your problem.

      1. Hello Frederick,
        Sorry it has taken me so long to respond. I have a lot on my plate and I am still recovering (as I told you).
        I suggest that you uninstall Java 11 and just point your path in the settings to the Java8 SDK. This has worked for me.
        THanks,
        Sara

      2. Hi again Frederick,

        Ok, I looked a little closer and saw what the problem was with the Java runtime for Apex (specifically for Windows). Check the bottom of the updated post for new instructions.

        Best,
        Sara

  3. Yes, try using Java 8, but specifically, modify the settings like my updated post suggests. It was not difficult on a Mac, but on Windows it is kind of tricky and not as intuitive. Let me know if you need any other help.

  4. Hi Sara,
    I have just finished a different course on LWC where the build is all done in V.S Code and involves .htm, .js, .css, .xml files in the total component build but, on Trailhead, there is mostly modules based on the Aura Framework. Aura seems more intuitive but, as I understand, the LWC is really the future. Do you agree with this. What do you advise? If a client has not system already in place, I suppose I go with LWC?

Leave a Comment

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