LWC Workshop

This [Workshop app] works as a proof of concept and boilerplate for standalone applications based on Lightning Web Components (LWC).

Requirements

• Node 8.12.x
• NPM 6.4.x
• Yarn >= 1.10.x

Supported Browsers

The Lightning Web Components model supports the browsers that Salesforce supports.

These browsers take full advantage of Lightning Web Components performance enhancements.

Browser Name	Version
Google Chrome™	59
Microsoft® Edge	15
Mozilla® Firefox®	54
Apple® Safari®	11

For earlier versions of these browsers, and for other browsers, the framework uses compatibility mode. Compatibility mode uses the lowest common denominator—the framework transpiles down to ES5 and adds the required polyfills. Not all modern Web APIs are available by default.

Running in compatibility mode affects performance. For example, Lightning Web Components work correctly in Safari 9 and Microsoft® Internet Explorer® 11, but they miss framework optimizations, don’t perform as well, and not all modern Web APIs are available.

Please note that this sample repo may include some cutting-edge examples that won't work in IE 11 because they use APIs that aren't supported by IE 11.

Installation

1) Download the repository

In order to clone the repo, you need to make sure that you can connect to Github with SSH.

git clone https://github.com/diervo/lwc-workshop.git
cd lwc-todomvc

2) Install dependencies

yarn install

3) Build the project

yarn build

By default the command will generate the application in development and non-compat mode. You can change the default behavior with the NODE_ENV and COMPAT environment variable.

COMPAT=true NODE_ENV=production yarn build

Note: The server will then take care of sending the right file based on the user agent.

4) Build & run in dev mode

For your development convenience, you can build the file bundles into /dist and launch a Node server + browser by running:

yarn start

5) Running in different modes

You can run the application in different Shadow DOM modes, you can read main.js for mode details. To toggle the different configurations use the following queryString parameters:

http://localhost:3000/?useNativeShadow=true&useCustomElementRegistry=true

6) Run test

yarn test:unit          # Run jest unit tests
yarn test:integration   # Run webdriver integraiton test

Running the webdriver test requires a selenium server running locally over the port 4444.

If you don't want to run the webdriver test locally, you will need to run it on Sauce Labs. You will need to set the following environment variable to run test over Sauce Labs: SAUCE_USERNAME and SAUCE_ACCESS_KEY.

SAUCE_USERNAME=[my-username] SAUCE_ACCESS_KEY=[my-access-token] yarn run test:integration

Configurations

Configuring your editor to use our lint and code style rules will help make the code review process delightful!

types

LWC relies on type annotations heavily.

• Make sure your editor supports typescript.
• Additionally, you can use flow.

eslint

Configure your editor to use our eslint configurations.

editorconfig

Configure your editor to use our editor configurations.

If you are using Visual Studio Code then use this:

ext install EditorConfig

Lint

yarn lint

The recommended way to lint this project is to configure your editor to warn you in real-time as you edit the file.