Lightning Tour Workshop

Let's Get Started!

Welcome to the Lightning Web Components Developer Workshop.

After completing the workshop, you will come away with hands-on experience building Lightning Web Components for Lightning Experience. The exercises will walk you through initial setup, show you how to customize Lightning pages with Lightning Web Components, introduce you to the concepts such as data bindings, talking to Salesforce, Base Lightning Components, events and much, much more.

Pre-Work: Complete Before the Workshop

Prior to the start of the workshop, you’ll need to complete the following steps:

  1. Download and install VS Code.
  2. Install the Salesforce CLI.
  3. In VS Code, install the Salesforce Extension Pack.
  4. Create a DevHub, if you don’t already have one. You can turn any Developer, Professional or Enterprise org into a DevHub. For more information, please see Enable Dev Hub in Your Org.
  5. If you want to use github, and you don’t have an account, create one and log in. Otherwise skip to Step 5.
  6. On the command line, navigate to where you would like to create the project folder.
  7. Clone the workshop repo into a folder named lwc_workshop using git clone https://github.com/garazi/lwc-workshop-master.git lwc_workshop.
  8. If you cloned the github repo, skip to Step 12.
  9. In a new browser tab, navigate to https://github.com/garazi/lwc-workshop-master.
  10. Click the Clone or download button, then click Download ZIP.
  11. Unzip the files into a directory of your choosing.
  12. Using the command line, navigate into the newly created directory.
  13. Log into your Dev Hub using: sfdx force:auth:web:login -d -a YOUR-DEV-HUB-ALIAS where YOUR-DEV-HUB-ALIAS is whatever alias you would like to give your Dev Hub.
  14. After successfully logging into your Dev Hub, you can close the browser tab/window.
  15. On the command line, create a scratch org using: sfdx force:org:create -f config/project-scratch-def.json -s -a YOUR-SCRATCH-ORG-ALIAS -d 30 -w 10 where YOUR-SCRATCH-ORG-ALIAS is whatever alias you would like to use.
  16. After the scratch org is created, launch your new org: sfdx force:org:open.
  17. In your browser, confirm that you’re new org is there.
  18. Pull from the scratch org: sfdx force:source:pull. If needed, use the -f flag to override any conflicts.
  19. Push the source to your org: sfdx force:source:push.
  20. Assign a permission set: sfdx force:user:permset:assign -n All_Access.
  21. Refresh the scratch org in your browser.
  22. Use the App Launcher App Launcher to select the Dreamhouse Lightning app.
  23. Click the Data Import tab and then click Initialize Sample Data. Depending on your screen size, the Data Import tab can be under More in the tab menu.
  24. To confirm that you are setup and ready to go, click the Properties tab. You should see a list of Properties.

Not seeing any properties? Go back to the Data Import tab and click the Initialize Sample Data button again.

Let's Get Started!