Add HMR to the dev server #641

dhh · 2017-08-12T19:59:20Z

Extracted from #601

gauravtiwari · 2017-08-12T20:03:49Z

lib/install/config/webpack/development.js

@@ -14,7 +15,8 @@ module.exports = merge(sharedConfig, {
  devServer: {
    clientLogLevel: 'none',
    host: settings.dev_server.host,
-    port: settings.dev_server.port,
+    port: settings.dev_server.port


Missing trailing comma ;)

gauravtiwari · 2017-08-12T20:04:27Z

lib/install/config/webpack/development.js

@@ -14,7 +15,8 @@ module.exports = merge(sharedConfig, {
  devServer: {
    clientLogLevel: 'none',
    host: settings.dev_server.host,
-    port: settings.dev_server.port,
+    port: settings.dev_server.port
+    hmr: settings.dev_server.hmr,


Option name is hot: settings.dev_server.hmr

gauravtiwari · 2017-08-12T20:15:29Z

I will push some updates for sass.js since the styles won't be extracted when HMR is on 👍 and then we should be good to go

justin808 · 2017-08-13T09:01:09Z

lib/webpacker/helper.rb

@@ -42,7 +45,9 @@ def javascript_pack_tag(*names, **options)
  #   <%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
  #   <link rel="stylesheet" media="screen" href="/packs/calendar-1016838bab065ae1e122.css" data-turbolinks-track="reload" />
  def stylesheet_pack_tag(*names, **options)
-    stylesheet_link_tag(*sources_from_pack_manifest(names, type: :stylesheet), **options)
+    unless Webpacker.dev_server.running? && Webpacker.dev_server.hot_module_replacing?


This is not correct in that React on Rails users will build static assets for test runs while the dev server is possibly running for development. Thus, we'll skip this tag when we need it for tests.

@justin808 What are the implications? I guess dev server can be used too for serving assets in test environment and don't think that will affect any behaviour. Obviously, if someone wants to statically build and test they can turn off the dev-server and use watcher or on-demand compilation. With dev-server proxy usage is more transparent and consistent so the output will be same in views regardless of compiler used.

I fixed it such that Webpacker.dev_server.running? will return false in testing by moving the dev_server configuration to the development env only in webpacker.yml. So now the tag will appear in test mode.

@gauravtiwari wrote:

What are the implications?

Since we have a different test setup in webpack for test compared to dev (we want more logging in dev), I'd feel uncomfortable that some of the setup is coming from a different webpack config.

justin808 · 2017-08-13T09:03:13Z

lib/webpacker/helper.rb

@@ -42,7 +45,9 @@ def javascript_pack_tag(*names, **options)
  #   <%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
  #   <link rel="stylesheet" media="screen" href="/packs/calendar-1016838bab065ae1e122.css" data-turbolinks-track="reload" />
  def stylesheet_pack_tag(*names, **options)
-    stylesheet_link_tag(*sources_from_pack_manifest(names, type: :stylesheet), **options)


We need to update the above docs to indicate what happens in HMR, as well as for the possibility that the webpack-dev-server is not running for development mode.

Yes, added some notes in the README. Anything missing?

The doc for the method should be updated (or removed? with a reference to the readme.)

* master: Update React pointers to include react on rails

gauravtiwari · 2017-08-13T21:58:14Z

lib/webpacker/helper.rb

@@ -32,6 +32,9 @@ def javascript_pack_tag(*names, **options)
  # in config/webpack/shared.js. By default, this list is auto-generated to match everything in
  # app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.
  #
+  # Note: If the development server is running and hot module replacement is active, this will return nothing.
+  # In that setup you need to configure your styles to be inlined in your JavaScript for hot reloading.
+  #


@justin808 You mean this doc?

Maybe adjust this line to indicate more than "development mode":

# # In development mode: # <%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # => # <link rel="stylesheet" media="screen" href="/packs/calendar.css" data-turbolinks-track="reload" />

Lowercase

* master: Move to a helper and fix tests (#648) Spacing

Add HMR

f641cd0

gauravtiwari reviewed Aug 12, 2017

View reviewed changes

dhh mentioned this pull request Aug 12, 2017

Support React on Rails by merging Webpacker Lite #601

Closed

Fix development.js changes

97a8d00

gauravtiwari added 6 commits August 12, 2017 22:33

Update sass loader and remove redundant config from vue loader

a6bc2ce

Remove redundant variables

f4654de

Update condition for extracting CSS

686e41b

Update readme and changelog

7cbf899

Fix typo

7989628

Make linter happy

c8260d6

justin808 reviewed Aug 13, 2017

View reviewed changes

gauravtiwari and others added 2 commits August 13, 2017 18:25

Merge branch 'master' into hmr

b240023

Merge branch 'master' into hmr

604b30d

* master: Update React pointers to include react on rails

gauravtiwari reviewed Aug 13, 2017

View reviewed changes

Add a comment for HMR mode

63cddc5

Lowercase

gauravtiwari force-pushed the hmr branch from be11413 to 63cddc5 Compare August 14, 2017 08:42

gauravtiwari added 3 commits August 15, 2017 18:15

Merge branch 'master' into hmr

bdaa925

* master: Move to a helper and fix tests (#648) Spacing

Add a note to turn off HMR

51b34ce

Fix wording

8c1dd96

gauravtiwari merged commit 8851d8b into master Aug 15, 2017

gauravtiwari deleted the hmr branch August 15, 2017 17:28

javan mentioned this pull request Jan 12, 2018

Asset helpers should not call Webpacker.dev_server.running? in production #1173

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add HMR to the dev server #641

Add HMR to the dev server #641

dhh commented Aug 12, 2017

gauravtiwari Aug 12, 2017

gauravtiwari Aug 12, 2017

gauravtiwari commented Aug 12, 2017

justin808 Aug 13, 2017

gauravtiwari Aug 13, 2017

dhh Aug 13, 2017

justin808 Aug 13, 2017 •

edited

Loading

justin808 Aug 13, 2017

gauravtiwari Aug 13, 2017

justin808 Aug 13, 2017

gauravtiwari Aug 13, 2017

justin808 Aug 13, 2017

gauravtiwari Aug 14, 2017

Add HMR to the dev server #641

Add HMR to the dev server #641

Conversation

dhh commented Aug 12, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gauravtiwari commented Aug 12, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

justin808 Aug 13, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

justin808 Aug 13, 2017 •

edited

Loading