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.

The application uses ES modules for development, and Webpack as a module bundler. The optimizations like code splitting, minifying JavaScript and HTML (inside of the template string literals) are used to reduce production bundle size.

• Latest Polymer 3 and up-to-date webcomponentsjs polyfill
• UI built using latest Vaadin components shipped as ES modules
• 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

npm i

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

npm run dev

npm run lint

Run production build:

npm run build

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

npm start

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

npm run build:analyze

• 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