Skip to main content

​
Choose Your Installation Method

There are three ways to install Lightning Web Components Recipes. Choose the method that best fits your needs:

Scratch Org

Recommended for developersFull development environment with source control

Unlocked Package

Easiest installationOne-click install, no local tools required

Developer Edition

Permanent environmentDeploy to a persistent org for long-term use

​
Method 1: Scratch Org Installation

Recommended for developers who want to experience both the app and the code with full source control.

​
Prerequisites

1

Set up your environment

Follow the steps in the Quick Start: Lightning Web Components Trailhead project:
  • Enable Dev Hub in your Trailhead Playground
  • Install Salesforce CLI
  • Install Visual Studio Code
  • Install the Visual Studio Code Salesforce extensions, including the Lightning Web Components extension

​
Installation Steps

1

Authorize your Dev Hub

If you haven’t already done so, authorize your hub org and provide it with an alias:
2

Clone the repository

Clone the lwc-recipes repository from GitHub:
3

Create a scratch org

Create a scratch org and provide it with an alias:
This creates a scratch org configured for the LWC Recipes app using the project scratch definition file.
4

Push the source code

Deploy the app to your scratch org:
5

Assign the permission set

Assign the recipes permission set to the default user:
6

Import sample data

Load the sample Account and Contact data:
7

Open your scratch org

Launch the scratch org in your browser:
8

Activate a theme

In Setup, under Themes and Branding, activate the Recipes Lite or Recipes Blue theme.
9

Launch the app

In App Launcher, click View All then select the LWC app.

​
Method 2: Unlocked Package Installation

Easiest installation method - No local development tools required. Perfect for quickly experiencing the app.

​
Prerequisites

​
Installation Steps

1

Log in to your org

Open and log in to your Salesforce org.
2

Install the package

Click this link to install the Recipes unlocked package:Install LWC Recipes Package
Package ID: 04tKi000000kbj6IAA (Version 65.0.0-14)
3

Select installation option

Select Install for All Users when prompted.
4

Import sample data

Import Account and Contacts data:
  1. Download the CSV file: Accounts-Contacts.csv
    • Right-click and save as Accounts-Contacts.csv
  2. In Setup, search for Data Import Wizard in the Quick Find box
  3. Click Launch Wizard
  4. Select Accounts and Contacts, then click Add New Records
  5. Drag the Accounts-Contacts.csv file to the upload area
  6. Click Next, Next, and Start Import
5

Assign permission set (if needed)

If you’re completing the Quick Start Trailhead project, this step is required. Otherwise, skip it.
  1. Go to Setup > Users > Permission Sets
  2. Click recipes
  3. Click Manage Assignments
  4. Check your user and click Add Assignments
6

Activate a theme

In Setup, under Themes and Branding, activate the Recipes Lite or Recipes Blue theme.
7

Launch the app

In App Launcher, click View All then select the LWC Recipes app.

​
Method 3: Developer Edition / Trailhead Playground

Deploy to a permanent environment using source deployment. Ideal for Trailhead badges or long-term testing.

​
Prerequisites

​
Installation Steps

1

Clone the repository

Clone the lwc-recipes repository:
2

Authorize your org

Authorize your Trailhead Playground or Developer org with an alias:
3

Deploy the app

Deploy the source code to your org:
4

Assign the permission set

Assign the recipes permission set to the default user:
5

Import sample data

Import the sample data:
6

Open your org

If your org isn’t already open, launch it:
7

Activate a theme

In Setup, under Themes and Branding, activate the Recipes Lite or Recipes Blue theme.
8

Launch the app

In App Launcher, select the LWC app.

​
Optional: Development Tools Setup

​
Code Formatting with Prettier

Prettier ensures consistent code formatting across the codebase.
  1. Install the Prettier VSCode extension
  2. The .prettierignore and .prettierrc files are included in the repository
The current Apex Prettier plugin requires Java 11 or above.

​
Code Linting with ESLint

ESLint identifies stylistic errors and erroneous constructs in JavaScript.
  1. Install the Salesforce Extension Pack for VSCode
  2. The .eslintignore file is included to exclude specific files from linting

​
Pre-commit Hooks

Set up automatic code formatting and linting before each commit:
1

Install Node.js

Install Node.js if you haven’t already.
Mac users: Verify that Xcode command line tools are installed before proceeding.
2

Install dependencies

Run npm install in the project root:
3

Use formatting commands

Prettier and ESLint now run automatically on commit. You can also run them manually:

​
Code Tours

Code Tours provide guided walkthroughs through the app code. Install the CodeTour VSCode extension to access interactive code tours.

​
Next Steps

Quick Start Guide

Learn how to explore components and start building

Component Examples

Browse the complete catalog of 123+ recipes