/create-lit-pwa

Set up a modern, Web standards compliant PWA by running one command.

Primary LanguageJavaScriptMIT LicenseMIT

Create Lit PWA

To install, run npm init lit-pwa@latest

Introduction

This is a simple template for a PWA that uses only native Web Components, with only Google's Lit library to make working with Web Components easier.

  • PWA Installable on desktop, tablet and mobile
  • Works offline
  • Passes all Lighthouse tests
  • TS and JS can be used simultaneously

Why Lit?

Lit handles smart reactive rendering in a way similar to React, but without the overhead of a Virtual DOM.

It uses native ES String Literals and variables. Hence the name 'lit'.

import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  @property()
  name = 'Somebody';

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

The library adds just 5KB to your bundle.

💡 Learn Lit:

Dev Tools

  • Uses TypeScript and ESLint for static analysis
  • Uses ESBuild for:
    • TypeScript compilation
    • Bundling
    • Development web server

VS Code Extensions

It is highly recommended to install following extensions:

  • esbenp.prettier-vscode
  • runem.lit-plugin
  • dbaeumer.vscode-eslint

NPM scripts

Start development server:

npm start

Build for production:

npm build