Polymer Skeleton: Polymer 3 Progressive Web App (DEMO)
A mininum boilerplate to deliver a Polymer 3.x with Webpack, PostCSS and Service Workers ready. Made for personal use, glad if someone can get a good starting point from here. Bye bye Bower.
- Webpack
- webpack-dev-server with hot reloading active.
- PostCSS with cssnext (include autoprefixer) plugin.
- Service Workers generated by Workbox through the workbox-webpack-plugin (just for
build) - Copy statics file on
distfolder (likevendor/webcomponents-loader.jsand others) - standard-version is bundled for managing versioning and changelogs.
- ES6 modules bundle and ES5 transpiled bundle both handled using the new
nomoduleandtype=modulefeature of modern browsers. Learn more on how to ship ES6 modules today in production.
- babel-loader with the babel-preset-env enabled for the last 2 versions.
- text-loader - Load HTML templates as string.
- postcss-loader - Load PostCSS into the
<style>scoped tag of Polymer elements as string.
All modern browsers. 🕶
But as the features said, we are also transpiling the bundle for "oldie" browsers. Of course we are not covering things like IE11.
Clone this repository:
git clone https://github.com/PolymerX/polymer-skeleton [your-app-name]Remove the .git folder and change details within:
package.jsonsrc/manifest.json
Then start building your application!
yarnStart the webpack-dev-server on localhost http://localhost:3000 with hot-reload and watch on .postcss files.
For "oldie" browsers, transpiling also Javascript class. Works on Firefox:
yarn devFor modern browsers with class support. Works on Chrome, Safari, and Edge:
yarn dev:moduleXO for code style, Stylelint for PostCSS linting, and WCT for components tests:
yarn testRun Lighthouse for testing the PWA capabilities:
yarn test:lighthouse(Almost) production-ready (webpack --optimize-minimze and copy statics) to dist folder. Also generating Service Workers. The command will also create the module version of the bundle ready to be loaded as type=module.
yarn buildDuring development .postcss files will be watched, compiled and injected to the relative <style> tag within the component template. The CSS is scoped to the component so don't worry about CSS specificity, you can also use :host, :host-context and :root selectors. Read more about styling web components and custom CSS properties.
Cssnext also includes Autoprefixer plugin, if you don't know how it works (...and you should), it allows you to write CSS without worrying about vendor prefixes. Just write your css properties prefix-free and let autoprefixer do the work for you when compiling.
How about commons styles?
You can simply import any other .postcss file within your main component .js file and print it inside the template().
We are currently using a modified version of the @polymer/polymer official NPM version. The flat property within the package.json is causing some problems with the load dependency system of webpack.
We are getting the webpcomponents-lite.js polyfill from GitHub using NPM/Yarn and copying it into a vendor folder with a Node script. Currently, the webcomponents-loader.js has a bug for Firefox and we can't use it.
Loading the custom-element-es5-adapter.js is necessary because the custom elements known(1) issue(2) (the lovely Uncaught TypeError: Class constructor PolymerElement cannot be invoked without 'new') about ES6 classes, but just on old browsers.
| Name | Website |
|---|---|
| Alessio Occhipinti | https://godev.space |
| Mattia Astorino | http://equinsuocha.io/ |
PolymerX © MIT
