Skip to content

Using Webpacker to compile javascript assets

Jump to bottom Edit New page
Charlie Morris edited this page Sep 5, 2018 · 19 revisions

This is a work in progress. And should be considered experimental.

Installing Webpacker in Blacklight

This requires Blacklight 7 or higher.

These instructions will show you how to use Webpacker with Blacklight in development mode. They have been tested on a Mac 10.12.6 as of August 28, 2018. The Webpacker gem will replace the entire asset pipeline for you. You won't need sprockets or the Action Cable any more.

Here's what to do:

  1. Install nodejs and npm (they are packaged together)
  2. Install yarn
  3. Add gem 'webpacker', '~> 3.5' to your Gemfile
  4. Run bundle install (add --without produciton test to set development mode and not isntall produciton/test gems like mysql2)

Then, make package.json look like this:

{
  "name": "<name of your app here>",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "3.5",
    "blacklight-frontend": "https://github.com/projectblacklight/blacklight#master",
    "caniuse-lite": "^1.0.30000697",
    "popper.js": "^1.14.3",
    "twitter-typeahead-rails": "https://github.com/yourabi/twitter-typeahead-rails.git#v0.11.1.pre.corejavascript"
  },
  "devDependencies": {
    "webpack-dev-server": "2.11.2",
    "webpack": "^3.0.0"
  }
}
  1. Run yarn (this is shorthand for yarn install and it will create a yarn.lock)
  2. Run rails webpacker:install
  3. Run rails webpacker:compile

Next, change config/webpack/environment.js as per https://getbootstrap.com/docs/4.0/getting-started/webpack/ and https://github.com/rails/webpacker/blob/master/docs/webpack.md#plugins to this:

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.prepend(
    'Provide',
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default'],
    })
)


module.exports = environment

In your pack file (app/javascript/packs/application.js), require blacklight, popper, typeahead, bootstrap and an in-lined block of JS from a erb file:

// Vendor
require('twitter-typeahead-rails/vendor/assets/javascripts/twitter/typeahead/typeahead.bundle');
require('popper.js/dist/umd/popper');
require('bootstrap/dist/js/bootstrap');

// Local
require('blacklight-frontend/app/javascript/blacklight/core')
require('blacklight-frontend/app/javascript/blacklight/autocomplete')
require('blacklight-frontend/app/javascript/blacklight/checkbox_submit')
require('blacklight-frontend/app/javascript/blacklight/modal')
require('blacklight-frontend/app/javascript/blacklight/bookmark_toggle')
require('blacklight-frontend/app/javascript/blacklight/collapsable')
require('blacklight-frontend/app/javascript/blacklight/facet_load')
require('blacklight-frontend/app/javascript/blacklight/search_context')
// doing the above rather than require('blacklight-frontend/app/assets/javascripts/blacklight/blacklight')
// each script may have an import it's doing

// Removed from _home_text.html.erb
Blacklight.onLoad(function() {
    $('#about .card-header').one('click', function() {
        $($(this).data('target')).load($(this).find('a').attr('href'));
    });
});

Delete the contents of app/assets/javascripts.

Using Webpacker in Blacklight Development

Run bin/webpack-dev-server to have webpacker compile new JavaScript packs (and other assets) on change. Webpacker will also refresh your browser page when this dev server is running.

Add front end javascript dependencies with yarn add package followed by yarn to intall said package. yarn add package will update your package.json, yarn will update your yarn.lock. Note thate you probably need to shut off the webpack dev server and rails server when you're adding new packages.

Stuff on the Internet about rails and webpacekr

Add a custom footer

Quickstart Guide

Upgrading to Blacklight 9

Upgrading to Blacklight 8

Demo

Example installations

Blacklight Summits and Events

Clone this wiki locally