CC0-1.0 License
A collection of easy-to-digest code examples for Lightning Web Components. Each recipe demonstrates how to code a specific task in 30 lines of code or less. A View Source link takes you right to the code in GitHub. From Hello World to data access and third-party libraries, there is a recipe for that!
This sample application is designed to run on Salesforce Platform. If you want to experience Lightning Web Components on any platform, please visit https://lwc.dev, and try out our Lightning Web Components sample application LWC Recipes OSS.
There are two ways to install Lightning Web Components Recipes:
sfdx force:auth:web:login -d -a myhuborg
git clone https://github.com/trailheadapps/lwc-recipes
cd lwc-recipes
sfdx force:org:create -s -f config/project-scratch-def.json -a lwc-recipes
sfdx force:source:push
sfdx force:user:permset:assign -n recipes
sfdx force:data:tree:import --plan ./data/data-plan.json
sfdx force:org:open
In Setup, under Themes and Branding, activate the Recipes Lite or Recipes Blue theme.
In App Launcher, select the LWC app.
Sign up for a Developer Edition (DE) org.
Enable MyDomain in your DE org. Instructions to do this are here.
Click this link to install the Recipes unlocked package in your DE org.
Select Install for All Users
Import Account and Contacts data:
In Setup, under Themes and Branding, activate the Recipes Lite or Recipes Blue theme.
In App Launcher, select the LWC app.
This repository contains several files that are relevant if you want to integrate modern web development tooling to your Salesforce development processes, or to your continuous integration/continuous deployment processes.
Prettier is a code formatter used to ensure consistent formatting across your code base. To use Prettier with Visual Studio Code, install this extension from the Visual Studio Code Marketplace. The .prettierignore and .prettierrc files are provided as part of this repository to control the behavior of the Prettier formatter.
ESLint is a popular JavaScript linting tool used to identify stylistic errors and erroneous constructs. To use ESLint with Visual Studio Code, install this extension from the Visual Studio Code Marketplace. The .eslintignore file is provided as part of this repository to exclude specific files from the linting process in the context of Lightning Web Components development.
This repository also comes with a package.json file that makes it easy to set up a pre-commit hook that enforces code formatting and linting by running Prettier and ESLint every time you git commit
changes.
To set up the formatting and linting pre-commit hook:
npm install
in your project's root folder to install the ESLint and Prettier modules (Note: Mac users should verify that Xcode command line tools are installed before running this command.)Prettier and ESLint will now run automatically every time you commit changes. The commit will fail if linting errors are detected. You can also run the formatting and linting from the command line using the following commands (check out package.json for the full list):
npm run lint:lwc
npm run prettier