How do I add a new page in pwa-lit-template?

Create a TypeScript component in the pages folder extending PageElement, then register the route in routes.ts with an async import. Override the meta() method for SEO tags, as detailed in the README.

Does pwa-lit-template support server-side rendering?

No, it's focused on client-side routing with Vaadin Router. For server-side rendering, you'd need to implement custom solutions or integrate additional tools, which isn't covered out of the box.

pwa-lit-template vs create-react-app for PWAs: which is better?

Choose pwa-lit-template if you prioritize Web Components and modern standards; opt for create-react-app if you need React's extensive ecosystem and community plugins. This template is more niche but offers integrated PWA features.

How to enable offline mode in pwa-lit-template?

Set GENERATE_SERVICE_WORKER to true in rollup.config.js and adjust the Workbox configuration. The service worker is disabled by default, so this manual step is required for offline functionality.

Can I use pwa-lit-template with existing Vue.js projects?

Integrating would be complex due to architectural differences; it's designed for new projects or those fully committing to Web Components. Mixing frameworks might require significant refactoring.

What deployment options does pwa-lit-template support?

It can be deployed to prpl-server or any static hosting service like Netlify or GitHub Pages, with a streamlined build process using Rollup for optimized production bundles.

Open-Awesome

pwa-lit-template

MITTypeScript

A template for building Progressive Web Applications using Lit and Vaadin Router with modern web standards.

Visit Website GitHub

183 stars22 forks0 contributors

What is pwa-lit-template?

pwa-lit-template is a starter project for building Progressive Web Applications (PWAs) using Lit for Web Components and Vaadin Router for client-side routing. It provides a structured foundation with built-in tools for development, SEO, and deployment, enabling developers to create fast, offline-capable web applications following best practices.

Target Audience

Developers building modern web applications who want a production-ready template for creating PWAs with Web Components, particularly those using TypeScript and seeking an opinionated yet flexible setup.

Value Proposition

Developers choose this template for its integrated approach combining Lit, Vaadin Router, PWA features, and SEO tools out of the box, reducing setup time and ensuring best practices. Its emphasis on modern web standards, developer experience, and deployment flexibility makes it stand out from generic starters.

Overview

A template for building Progressive Web Applications using Lit and Vaadin Router.

Use Cases

Best For

Building Progressive Web Applications with Web Components using Lit.
Creating SEO-friendly single-page applications with client-side routing via Vaadin Router.
Developing offline-capable web apps with service workers and PWA features like manifests.
Starting projects with a TypeScript-based setup that includes development and production build tools.
Deploying static web applications to services like prpl-server or static hosting with minimal configuration.
Implementing environment-specific configurations in a structured web application.

Not Ideal For

Projects requiring server-side rendering for dynamic content or real-time SEO beyond meta tags
Teams heavily invested in React or Vue ecosystems seeking drop-in compatibility
Applications needing extensive pre-built UI component libraries or plugins

Pros & Cons

Pros

Modern Web Components Foundation

Leverages Lit for native Web Components, promoting interoperability and adherence to modern web standards, as emphasized in the project philosophy.

Integrated PWA Tooling

Includes Workbox and pwa-helpers for service workers and offline UI, reducing setup time for production-ready Progressive Web Apps.

SEO-Optimized Client Routing

Uses PageElement helper and html-meta-manager to dynamically manage meta tags, addressing SEO challenges in single-page applications.

TypeScript Developer Experience

Built with TypeScript to enhance code quality and tooling support, improving developer workflow out of the box.

Flexible Environment Configuration

Supports environment-specific setups via config files, allowing easy customization for different deployment stages.

Cons

Manual Service Worker Setup

Service worker generation is disabled by default and requires enabling in rollup.config.js, adding an extra configuration step.

Temporary Dependency Patches

The patches folder indicates workarounds for dependencies, which may lead to instability or breaking changes when removed.

Limited Browser Support Out-of-the-Box

Only supports major browsers; additional polyfills and transpilation are needed for older browsers, complicating the build process.

Frequently Asked Questions

Related Projects

Vite Lit Starter

Next generation frontend tooling. It's fast!

Stars82,047

Forks8,530

Last commit17 hours ago

pwa-starter

Welcome to the PWABuilder pwa-starter! Looking to build a new Progressive Web App and not sure where to get started? This is what you are looking for!

Stars1,320

Forks323

Last commit8 days ago

LitElement TypeScript starter

Sample component project using LitElement with TypeScript

Stars539

Forks213

Last commit7 months ago

LitElement JavaScript starter

Sample component project using LitElement, in JavaScript

Stars210

Forks125

Last commit1 year ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub