Skip to main content
Lightning Web Components Recipes can be deployed to various Salesforce environments. This guide covers all deployment options from development to production.

​
Project Configuration

The project uses sfdx-project.json to define package metadata: 
{
  "packageDirectories": [
    {
      "path": "force-app",
      "default": true,
      "package": "LWCRecipes",
      "versionName": "Winter '26",
      "versionNumber": "65.0.0.NEXT"
    }
  ],
  "namespace": "",
  "sourceApiVersion": "65.0",
  "sfdcLoginUrl": "https://login.salesforce.com",
  "packageAliases": {
    "LWCRecipes": "0Ho3t000000KywNCAS",
    "[email protected]": "04tKi000000LPEZIA4",
    "[email protected]": "04tKi000000kbj6IAA"
  }
}
Key configuration points:
  • Source API Version: 65.0 (Winter ‘26)
  • Package Directory: force-app/ contains all source code
  • No Namespace: Components use the default namespace

​
Deployment Options

Scratch orgs provide temporary, configurable Salesforce environments ideal for development and testing.
1

Set up your environment

Follow the Quick Start: Lightning Web Components Trailhead project to:
  • Enable Dev Hub in your Trailhead Playground
  • Install Salesforce CLI
  • Install Visual Studio Code with Salesforce extensions
2

Authorize your Dev Hub

sf org login web -d -a myhuborg
This opens a browser window for authentication. Use -d to set this as the default Dev Hub.
3

Clone the repository

git clone https://github.com/trailheadapps/lwc-recipes
cd lwc-recipes
4

Create a scratch org

sf org create scratch -d -f config/project-scratch-def.json -a lwc-recipes
The scratch org is configured with:
  • Developer Edition features
  • Lightning Experience enabled
  • Walkthroughs and user engagement features
5

Deploy the source code

sf project deploy start
This pushes all metadata from force-app/ to the scratch org.
6

Assign the permission set

sf org assign permset -n recipes
The recipes permission set grants access to custom objects and Apex classes.
7

Import sample data

sf data tree import -p ./data/data-plan.json
This imports Account and Contact records for testing components.
8

Open the scratch org

sf org open
Then:
  1. Navigate to Setup > Themes and Branding
  2. Activate the Recipes Lite or Recipes Blue theme
  3. Open the LWC app from the App Launcher

​
Scratch Org Configuration

The config/project-scratch-def.json file defines the scratch org: 
{
    "orgName": "LWC Recipes",
    "edition": "Developer",
    "hasSampleData": false,
    "features": ["Walkthroughs", "EnableSetPasswordInApi"],
    "settings": {
        "lightningExperienceSettings": {
            "enableS1DesktopEnabled": true,
            "enableLightningPreviewPref": true
        },
        "mobileSettings": {
            "enableS1EncryptedStoragePref2": false
        },
        "userEngagementSettings": {
            "enableOrchestrationInSandbox": true,
            "enableShowSalesforceUserAssist": false
        }
    }
}

​
Option 2: Unlocked Package

Unlocked packages allow anyone to install LWC Recipes without local development tools.
1

Log in to your org

Use a Developer Edition Org or Trailhead Playground.
2

Install the package

Click this link to install the latest version:Install LWC Recipes PackageSelect Install for All Users when prompted.
3

Import sample data

  1. Download the Accounts-Contacts.csv file
  2. In Setup, search for Data Import Wizard
  3. Click Launch Wizard
  4. Select Accounts and Contacts > Add New Records
  5. Upload the CSV file and click Start Import
4

Assign permission set (if needed)

For Trailhead projects:
  1. Go to Setup > Users > Permission Sets
  2. Click recipes
  3. Click Manage Assignments
  4. Add your user
5

Activate the theme

In Setup, under Themes and Branding, activate Recipes Lite or Recipes Blue.
6

Open the app

In App Launcher, select LWC Recipes.

​
Option 3: Developer Edition or Trailhead Playground

Deploy source code directly to a persistent org for long-term testing.
1

Clone the repository

git clone https://github.com/trailheadapps/lwc-recipes
cd lwc-recipes
2

Authorize your org

sf org login web -s -a mydevorg
The -s flag sets this as the default org for the project.
3

Deploy the metadata

sf project deploy start -d force-app
This deploys all components, classes, and configuration from the force-app/ directory.
4

Assign the permission set

sf org assign permset -n recipes
5

Import sample data

sf data tree import -p ./data/data-plan.json
6

Configure the org

sf org open -o mydevorg
Then activate a theme and open the LWC app as described in previous sections.

​
Deployment to Production

For production deployments, follow Salesforce best practices:
1

Run all tests

Ensure all tests pass before deployment:
npm run test:unit:coverage
2

Validate the deployment

Run a validation-only deployment to production:
sf project deploy start -d force-app -o production --test-level RunLocalTests --dry-run
3

Deploy to production

After successful validation:
sf project deploy start -d force-app -o production --test-level RunLocalTests
4

Monitor the deployment

Check deployment status:
sf project deploy report

​
Production Deployment Checklist

  • All unit tests passing with adequate coverage
  • Code reviewed and approved
  • Change set or deployment validated in sandbox
  • Deployment scheduled during maintenance window
  • Rollback plan documented
  • Permission sets assigned to appropriate users
  • Custom themes activated if needed
  • Sample data imported or production data prepared

​
Continuous Integration/Continuous Deployment

The project includes GitHub Actions workflows for automated deployment:

​
CI Workflow

The .github/workflows/ci.yml workflow runs on every push to main:
  1. Format and Lint: Verifies code formatting with Prettier
  2. Code Analysis: Runs Salesforce Code Analyzer
  3. Unit Tests: Executes all LWC Jest tests with coverage
  4. Scratch Org Testing: Deploys to a scratch org and runs Apex tests
  5. Package Trigger: Triggers packaging workflow if source changed

​
Packaging Workflow

The packaging workflow creates new unlocked package versions:
  1. Creates a new package version
  2. Installs the package in a scratch org
  3. Runs all tests to validate the package
  4. Promotes the package version if tests pass

​
Troubleshooting Deployment Issues

​
Deployment Fails Due to Missing Dependencies

Ensure all required features are enabled in the target org:
  • Lightning Experience
  • My Domain (required for LWC)
  • Guest User settings (if using Experience Cloud)

​
Permission Set Assignment Fails

Verify the user has the necessary permissions to receive the assignment: 
sf org display user -o targetorg

​
Sample Data Import Fails

Check that required custom objects exist before importing: 
sf project deploy start -m CustomObject

​
Components Not Visible in App

Ensure:
  1. The Lightning app is assigned to the user’s profile
  2. The theme is activated
  3. The user has the recipes permission set

​
Environment Variables

For CI/CD pipelines, configure these environment variables:
  • DEVHUB_SFDX_URL: Dev Hub authentication URL
  • CODECOV_TOKEN: Token for uploading code coverage
  • BOT_ACCESS_TOKEN: GitHub token for triggering workflows
Store these securely in your CI/CD platform’s secrets management system.

Build docs developers (and LLMs) love

Get started for freeTalk to us