Known Vulnerabilities code style: prettier Lighthouse score: 91/100
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 ↗
- 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
npm i
Start webpack-dev-server on localhost http://127.0.0.1:3000:
npm run dev
npm run lint:js
npm run lint:css
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
Check out material branch for Material version of the starter, and a full diff of changes.
- Using
import.metasuggested 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