New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reload the page after webpack watch compile #3871

merged 6 commits into from Jun 2, 2018


None yet
6 participants

atimmer commented Dec 8, 2017

I tried implementing webpack-dev-server but that I didn't crack that this time. This PR will at least save everyone some F5/Ctrl+R keystrokes.


aduth approved these changes Dec 11, 2017

I'd occasionally find it useful to keep an outdated version of an editor tab active for comparison's sake, but not often enough that this would disrupt my typical workflow.

I do worry a bit since Webpack rebuilds can be very noisy that we could encounter annoyances around unexpected reloads.

Generally I'd be okay with something like this though.

I tried implementing webpack-dev-server but that I didn't crack that this time.

Can you elaborate on the issues you were encountering?

@@ -177,6 +177,13 @@ function gutenberg_register_scripts_and_styles() {
filemtime( gutenberg_dir_path() . 'blocks/build/edit-blocks.css' )
wp_style_add_data( 'wp-edit-blocks', 'rtl', 'replace' );
if ( WP_DEBUG ) {

This comment has been minimized.


aduth Dec 11, 2017


Would SCRIPT_DEBUG be the more appropriate constant here? Based on the description, it seems primarily aimed at toggling minified version, so perhaps not.


This comment has been minimized.


atimmer commented Dec 12, 2017

@aduth Because WordPress itself is served by a different web server you have to proxy every request. Once I had that in place I didn't get any further. Webpack dev server wouldn't show console messages that it is trying to reload and the page wouldn't reload at all. (I would also like to add that I have never manually set up a Webpack configuration, so I might not be the best person to take a crack at this. I have asked @Xyfi to take another look once he's back from vacation.

If you want we could implement a new Gutenberg specific constant like GUTENBERG_LIVE_RELOAD which could be used to disable live reload.

atimmer added some commits Jan 5, 2018

Use different constant for Gutenberg livereloading
Also make the URL configurable

This comment has been minimized.


atimmer commented Jan 5, 2018

This is ready for review.

Live reloading can now be enabled by setting the GUTENBERG_LIVE_RELOAD constant to true. Any value other than true will be used as the URL to load. This can be used to customize the URL.

I've also made it possible to customize the port that the livereloading server uses. This is useful when multiple projects support livereloading. This is used like so: GUTENBERG_LIVE_RELOAD_PORT=35730 yarn dev.


This comment has been minimized.


gziolo commented May 10, 2018

@atimmer - it was accepted and seems to be useful, can you update and merge? I like that it is optional 👍


ntwb approved these changes May 16, 2018

@gziolo gziolo requested a review from pento May 16, 2018


This comment has been minimized.


gziolo commented May 16, 2018

This could also be helpful to include some note how to use it in CONTRIBUTING document.


This comment has been minimized.


pento commented May 17, 2018

I'm cool with this going in, but I'd want to actually build some stuff with it enabled before we start recommending it to all contributors.

@atimmer atimmer merged commit 23f8945 into WordPress:master Jun 2, 2018

2 checks passed

codecov/project 46.35% remains the same compared to 20293c4
continuous-integration/travis-ci/pr The Travis CI build passed

@atimmer atimmer deleted the Yoast:add/webpack-live-reload branch Jun 2, 2018

@mtias mtias added this to the 3.0 milestone Jun 4, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment