/pwa-webpack-starter-kit

PWA Starter Kit with Webpack

Primary LanguageTypeScriptMIT LicenseMIT

PWA Starter Kit with Webpack

Build Status Dependencies Status Dev Dependencies Status Maintainability

Differences with the original PWA Starter Kit

  • Gulp + Polymer CLI → Gulp + Webpack
  • Modern JavaScript → TypeScript
  • CSS → SCSS
  • HTML → EJS (only on raw HTML files, templates are still HTML)
  • All-in-a-file components → Components split into component class, template and styles
  • Automatic SW with sw-precache → Custom SW with Workbox auto injected
  • Build targets: ES5, ES6, ESM → ES5, ES6 and possibly others (but currently no ESM, as Webpack has its own way to handle imports)

Setup

  • Install Node.js
  • Install yarn
  • Clone this repository 
    git clone https://github.com/Dabolus/pwa-webpack-starter-kit.git <your-app-name> && cd <your-app-name>
  • Install the project dependencies 
    yarn install

Adding more build targets

To configure Babel and PostCSS you have to specify a list of browsers that your app will support by being transpiled and polyfilled (via the browserslist library), while PRPL Server works by passing it a set of browser capabilities (via the browser-capabilities library). This means that to add new build targets you will have to check out what browsers support your target capabilities. To do so, you might find useful this compatibility table.

After finding out the correct browserslist configuration, adding a new build target is quite simple; you just need to tweak your Gulp configuration a bit. Here are the steps you should follow:

  1. Open the main gulp config file (gulp/config.ts)
  2. Copy-paste one of the build:xx tasks and replace its parameters respectively with your new build name, the browserslist the new build will be built for and their capabilities
  3. Add your new build:xx task to the main build task, together with the other builds that are run in parallel
  4. Done!

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.