Migrate from webpack-rails to Webpacker #157

anandaroop · 2018-05-10T21:49:29Z

Problem

webpack-rails was the gem we used to tie Rails and Webpack together back in early 2017. At that point it was our best option, but now it is deprecated in favor of Rails' core Webpacker gem.

Solution

Migrate over to Webpacker. Roughly:

switch to the Webpacker gem and run its installers to bootstrap our config
move everything to the new expected locations
fix up all the wiring as needed
tweaks for local testing and CI to get green again

A lot more detail in the commits, hope the narrative is not too hard to follow.

This largely undoes https://github.com/artsy/rosalind/pull/9/commits

This gets rid of a weird bug where the Webpack-generated manifest.json file was coming up empty. Took me a bit of staring back and forth betweeen this repo and a pristine 5.2 Webpacker one to see that we didn't need a "webpack" entry in our package.json — it's a transitive dependency of "@rails/webpacker" so let's just rely on that one instead.

This is the only static css file in the app, and was inherited from ReactAutosuggest. Webpacker doesn't seem be loading this (even though we appear to have CSS loader and this file should be reachable from the entry point for this app?) So I'm just doing this dumb thing right now, and hope to undo it one way or another

And also 5x faster, by skipping node_modules

Originally introduced in 3427cb0, overwritten in 9711a3e, and restored here.

Prior to this commit we were inadvertently using Webpacker's default behavior of compiling assets only on demand. This commit restores the status quo — packs are compiled as their source files are changed.

damassi · 2018-05-14T19:23:47Z

config/webpacker.yml

+    host: localhost
+    port: 3035
+    public: localhost:3035
+    hmr: false


Is enabling HMR in webpacker as simple as setting this to true?

I was wondering the same 😄 — once this migration is complete I should try that out. Thanks for the reminder!

Yeah super curious, like if turning this on injects the other pesky required HMR bits into the JS automatically...

I believe the requestAnimationFrame polyfill is not required to run Jest specs ever since jestjs/jest#4568 (which landed in Jest v22) And the webpack dev server config was specific to the old webpack-rails gem — doesn't work with Webpacker, but also does not seem to be needed for CI to work.

Let's be honest with ourselves 😅

anandaroop

@jonallured this mini-epic is ready for ya now.

anandaroop · 2018-05-14T19:47:14Z

config/environments/test.rb

@@ -1,6 +1,5 @@
 Rails.application.configure do
  config.active_record.dump_schema_after_migration = false
-  config.webpack.dev_server.enabled = !ENV['CI']


Circle seems fine without this, but lmk if you think this might still be needed @jonallured ?

Yeah, looks great!!

anandaroop · 2018-05-14T20:00:42Z

package.json

    "stats-webpack-plugin": "^0.2.1",
    "style-loader": "^0.20",
    "styled-components": "^2.0",
-    "webpack": "^1.9.11",


This was left over from the webpack-rails config and was pointing to a very old version 😱

anandaroop · 2018-05-14T20:02:06Z

app/javascript/test/setup.js

@@ -1,4 +1,4 @@
-import 'raf/polyfill'
+// import 'raf/polyfill'


Later in this PR this gets deleted altogether, it's no longer needed as of Jest v22

jonallured

This is awesome work @anandaroop, thank you so much!! I've tried to do this twice and gotten stalled both times, so I know how much work it can be! Very thorough PR from what I can tell. I cloned it locally and everything is working as I expect so with Circle being green, I'm good with merging this and then we can kick the tires on staging. Maybe production deploy tomorrow assuming staging looks good.

jonallured · 2018-05-14T20:19:58Z

.rubocop.yml

    - Gemfile
    - vendor/**/*
+    - node_modules/**/*
+    - bin/webpack*


jonallured · 2018-05-14T20:20:18Z

config/environments/test.rb

@@ -1,6 +1,5 @@
 Rails.application.configure do
  config.active_record.dump_schema_after_migration = false
