loganfsmyth / polymer3-webpack-starter

Polymer 3 starter built with Vaadin components and Vaadin.Router library, using webpack and modern tools

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.

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.

Features

• 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
• Minification of JavaScript using babel-preset-minify
• 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
• Solutions for building and serving gzipped files

Install dependencies

npm i

Start the development server

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

npm run dev

Lint JavaScript

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

Known limitations

• Using import.meta suggested by Polymer docs is not supported, see webpack/webpack#6719