Skip to content
This repository has been archived by the owner on Jan 13, 2023. It is now read-only.

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

License

Notifications You must be signed in to change notification settings

samuelsimoes/hanami-webpack

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Usage

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.

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

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published