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