nimbu-toolbelt

Usage

Prerequisites

You still need what was needed to use the old toolchain (ruby, bundler, ...)

Getting started

Add this package to your project:

yarn add --dev nimbu-toolbelt

This will also execute bundle install to install the old toolchain it uses.

Development server

To start developing on your project that uses this toolbelt, just run:

yarn nimbu server

This will start a webpack-dev-server (and the old nimbu server that it proxies to). Your browser should automatically open a connection to it at http://localhost:4567/.

Pushing to nimbu

Stop your development server

Make a production build with yarn nimbu build

Push to nimbu with yarn nimbu themes:push (this calls the ruby-based toolchain -> all arguments you know are supported)

NOTE: Both the development and production webpack configuration generate snippets/webpack.liquid that gives access to the information about which files webpack generated. This should be included and used in the layout of your theme. Make sure that include is there and that you push the snippet to nimbu!

There is one entrypoint src/index.js that gets compiled into javascripts/app.js and javascripts/vendor.js (split automatically).

(S)CSS

The CSS pipeline supports:

SCSS using sass-loader

Minification and autoprefixing using postcss-loader and autoprefixer

The entrypoint is src/index.scss, but any (S)CSS you import in your javascript or coffeescript will also be included in the output.

To import scss files from node_modules, use a ~ prefix. For example, to import bourbon that was added with yarn add bourbon:

@import '~bourbon/core/bourbon';

In development mode, the CSS is injected dynamically into the DOM using style-loader to support Hot Module Reloading. In production, the CSS is extracted into stylesheets/app.css.

Sometimes the dynamic injecting of CSS breaks stuff. For example, if you use javascript plugins that measure certain widths/heights when the document is ready. These might execute before the styles get injected. To test these kind of things, you can tell webpack to extract the CSS into stylesheets/app.css in development too. Start the development server with the following command to do that:

EXTRACT_CSS=true yarn start

Using the webpack output in your layout

Webpack generates snippets/webpack.liquid. If you include that snippet, you get access to:

webpack_build_timestamp: timestamp of the moment that webpack generated the snippet. Useful in a cache key.

webpack_chunks: an array of the names of the chunks that webpack generated.

webpack_js: a map of chunkname to javascript filename for that chunk.

webpack_css: a map of chunkname to array of css filenames for that chunk.