# Installation

# Lightning Web Components CLI

To install Lightning Web Components and the Lightning Web Components CLI, use the open source lwc-create-app tool.

The CLI steps you through a simple build setup for an app.

npx lwc-create-app my-app
cd my-app
npm run watch

To install the CLI, you must have Node.js installed, with at least npm 5.2+. You should be familiar with either npm or yarn. The npx tool is a package runner that installs with npm 5.2+.

For information about component naming and bundle structure, see Component Bundles.

# Tools

To develop Lightning web components, you can use just about any code editor and tools.

For code formatting, we recommend Prettier. Prettier supports HTML, CSS, and Javascript, which are the files you write to create Lightning web components.

To install and use Prettier, see the official documentation. If you're using Git, it's a good idea to use a pre-commit hook to ensure that code is formatted before it's committed to source control.

To configure Prettier, add a configuration file to your project. To correctly format HTML templates with Prettier, set the parser to lwc. The parser is just HTML, but it tells Prettier not to add quotes around template properties in HTML attributes as required by LWC.

The following example sets all HTML files to use the lwc parser.

{
  "overrides": [
    {
      "files": "*.html",
       "options": { "parser": "lwc" }
    }
  ]
}

# Recipes

The github.com/trailheadapps/lwc-recipes-oss repo includes simple code recipes that teach you how to build apps. The recipes are used as code examples throughout this developer guide.

git clone https://github.com/trailheadapps/lwc-recipes-oss.git
cd lwc-recipes-oss

You can view some of the recipes in the Lightning Web Components recipes app: recipes.lwc.dev.

# Playground

The simplest recipe is the helloWorld component. The name property in the component's JavaScript class binds to the component's HTML template. Change World to Earth to see the binding in action.

Add another property in helloWorld.js.

@api greeting = 'Welcome to Lightning Web Components!'

Don't forget to add {greeting} in the helloWorld.html template.

The @api decorator makes the name property public. Because the name and greeting properties are public, a component that consumes the helloWorld component can set their values.

If we remove @api, the property still binds to the HTML template but it's private. To see for yourself, remove @api.

To learn more, see HTML Templates.

# Supported Browsers

# Supported JavaScript

To develop Lightning web components, use the latest versions of JavaScript.

Lightning Web Components JavaScript support includes:

• ES6 (ECMAScript 2015)
• ES7 (ECMAScript 2016)
• ES8 (ECMAScript 2017)—excluding Shared Memory and Atomics
• ES9 (ECMAScript 2018)—including only Object Spread Properties (not Object Rest Properties)

A huge benefit of Lightning Web Components is that you write standard JavaScript code. The Salesforce engineers who developed Lightning Web Components are contributing members of the Ecma International Technical Committee 39 (TC39), which is the committee that evolves JavaScript. Salesforce is also a member of the World Wide Web Consortium (W3C).

This developer guide explains how to develop Lightning web components and documents the directives, decorators, and lifecycle hooks that are unique to the programming model.

This developer guide doesn’t document standard JavaScript or teach JavaScript fundamentals. Standard JavaScript is documented in the Mozilla Developer Network (MDN) JavaScript Reference. If you’re looking for documentation for a function, try MDN first. For example, if you’re looking for information about addEventListener(), use MDN.