radanskoric / hanami-webpack

A RubyGem to allow you to use the Webpack as your asset pipeline in Hanami.

hanami-webpack

⚠️ 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.

Setup

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 profit.

Usage

On development, this plugin will start the serve:dev npm script with your Hanami server. If you used the example package.json this will start webpack-dev-server in development mode. You can disable this behavior (see configuration section).

You will need to 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 include it in your template with:

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

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

Configuration

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 did 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"
  }
}

Todo

• 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