Note: following Polymer 3, this project is now in maintenance mode. This means that it won't receive new features, I will just keep updating its deps to keep it fresh. To write vanilla progressive web applications with web components, use the PWA Webpack Starter Kit instead.

Polymer 3 Starter Kit with Webpack

Want to use the latest Polymer 3 but you don't know how to get started? Got you covered!

This starter kit was built from scratch to allow you to start using today the features of tomorrow.

Features:

• Latest Polymer 3 preview
• Components split into component class, styles and templates. No more huge files with mixed content!
• TypeScript with TSLint preconfigured, so that you can write reliable, high quality code
• Using SCSS by default. Write less, do more!
• Lazy-loading using the brand new JavaScript dynamic import syntax
• A static and a dynamic subroute example, currently missing from the original Starter Kit. This one has been added because it is not always so obvious how to use the router for a subroute
• Shared styles and custom iconset, just like the original PSK
• Automatic service worker generation using Workbox
• Webpack 4 to bundle 'em all!
• Basic Firebase configuration to allow easy deployment out of the box

Preview

You can see an online preview of the project on my Github Pages.

Note that GH Pages does not currently support routing all the requests to an index.html, so you won't be able to link to a specific page of this online preview. However, you can still switch from one page to another once you've loaded the index.

Setup

• Install Node.js. Because of the syntax used in the configuration files, at least v8.3 is required. If you want to feel safe, the latest LTS will work well.
• Install yarn
• Clone this repository

  git clone https://github.com/Dabolus/polymer3-webpack-starter-kit.git <your-app-name> && cd <your-app-name>
  

• Install the project dependencies

  yarn install
  

  This will automatically install both the frontend and the build tools dependencies. Go on reading to understand the project structure and why it is organized in this way.
• Optional: if you wish to deploy your PWA on Firebase, remember that you also need to install firebase-tools

  yarn global add firebase-tools
  

• Profit!

Available scripts

yarn serve
# Starts webpack dev server with live reload on http://localhost:8080

yarn build
# Builds the production ready website in the build/ directory
# By default, the base path of the built project will be '/'
# If you wish to change this behavior, you can set the basePath
# variable to whatever you want the base path to be inside conf/app.config.js
# REMEMBER TO ADD THE LEADING AND TRAILING SLASHES

yarn deploy [...args]
# Alias of 'firebase deploy'. The args will be passed to firebase
# e.g. yarn deploy --only hosting
# Note that this command won't build the project before deploying it,
# so you will have to do it yourself.
# e.g. yarn build && yarn deploy
# By default, the files to deploy are the ones inside the build/ directory
# To change this behavior, change the "public" property in 'firebase.json'

Project configuration

You can find a lot of useful configuration options inside the conf/app.config.js file. If these options aren't enough for you, you can always edit webpack configuration and everything else at you needs.

Project Structure

Contributing

PRs are welcome! You noticed a bug, a possible improvement or whatever? Any help is always appreciated, so don't hesitate opening one!

Be sure to check out the contributing guidelines to fasten up the merging process.