Home

Awesome

Lightning Web Components Recipes Open Source

Github Workflow codecov

A collection of easy-to-digest code examples for Lightning Web Components Open Source. 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!

<div> <img src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/projects/quick-start-explore-the-lightning-web-components-oss-recipes-sample-app/3039bf385440158b5a43a1d42cbbe82d_badge.png" align="left" alt="Trailhead Badge" height="40px" width="40px" style="padding-right: 0.5em;"/> <p style="padding-top:0.5em;"> Learn more about this app by completing the <a href="https://trailhead.salesforce.com/en/content/learn/projects/quick-start-explore-the-lightning-web-components-oss-recipes-sample-app" >Quick Start: Explore the Lightning Web Components OSS Recipes Sample App</a> Trailhead project or by watching this <a href="https://www.youtube.com/watch?v=4mXCLJm8KF4&list=PLgIMQe2PKPSJcuCwM61dEc4jFG_jHqV2t&index=6">short presentation video</a>. </p> </div>

Recipes Live Version

Check out https://lwc-recipes-oss.herokuapp.com live on Heroku. Or on https://recipes.lwc.dev.

Deploy to Heroku

If you want to deploy LWC Recipes Open Source to Heroku, you can do the following:

  1. Create a Heroku application:
heroku create <app name>
  1. Deploy the application:
git push heroku main

Local Development

  1. Clone the lwc-recipes-oss repository:
git clone https://github.com/trailheadapps/lwc-recipes-oss
cd lwc-recipes-oss
  1. Install the project dependencies using npm (or yarn, if you prefer that alternatively)
npm install
  1. Build the LWR static site.
npm run build
  1. Start the app in watch mode.
npm run dev
  1. Enjoy the app!

Code Tours

Code Tours are guided walkthroughs that will help you understand the app code better. To be able to run them, install the CodeTour VSCode extension.