Webpack PRPL boilerplate

A boilerplate that allows to easily build multi-target web apps (ES5, ES6) ready to be served by PRPL Server.

What you get out of the box

TypeScript

Apart from the Service Worker, the entire project has been written in TypeScript, so that you can write modern and robust code without the hassle of configuring everything from scratch. The brand new Babel TypeScript preset has been used to make the development workflow much easier. The BROWSERSLIST environment variable is used to tell Babel whether to transpile the code to ES6 (i.e. edge > 12, since Edge 13 was the first Microsoft browser that fully supported ES6) or to ES5 (i.e. ie > 9, since Internet Explorer 10 was the first Microsoft browser that fully supported ES5).

Note: the Service Worker will be written in TypeScript too as soon as it becomes possible to do that without using awful workarounds. Track this issue for more info.

Sass

CSS is great, but it misses some essential features. Sass will help you get covered with them, so that you can seamlessly write easy-to-read CSS code. You also won't need to worry about vendor prefixes, as PostCSS autoprefixer plugin will take care of them, using the same BROWSERSLIST used by Babel to check what of them are needed for your target build.

EJS

Many times you might need to change something on your HTML files based on your current build or whatever else. EJS is a simple JavaScript templating system that allows you to write JavaScript code that will be compiled by Webpack at build time. For example, if you need to load some polyfills for the ES5 build without bloating the ES6 bundle, you can easily do that.

An editable Service Worker

Thanks to the Workbox InjectManifest plugin, you can write your own code in the Service Worker. The precache manifest will then be injected at build time based on the chunks generated by your app.

Configurable Webpack and Gulp

CLIs help you doing the hard parts of your tasks without writing a single line of code, but while this is good when starting a project, it might become a con as soon as you need to add a custom configuration to your build. With this boilerplate you get the hard part already configured, but you also have the freedom to configure Webpack and Gulp in any way you want to.

Ok, but why?

PRPL Server is pure awesomeness, but - apart from PWA Starter Kit - I wasn't able to find a single boilerplate that allowed to easily get started with it. I love the work done by the Polymer team, but I hate being binded to a CLI. The aim of this boilerplate is to give a starting point to those who like me want to be free to do whatever they want.

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!