A RubyGem to allow you to use the Webpack as your asset pipeline in Hanami.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.



⚠️ This is a very experimental version, but it works, so, be aware!

This plugin will help you to use Webpack as your asset pipeline for Hanami with webpack-dev-server for development.

It'll work without any problem with your existent assets using the hanami/assets.


I'll assume that you already have the Node.js installed.

  1. Add the gem 'hanami-webpack', github: 'samuelsimoes/hanami-webpack' on your Gemfile.
  2. Run bundle install.
  3. Copy the base Webpack config webpack.config.sample.js and package.sample.json on your app root (removing the .sample in the name).
  4. Run npm install.
  5. Run bundle exec hanami serve and profite.


On development, this plugin will try to start the webpack-dev-server with your Hanami server. You can disable this behavior (see configuration section).

You will need use the webpack_asset_path helper on your templates to get the correct bundle path.

Let's say that you have a bundle with the name web.people. You should place on your template:

<script src="<%= webpack_asset_path('web.people') %>"></script>

To make a build just run ./node_modules/.bin/webpack on the project root.


All plugin configuration is done by the following ENV vars:

Name Default Value Description
WEBPACK_DEV_SERVER_HOST localhost The host where your asset dev server is running.
WEBPACK_DEV_SERVER_PORT 3020 The port where your asset dev server is running.
WEBPACK_PUBLIC_PATH / Whenever you want use other publicPath you should update this var.
INBUILT_WEBPACK_DEV_SERVER true If you want start the webpack-dev-server when you start your hanami server (except on production).
WEBPACK_DEV_SERVER false on production true in any other env. If you want disable the webpack-dev-server integration set this as false.
WEBPACK_MANIFEST_FILE webpack_manifest.json The name of the manifest file that exposes the assets path to Hanami.

With Heroku

Just run the command below to configure your Heroku app. This command will set your Hanami app to serve the assets (you probably already done this) and will set the Ruby and Node.js buildpacks.

heroku config:set SERVE_STATIC_ASSETS=true && heroku buildpacks:set --index 1 heroku/nodejs && heroku buildpacks:set --index 2 heroku/ruby

To build your assets when you deploy, you will need place on your package.json the Heroku auto-commands:

  "scripts": {
    "build": "webpack",
    "heroku-postbuild": "npm run build"


  • Write tests.
  • Release on RubyGems.
  • Research a better way to do these things without monkey patches (I have done, but looks like that with the current Hanami version it's impossible).

Samuel Simões ~ @samuelsimoes ~ Blog