Deploy the Visualforce to LWC Sample App

Learning Objectives

In this project, you’ll:

• Deploy the Visualforce to LWC sample app.
  
• Explore the Visualforce to LWC sample app and its example code.
  
• Learn how five key patterns are implemented as Lightning web components.
  

Welcome, Visualforce developer! We’re glad you’re here. We wrote this project especially for you with your experience developing in Visualforce.

Visualforce to LWC Sample App

Why did we create the Visualforce to LWC sample app? Visualforce is a popular and widely adopted technology. Many developers maintain Visualforce pages, and even on some new projects, developers still opt to use Visualforce. We know that it can be daunting to transition from Visualforce to Lightning Web Components.

We created the Visualforce to LWC sample app to help you on your journey to Lightning Web Components programming. The app presents commonly used patterns in Visualforce alongside an equivalent Lightning web component. We provide the code for both implementations so you can compare them and learn how Lightning web components code differs from the Visualforce code you’re familiar with. You can even copy, paste, adapt, and experiment with the code on your own as you learn.

Some of the Visualforce concepts you’re familiar with apply to Lightning web components as well. Some do not. The Lightning Web Components for Visualforce Developers module maps Visualforce concepts to Lightning web components. It also highlights and explains the ways that developing Lightning web components is fundamentally different from developing with Visualforce. Tackle the Lightning Web Components for Visualforce Developers module before or after exploring the Visualforce to LWC sample app. They’re complementary.

About This Project

In this Quick Start project, you install a sample app from the Trailhead Sample Gallery. The sample app has examples that you can use to learn about Lightning web components. It also has code to give you a head start on developing your own Lightning web components.

If you’d like to tour the sample app gallery, see Quick Start: Tour the Sample App Gallery.

Before You Start

Before you take the steps in this hands-on project, make sure you complete Quick Start: Lightning Web Components. That badge walks you through setting up and working in your Salesforce DX development environment.

To create and develop Lightning web components, you need a set of tools we call Salesforce DX (Developer Experience). It includes the Salesforce Command Line Interface (CLI) and Visual Studio Code, which, with the Salesforce Extension Pack, is the recommended code editor for developing on the Salesforce Platform.

To clone the repository that contains the sample app, you use Git, a version control system. Follow the instructions in this step to install Git. Then follow the instructions in the sample app readme file to clone the sample app repository and deploy the sample app to your Trailhead Playground.

Create a New Trailhead Playground

For this project, you need to create a new Trailhead Playground. Scroll to the bottom of this page, click the down arrow next to Launch, and select Create a Trailhead Playground. It typically takes 3–4 minutes to create a new Trailhead Playground.

Note: Yes, we really mean a brand-new Trailhead playground! If you use an existing org or playground, you can run into problems completing the challenges.

Get Your Trailhead Playground Username and Password

Let's get started. Go to your Trailhead Playground. (If it’s not already open, scroll to the bottom of this page and click Launch.) If you see a tab in your org labeled Get Your Login Credentials, great! Skip ahead to step 1.

Otherwise, from the App Launcher (), find and open Playground Starter and follow the steps. If you don’t see the Playground Starter app, check out Find the Username and Password for Your Trailhead Playground on Salesforce Help.

1. Click the Get Your Login Credentials tab and take note of your username.
   
2. Click Reset My Password. This sends an email to the address associated with your username.
   
3. Click the link in the email.
   
4. Enter a new password, confirm it, and click Change Password.
   

Get Git Command Line

1. Install Git from https://git-scm.com/downloads. Accept all of the default installation settings.
   
2. Confirm that Git is installed. In Terminal (macOS) or Command Prompt (Windows), enter this command:
   gitThe output should be a list of git commands.
   

Deploy the App

Now that you have all of the tools installed and integrated, you use Visual Studio Code to deploy the Visualforce to LWC sample app in your Trailhead Playground.

1. Open Visual Studio Code.
   
2. Open the Command Palette: Click View | Command Palette.
   Alternatively, press Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS)
   
3. Open a terminal window: Click Terminal | New Terminal.
   This is where you enter or paste the commands provided in the following instructions.
   
4. Deploy the app to your Trailhead Playground org by following the instructions from the project readme.
   

Congratulations! You’ve successfully set up the Visualforce to LWC sample app. In the next step, you explore the app.