Polymer 3 Webpack Starter

This is an example project demonstrating how you can build a frontend part of the JavaScript application using Vaadin components and Vaadin Router library, and leverage the benefits of the modern tools.

Lumo version ↗ | Material version ↗

Features

Latest Polymer 3 and up-to-date webcomponentsjs polyfill
UI built using latest Vaadin components shipped as ES modules
Application with two different themes: Lumo and Material
Vaadin Router configured for code splitting and lazy loading
webpack 4 for easy development and production bundling
Up-to-date Babel 7 verified to work nice with Custom Elements
Modern build for evergreen browsers using BabelMultiTargetPlugin
Minification of JavaScript using Terser supporting ES2015+
Minification of HTML and CSS in tagged template literals
Automatic service worker generation using Workbox
Automatic bundle analysis and report generation
Web server using express and History API middleware
Compressing static files for production using gzip and Brotli algorithm
Serving compressed files using express-static-gzip middleware

Install dependencies

npm i

Start the development server

Start webpack-dev-server on localhost http://127.0.0.1:3000:

npm run dev

Lint JS

npm run lint:js

Lint CSS

npm run lint:css

Lint JS and CSS

npm run lint

Build

Run production build:

npm run build

Serve the built output on localhost http://127.0.0.1:8000:

npm start

Visualize build output

Run production build and start HTTP server to show bundle report:

npm run build:analyze

Material version

Check out material branch for Material version of the starter, and a full diff of changes.

Known limitations

Using import.meta suggested by Polymer docs is not supported out of the box, see webpack/webpack#6719. Support can be added with babel-plugin-bundled-import-meta or webpack loader import-meta-url-loader

web-padawan/polymer3-webpack-starter