search

Shopify / slate

Slate is a toolkit for developing Shopify themes. It's designed to assist your workflow and speed up the process of developing, testing, and deploying themes.
https://shopify.github.io/slate
MIT License
1.28k stars 364 forks source link

Hot Reloading does not work using yarn watch #791

Open allanarmstrong opened 6 years ago

allanarmstrong commented 6 years ago

Problem

When using yarn watch instead of yarn start webpack looks for changes and compiles the new javascript/CSS fine but it does not initiate a hot reload from browser sync and does not update the files on the shopify server.

It seems as if using yarn watch does not cause assets to be served from localhost:3001 and will just use the asset already uploaded to shopify in a previous deploy.

Replication steps

Start yarn watch update a javascript or CSS file. Hot reloading is not initiated and doing a page refresh does not cause the CSS or javascript to update either.

Use yarn start to do an initial deploy to the theme and then update a file. Hot reloading seems to work fine.

huguestennier commented 5 years ago

I'm able to reproduce - specially when a file is empty first and not deployed yet to Shopify.

Thanks for the issue, @allanarmstrong - workaround for now is to yarn start but we'll look into it.

t-kelly commented 5 years ago

We can clarify this in the docs -- but yarn watch should only be used after your have previously run yarn start. yarn watch skips uploading the developer build of the .liquid files to Shopify servers and goes straight to watching files for changes.

If you had previously run yarn deploy then all your liquid files will have paths referencing cdn.shopify.com. Since yarn watch does up upload the development liquid files, paths will remain referencing cdn.shopify.com

If you run yarn start, development liquid files are uploaded which have paths referencing your local IP:3001. If you stop yarn start and want to get back up and running without needing to re-upload development files, you can use yarn watch.

Removing this as a bug and setting it as something we need to improve documentation on.

completewebco commented 5 years ago

I am having the same issue. I run slate start and everything works fine except the Reloading of the browser window. Here is my terminal:

Proxying: https://example-development.myshopify.com Access URLs:

   Local: https://localhost:3000/?preview_theme_id=*removed*
External: https://10.0.0.97:3000/?preview_theme_id=*removed*
      UI: http://localhost:3001

UI External: http://10.0.0.97:3001

[04:15:22] change in src/styles/src - change _typography.scss [04:15:22] running task - build:css [04:15:22] change in assets - change index.scss.liquid [04:15:22] Initiating deploy to development [04:15:22] running task [child process] - theme upload [development]: 1 / 1 [==================================================] 100 % [04:15:26] Transfer Complete: File changes successfully synced to store [BS] Reloading Browsers...

All browsers tested do not reload.

willwongco commented 5 years ago

I am having the same issue. I run slate start and everything works fine except the Reloading of the browser window. Here is my terminal:

Proxying: https://example-development.myshopify.com

Access URLs:

   Local: https://localhost:3000/?preview_theme_id=*removed*
External: https://10.0.0.97:3000/?preview_theme_id=*removed*
      UI: http://localhost:3001

UI External: http://10.0.0.97:3001

[04:15:22] change in src/styles/src - change _typography.scss [04:15:22] running task - build:css [04:15:22] change in assets - change index.scss.liquid [04:15:22] Initiating deploy to development [04:15:22] running task [child process] - theme upload [development]: 1 / 1 [==================================================] 100 % [04:15:26] Transfer Complete: File changes successfully synced to store [BS] Reloading Browsers...

All browsers tested do not reload.

I'm having the same issue as well

Nesters commented 5 years ago

Could this by any chance be an OS related issue? I experience this on Windows 10 when I run slate through WSL. I assume it doesn't proxy properly.

masterShake commented 5 years ago

I am having an issue where slate is watching for changes to my templates but not to the header.liquid file. Any ideas why that might be?

nelsonr462 commented 5 years ago

I had been having the exact same problem mentioned by @willwong89 and @completewebco

I was able to fix it by updating browser-sync to version 2.26.3

Was very strange that it had been working for me up until a sudden point.

bmsimo commented 5 years ago

@nelsonr462 I was able to fix it too , updating to v2.26 was the solution, although now i can't access the browsersync UI tab to see the options/plugins etc...

And one more thing, it's seems like there is some kind of lag when trying to reloading.

Reloading the page with F5 is faster than with browsersync, it's like it has to load 2 times and then reload.

GuillermoCasanova commented 5 years ago

Running into this issue even after running yarn start and then yarn watch. But its only with certain files that the reloading does not work. It's with sections and snippets liquid files. CSS changes and the index.liquid changes still successfully reload and display changes.

Basically I'll make a change on a section or snippet file and it refreshes to display no change made. But if I undo the change and save again it displays the previously uploaded files with the change I just undid.

Any help is much appreciated.

As a side note sort of related: Not sure if this helps anyone, but having a globally installed copy of browser-sync was making slate v0 and slatev1 not hot reload at all. Removing this global install of browser-sync made slatev0 work as expected but slate v1 has issues reloading regardless.