{"id":15464464,"url":"https://github.com/dabolus/webpack-prpl-boilerplate","last_synced_at":"2026-04-17T15:32:13.957Z","repository":{"id":87394250,"uuid":"150789939","full_name":"Dabolus/webpack-prpl-boilerplate","owner":"Dabolus","description":"A boilerplate that allows to easily build multi-target web apps (ES5, ES6) ready to be served by PRPL Server","archived":false,"fork":false,"pushed_at":"2019-02-12T07:08:46.000Z","size":596,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-04T15:49:02.976Z","etag":null,"topics":["boilerplate","ejs","prpl-server","sass","scss","starter","typescript","webpack"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Dabolus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-28T20:11:46.000Z","updated_at":"2020-07-26T14:19:03.000Z","dependencies_parsed_at":"2023-05-15T05:45:47.613Z","dependency_job_id":null,"html_url":"https://github.com/Dabolus/webpack-prpl-boilerplate","commit_stats":{"total_commits":43,"total_committers":1,"mean_commits":43.0,"dds":0.0,"last_synced_commit":"3c27e2e335ab322e0089b5231aa4ef52b753ff18"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dabolus%2Fwebpack-prpl-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dabolus%2Fwebpack-prpl-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dabolus%2Fwebpack-prpl-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dabolus%2Fwebpack-prpl-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dabolus","download_url":"https://codeload.github.com/Dabolus/webpack-prpl-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246200322,"owners_count":20739566,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","ejs","prpl-server","sass","scss","starter","typescript","webpack"],"created_at":"2024-10-02T00:37:14.880Z","updated_at":"2026-04-17T15:32:08.934Z","avatar_url":"https://github.com/Dabolus.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webpack PRPL boilerplate\nA boilerplate that allows to easily build multi-target web apps (ES5, ES6) ready to be served by\n[PRPL Server](https://github.com/Polymer/prpl-server).\n\n## What you get out of the box\n#### [TypeScript](https://www.typescriptlang.org)\nApart from the Service Worker, the entire project has been written in \nTypeScript, so that you can write modern and robust code without the hassle \nof configuring everything from scratch. The brand new \n[Babel TypeScript preset](https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7) \nhas been used to make the development workflow much easier. The \n`BROWSERSLIST` environment variable is used to tell Babel whether to \ntranspile the code to ES6 (i.e. `edge \u003e 12`, since Edge 13 was the first \nMicrosoft browser that fully supported ES6) or to ES5 (i.e. `ie \u003e 9`, since \nInternet Explorer 10 was the first Microsoft browser that fully supported \nES5).\n\n_Note: the Service Worker will be written in TypeScript too as soon as it \nbecomes possible to do that without using awful workarounds. \n[Track this issue](https://github.com/GoogleChrome/workbox/issues/1513) for \nmore info._\n\n#### [Sass](https://sass-lang.com)\nCSS is great, but it misses some essential features. Sass will help you get \ncovered with them, so that you can seamlessly write easy-to-read CSS code. \nYou also won't need to worry about vendor prefixes, as \n[PostCSS autoprefixer plugin](https://github.com/postcss/autoprefixer) will \ntake care of them, using the same `BROWSERSLIST` used by Babel to check what \nof them are needed for your target build.\n\n#### [EJS](http://ejs.co)\nMany times you might need to change something on your HTML files based on \nyour current build or whatever else. EJS is a simple JavaScript templating \nsystem that allows you to write JavaScript code that will be compiled by \nWebpack **at build time**. For example, if you need to load some polyfills \nfor the ES5 build without bloating the ES6 bundle, you can easily do that.\n\n#### An editable Service Worker\nThanks to the Workbox InjectManifest plugin, you can write your own code in \nthe Service Worker. The precache manifest will then be injected at build \ntime based on the chunks generated by your app.\n\n#### Configurable Webpack and Gulp\nCLIs help you doing the hard parts of your tasks without writing a single \nline of code, but while this is good when starting a project, it might \nbecome a con as soon as you need to add a custom configuration to your \nbuild. With this boilerplate you get the hard part already configured, but \nyou also have the freedom to configure Webpack and Gulp in any way you want \nto.\n\n## Ok, but why?\nPRPL Server is pure awesomeness, but - apart from \n[PWA Starter Kit](https://github.com/Polymer/pwa-starter-kit) - I wasn't \nable to find a single boilerplate that allowed to easily get started with \nit. I love the work done by the Polymer team, but I hate being binded to a \nCLI. The aim of this boilerplate is to give a starting point to those who \nlike me want to be free to do whatever they want.\n\n## Adding more build targets\nTo configure Babel and PostCSS you have to specify **a list of browsers** that your app \nwill support by being transpiled and polyfilled (via the \n[browserslist library](https://github.com/browserslist/browserslist)), while PRPL \nServer works by passing it **a set of browser capabilities** (via the \n[browser-capabilities library](https://github.com/Polymer/tools/tree/master/packages/browser-capabilities)). \nThis means that to add new build targets you will have to check out what browsers \nsupport your target capabilities. To do so, you might find useful \n[this compatibility table](https://kangax.github.io/compat-table/es2016plus).\n\nAfter finding out the correct browserslist configuration, adding a new build target is \nquite simple; you just need to tweak your Gulp configuration a bit. Here are the steps you should follow:\n1. Open the main gulp config file (`gulp/config.ts`)\n2. Copy-paste one of the `build:xx` tasks and replace its parameters respectively with \n   your new build name, the `browserslist` the new build will be built for and their \n   capabilities\n3. Add your new `build:xx` task to the main `build` task, together with the other \n   builds that are run in parallel\n4. Done!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabolus%2Fwebpack-prpl-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdabolus%2Fwebpack-prpl-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabolus%2Fwebpack-prpl-boilerplate/lists"}