Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/dabolus/webpack-prpl-boilerplate

A boilerplate that allows to easily build multi-target web apps (ES5, ES6) ready to be served by PRPL Server
https://github.com/dabolus/webpack-prpl-boilerplate

boilerplate ejs prpl-server sass scss starter typescript webpack

Last synced: about 7 hours ago
JSON representation

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

Awesome Lists containing this project

README 

        
# Webpack PRPL boilerplate

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

[PRPL Server](https://github.com/Polymer/prpl-server).



## What you get out of the box

#### [TypeScript](https://www.typescriptlang.org)

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](https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7) 

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](https://github.com/GoogleChrome/workbox/issues/1513) for 

more info._



#### [Sass](https://sass-lang.com)

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](https://github.com/postcss/autoprefixer) will 

take care of them, using the same `BROWSERSLIST` used by Babel to check what 

of them are needed for your target build.



#### [EJS](http://ejs.co)

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](https://github.com/Polymer/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](https://github.com/browserslist/browserslist)), while PRPL 

Server works by passing it **a set of browser capabilities** (via the 

[browser-capabilities library](https://github.com/Polymer/tools/tree/master/packages/browser-capabilities)). 

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](https://kangax.github.io/compat-table/es2016plus).



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!