☁️ Salesforce LWC TodoMVC example. Great way to start your SF LWC project. This guide implements full-featured example from todomvc.com and using almost all features from LWC like modules, composition, reactivity, events, component lifecycle events and even test example.
Start this project if you like it ⭐
No need to setup any salesforce external environments!!! Start building full-featured LWC components locally without overhead.
Start simple by running yarn watch (or npm run watch, if you set up the project with npm). This will start the project with a local development server.
The source files are located in the src folder. All web components are within the src/modules folder. The folder hierarchy also represents the naming structure of the web components.
Find more information on the main repo on GitHub.
For More info about LWC visit lwc.dev or Salesforce Developers LWC page
Download and install the Salesforce CLI (Command Line Interface) for your operating system from this link: https://developer.salesforce.com/tools/sfdxcli
Download and install Visual Studio Code (VSCode) from this link: https://code.visualstudio.com/download Once installed, open VSCode, go to the Extensions view by clicking on the square icon in the Activity Bar on the side of the window. Search for "Salesforce Extension Pack" and install it.
In VSCode, press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) to open the Command Palette. Type "SFDX" and select "SFDX: Create Project with Manifest". Choose a project template, enter a project name, and choose a folder to store the project.
Open the terminal in VSCode (View -> Terminal) and run the following command to authorize your Dev Hub org:
sfdx force:auth:web:login -d -a DevHub
If you have an issues with your org - make an alias for DevHub to your account
sfdx force:alias:set DevHub=stukak@gmail.com
This command opens the Salesforce login page in your default web browser. Log in with your Dev Hub org credentials. After successful authentication, you can close the browser tab and return to VSCode.
In VSCode terminal, run the following command to create a scratch org:
sfdx force:org:create -s -f config/project-scratch-def.json -a MyScratchOrg
Replace MyScratchOrg with a name of your choice for the scratch org. The -s flag sets the created scratch org as the default org for the project.
Move your LWC example app into the force-app/main/default/lwc directory of your Salesforce DX project. Then, in the VSCode terminal, run the following command to push your LWC app to the scratch org:
sfdx force:source:push
or
sfdx project deploy start
Run command above each time you want to deploy your app changes.
Create a Lightning App Page: Open your scratch org by running the following command in the VSCode terminal:
sfdx force:org:open
Install JS packages for local development:
npm install
Note: For local development - register new components in lwc.config.json
Run npm run watch to run project with webpack. Project will be available in http://localhost:9000.
Open another terminal window and run npm run templates or npm run templates:watch to pre-compile Vue JSX templates into render functions.
!!! Note that each template have to ends with "-template.jsx" and "template.js" will be generated as a result.
Install the LWC Local Development plugin by running this command in your terminal or command prompt:
sfdx plugins:install @salesforce/lwc-dev-server
Then run the following command to start the local development server with salesforce tool:
sfdx force:lightning:lwc:start
Project will be available at http://localhost:3333
Remember that LWC Local Development doesn't support all Salesforce features, and some components may not work as expected in this environment. Always test your components directly in your Salesforce org before deploying them to production.
Unit tests runner ready for use with a few examples for todoApp component.
wireAdapter testing example included.
npm run test:unit - to single run unit tests
npm run test:unit:debug - to debug unit tests with browser. Allow to set breakpoints
npm run test:unit:watch - to run tests in watch mode. Test file will be re-executed on changes