Config-free bundler for ES6 React apps.
- Simple CLI for prod and dev environment
- Unique solution for bundling; no boilerplate, no config.
- Remote improvements inherited transparently (ej: monitoring, PWA, etc)
$ npm install @s-ui/bundler --save-dev
Usage for web app bundling
Add bundling scripts to your package.json
Requirements for web app bundling
node 6+ version is required.
Refer to example folder to see what's expected, which is basically:
├── package.json └── src ├── index.html └── app.js
index.html as app home and
app.js as entry point.
$ sui-bundler dev
While developing your app, you will have HMR (Hot Module Reloading). Default port for your website is 3000, but it will assign automatically a free port for you if this one is busy.
$ sui-bundler build
It will build a deployable folder
public where you can find all your statics. If you wish to remove the content of the folder before generating new files, just use the flag
--clean | -C
You can use sui-bundler to bundle a package as a library that can be injected with a simple script tag.
$ sui-bundler lib
You should create an entry file that assigns your lib to your desired namespace:
// umd.jswindownamespacefancy = MyFancyModule
And then execute
sui-bundler lib with your destination config:
sui-bundler lib umd/index.js -o lib/fancy -p http://my-cdn.com/fancy
sui-bundler lib will add your package version as subfolder:
-o lib/fancyoutputs to
http://my-cdn.com/fancy/0.0.0as public path for chunks loading.
This tool works with zero configuration out the box but you could use some configuration in order to optimize or adapt the output to your needs. For that, you need to add a property
sui-bundler inside the package.json of your project.
scripts property accept ScriptExtHtmlWebpackPlugin config: https://github.com/numical/script-ext-html-webpack-plugin#configuration
The URL to the CDN MUST end with a slash
Offline feature is deactivated by default. If you want to activate, you should put
offline: true in the sui-bundler configuration in your package.json. Also, you need to configure a serviceWorker in the entry point of your app:
You should pass a handler in order to handle when content gets cached for the first time the content and another when you get new content and want to handle how to show a notification to the user in order to let him decide if he wants to refresh the page.
If you're using Firebase, it's recommendable to not cache the file serviceWorker.js, adding this config to your
If you want to remove your ServiceWorker, you need to use the method
unregister, the same way you used the
register method before.
You could use it to be used offline:
"offline":whitelist: "::all::""runtime":"urlPattern": "ms-mt--api-web\\.spain\\.schibsted\\.io""handler": "networkFirst""urlPattern": "fonts\\.googleapis\\.com""handler": "fastest""urlPattern": "prea\\.ccdn\\.es\/cnet\/contents\/media""handler": "cacheFirst""options":"cache":"name": "image-cache""maxEntries": 50
Runtime follows the (API of sw-toolbox)[https://github.com/GoogleChromeLabs/sw-toolbox]. Also, the whitelist is a list of regexp that indicates which pages are secure to use only Client Server Rendering. You could use the
::all:: string to indicate that you always want to use Client Side Rendering.
It offers you a way to upload an external library to your project that you would normally put by hand in a tag script in the index.html file. It adds a reference in the index.html with a hash.
Hot Module Replacement - React
It offers Hot Module Replacement out-of-the-box, you only have to follow these instructions for your project: https://webpack.js.org/guides/hmr-react/#code
Please refer to the main repo contributing info.