-  config.webpack.dev_server.enabled = !ENV['CI']


Yeah, looks great!!

jonallured · 2018-05-14T20:21:12Z

Procfile.dev

@@ -1,2 +1,3 @@
 web: bundle exec rails server
 worker: bundle exec sidekiq
+webpack: ./bin/webpack-dev-server


Yeah, I've never had luck with the Rails server doing what I wanted, so I tend to run a dev server anyway - good to formalize this!

jonallured · 2018-05-14T20:21:47Z

CHANGELOG.md

@@ -1,11 +0,0 @@
-# v1.5


💯 🥇 👑

jonallured · 2018-05-14T20:22:37Z

README.md

-assumed that while developing, you'll have `foreman` running (see next section),
-which means you'll have a webpack dev server running. If you see an error like
-this:
+project work together, we've added acceptance tests that run in Chrome. 


Thank you for simplifying this and then taking the time to update the README - should help the next person getting up-to-speed!! 👍

damassi · 2018-05-14T20:34:09Z

💯

anandaroop · 2018-05-14T22:20:21Z

Turns out this will need a small migration once deployed to production (I just ran the staging equivalent now):

heroku buildpacks:remove https://github.com/febeling/webpack-rails-buildpack.git --app rosalind-production

The webpack-rails buildpack is no longer needed, and in fact the build fails unless we make this update.

anandaroop added 17 commits May 10, 2018 17:41

Switch gem from webpack-rails to webpacker

4f64b54

This largely undoes https://github.com/artsy/rosalind/pull/9/commits

Run rake webpacker:install

9711a3e

Run rake webpacker:install:react

28bf717

Wire up a test page

6dd8065

Schlepp everything over to the new Webpacker home dir

0baf038

Update the wiring to point to the relocated code

91305d4

Make Rubocop happy

b206ac3

And also 5x faster, by skipping node_modules

Comment a webpack line that breaks tests locally

5603caa

Update static compilation step for CI

cbe80bb

Update reference to jest helper

1736561

Fix js absolute imports

f88cc11

Fix imports in test environment

733cdc6

Restore babel config for Styled Components

8bbf1f1

Originally introduced in 3427cb0, overwritten in 9711a3e, and restored here.

Tell Jest to ignore Webpacker's config files

e5fc300

Actually enable webpack dev server

0fa37fa

Prior to this commit we were inadvertently using Webpacker's default behavior of compiling assets only on demand. This commit restores the status quo — packs are compiled as their source files are changed.

anandaroop force-pushed the webpacker branch from 296982d to 0fa37fa Compare May 14, 2018 19:19

damassi reviewed May 14, 2018

View reviewed changes

anandaroop added 4 commits May 14, 2018 15:36

Drop the CHANGELOG

04ea605

Let's be honest with ourselves 😅

Bring README up to date with new setup

223673f

Clean out some smoke-test boilerplate

3259903

anandaroop changed the title ~~[WIP] Migrate from webpack-rails to Webpacker~~ Migrate from webpack-rails to Webpacker May 14, 2018

anandaroop assigned jonallured May 14, 2018

anandaroop commented May 14, 2018

View reviewed changes

jonallured approved these changes May 14, 2018

View reviewed changes

jonallured merged commit d2554d7 into artsy:master May 14, 2018

anandaroop mentioned this pull request May 15, 2018

Deploy: Rails 5.2, Webpacker, System Tests #161

Merged

anandaroop deleted the webpacker branch November 14, 2018 21:50

		@@ -1,4 +1,4 @@
		import 'raf/polyfill'
		// import 'raf/polyfill'

Migrate from webpack-rails to Webpacker #157

Migrate from webpack-rails to Webpacker #157

Uh oh!

Conversation

anandaroop commented May 10, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Solution

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

anandaroop left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jonallured left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

damassi commented May 14, 2018

Uh oh!

anandaroop commented May 14, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

anandaroop commented May 10, 2018 •

edited

Loading