DOCSEARCHbyAlgolia
Submit Docs

Lightning Web Components Recipes

repository·main·Indexed 25 days ago

https://github.com/trailheadapps/lwc-recipes

A collection of lightweight, best-practice code examples for Lightning Web Components (LWC) designed to demonstrate specific tasks on the Salesforce Platform. The repository includes installation guides for Scratch Orgs, Unlocked Packages, and Developer Edition Orgs, as well as configurations for Prettier, ESLint, and Jest mocks.

Tokens
1.5K
Snippets
3
Records
10
Agent score
84%

What's inside lwc-recipes

  1. Install LWC Recipes using an Unlocked Package

    main

    Use this method to deploy to a permanent environment (like a Developer Edition Org or Trailhead Playground) without a local development environment.

    Steps:

    1. Log in to your org.
    2. Install the package via this link: Install Recipes Unlocked Package.
    3. Select Install for All Users.
    4. Import Account and Contacts data:
      • Download Accounts-Contacts.csv.
      • In Setup, use the Data Import Wizard.
      • Select Accounts and Contacts and choose Add New Records.
      • Upload the CSV and complete the wizard.
    5. (Optional for Trailhead) Assign the recipes permission set to your user via Setup > Users > Permission Sets.
    6. In Setup > Themes and Branding, activate the Recipes Lite or Recipes Blue theme.
    7. In the App Launcher, select the LWC Recipes app.

  2. Install LWC Recipes using a Developer Edition Org or Trailhead Playground

    main

    Use this method to deploy to non-source-tracked environments.

    Steps:

    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
    3. Deploy the app: sf project deploy start -d force-app
    4. Assign the recipes permission set: sf org assign permset -n recipes
    5. Import sample data: sf data tree import -p ./data/data-plan.json
    6. Open the org: sf org open -o mydevorg
    7. In Setup > Themes and Branding, activate the Recipes Lite or Recipes Blue theme.
    8. In the App Launcher, select the LWC app.
    git clone https://github.com/trailheadapps/lwc-recipes
cd lwc-recipes
sf org login web -s -a mydevorg
sf project deploy start -d force-app
sf org assign permset -n recipes
sf data tree import -p ./data/data-plan.json
sf org open -o mydevorg

  4. Install LWC Recipes using a Scratch Org

    main

    This is the recommended installation method for developers who want to explore the code.

    Prerequisites:

    • Enable Dev Hub in your Trailhead Playground.
    • Install Salesforce CLI and Visual Studio Code.
    • Install Visual Studio Code Salesforce extensions (including the Lightning Web Components extension).

    Steps:

    1. Authorize your hub org: sf org login web -d -a myhuborg
    2. Clone the repository: git clone https://github.com/trailheadapps/lwc-recipes cd lwc-recipes
    3. Create a scratch org: sf org create scratch -d -f config/project-scratch-def.json -a lwc-recipes
    4. Deploy the app: sf project deploy start
    5. Assign the recipes permission set: sf org assign permset -n recipes
    6. Import sample data: sf data tree import -p ./data/data-plan.json
    7. Open the org: sf org open
    8. In Setup > Themes and Branding, activate the Recipes Lite or Recipes Blue theme.
    9. In the App Launcher, select the LWC app.
    sf org login web -d -a myhuborg
git clone https://github.com/trailheadapps/lwc-recipes
cd lwc-recipes
sf org create scratch -d -f config/project-scratch-def.json -a lwc-recipes
sf project deploy start
sf org assign permset -n recipes
sf data tree import -p ./data/data-plan.json
sf org open

  6. Set up Pre-commit Hooks for Linting and Formatting

    main

    You can automate code quality checks by setting up a pre-commit hook that runs Prettier and ESLint before every git commit.

    Setup:

    1. Ensure Node.js is installed.
    2. Run npm install in the project root to install ESLint and Prettier modules.

    Manual Execution: You can also run these checks manually via the command line:

    • npm run lint
    • npm run prettier
    npm install
npm run lint
npm run prettier

  7. Configure Code Formatting and Linting

    main

    To maintain code quality, this repository supports Prettier and ESLint.

    Code Formatting (Prettier):

    Code Linting (ESLint):

  8. Configure ESLint for LWC and Aura components

    main

    The project uses a flat configuration for ESLint that applies specific rulesets based on file paths.

    • Aura Components: Files in force-app/main/default/aura/**/*.js use @salesforce/eslint-plugin-aura with recommended and locker configurations.
    • LWC Components: Files in force-app/main/default/lwc/**/*.js use @salesforce/eslint-config-lwc/recommended.
    • LWC Test Files: Files in force-app/main/default/lwc/**/*.test.js extend the LWC configuration but disable the @lwc/lwc/no-unexpected-wire-adapter-usages rule and include node globals.

  9. Configure ESLint for Jest mocks

    main

    Files located in force-app/test/jest-mocks/**/*.js are configured with the following settings:

    • Source Type: module
    • ECMA Version: latest
    • Globals: Includes node, es2021, jest environment globals, CustomEvent (readonly), and window (readonly).
    • Plugins/Extends: Uses eslint-plugin-jest and extends eslintJs/recommended.