Skip to main content

Development

During the development phase of your projects, when you're writing Lit components, the following tools can help boost your productivity:

  • A dev server, for previewing code without a build step.
  • TypeScript, for writing type-checked code.
  • A linter, for catching Javascript errors.
  • A code formatter, for consistently formatting code.
  • Lit-specific IDE plugins, for linting and syntax-highlighting Lit templates.

Check out the Starter Kits documentation to easily setup a development environment with all of these features pre-configured.

Development and production builds

Permalink to Development and production builds

All the Lit packages are published with development and production builds, using Node's support for export conditions.

The production build is optimized with very aggressive minification settings. The development build is unminified for easier debugging and includes extra checks and warnings. The default build is the production build, so that projects don't accidentally deploy the larger development build.

You must opt into the development build by specifying the "development" export condition in tools that support export conditions, such as Rollup, Webpack, and Web Dev Server. This is done differently for each tool.

For example, in Rollup, using the @rollup/node-resolve plugin, you can select the development build with exportConditions option:

Lit is packaged as JavaScript modules, and it uses bare module specifiers that are not yet natively supported in most browsers. Bare specifiers are commonly used, and you may want to use them in your own code as well. For example:

To run this code in the browser, the bare specifier ('lit') needs to be transformed to a URL that the browser can load (such as '/node_modules/lit/lit.js').

There are many development servers that can deal with module specifiers. If you already have a dev server that does this and integrates with your build process, that should be sufficient.

If you need a dev server, we recommend Web Dev Server.

Web Dev Server is an open-source dev server that enables a build-free development process.

It handles rewriting bare module specifiers to valid URLs, as required by browsers.

Install Web Dev Server:

Add a command to your package.json file:

And a web-dev-server.config.js file:

Run the dev server:

Legacy browser support

For older browsers like IE11, Web Dev Server can transform JavaScript modules to use the backwards-compatible SystemJS module loader, and automatically serve the web components polyfills. You'll need to configure the @web/dev-server-legacy package to support older browsers.

Install the Web Dev Server legacy package:

Configure web-dev-server.config.js:

For full installation and usage instructions, see the Web Dev Server documentation.

TypeScript extends the Javascript language by adding support for types. Types are useful for catching errors early and making code more readable and understandable.

To install TypeScript in your project:

To build the code:

For full installation and usage instructions, see the TypeScript site. To get started, the sections on installing TypeScript and using its features are particularly helpful.

Linting can help catch errors in your code. We recommend using ESLint for linting Lit code.

To install ESLint in your project:

To invoke it:

For full installation and usage instructions, see the ESLint documentation.

Integrating linting into your IDE workflow can help catch errors as early as possible. See Lit-specific IDE plugins to configure linting specifically for Lit.

Using a code formatter can help ensure code is consistent and readable. Integrating your formatter of choice with your IDE ensures your code is always clean and tidy.

A few popular options include:

There are a number of IDE plugins that may be useful when developing with Lit. In particular, we recommend using a syntax highlighter that works with Lit templates.

The following plugins highlight Lit templates and check them for errors:

These plugins provide:

  • Syntax highlighting
  • Type-checking
  • Code completion
  • Hover-over docs
  • Jump to definition
  • Linting
  • Quick Fixes

See the awesome-lit-html repo for other IDE plugins, as well as additional tools and information.