search

Shopify / themekit

Shopify theme development command line tool.
https://shopify.dev/tools/theme-kit
MIT License
1.19k stars 375 forks source link

Add browser-sync reload when file processed feature #688

Open superfein opened 4 years ago

superfein commented 4 years ago

I'm using Browser Sync in a Gulp workflow where I've added the Themekit npm module. There's quite a long delay from when Themekit sees a file has changed then processes a file change (any type of file, could be .liquid or .scss) and updates the file on the Shopify server. It's 3 seconds, sometimes closer to 4 seconds. I can set a delay using reloadDelay in the Browser Sync configuration, but that's not very effective as sometimes the browser reloads before the changes have been pushed to the server.

Of course what would be ideal is if Themekit was a faster at updating files on the server, but that's unlikely to change any time soon, so instead is there a way to only reload the browser (using Browser Sync) when Themekit has completed it's task of updating the file on the server? Currently there appears to be no way for Browser Sync and Themekit to communicate, and this makes it very difficult to manage the Themekit processing delay.

I've tried using Prepros to handle live reloading, but it's the same issue there, I need to set a specific delay before the browser refreshes, usually around 3 or 3.5 seconds, or the browser will reload too soon.

Gulp seems the most flexible as it allows me to do .liquid syntax escaping, I can enable sourcemaps and many more features. But the live reloading is a serious issue that I haven't seen anybody properly solve. I've tried probably 20 different Gulp configurations from Github repos from the community and none of them work or they all have issues with the live reloading part.

Feature request: add Themekit completed task notification which can be used to trigger the live reload.

tanema commented 4 years ago

So themekit just uses Shopify APIs. Themekit is entirely external to how Shopify works so there is no way that it can make updating the files faster.

The problem is that themekit has no way of knowing when the file is actually available for viewing in the browser. Once themekit has uploaded the file and receives a 200 HTTP status, everything beyond that is opaque. Shopify does a lot of things behind the scenes to make that asset available on the storefront and there is no external way of knowing when those processes are complete. There is not even a way from me to be able to estimate how long that process could take. You say it is about 3 seconds for you but that experience varies.

I will talk to the online store about this but themekit really doesn't have anything else available to make this experience better

samherrmann commented 4 years ago

@tanema I thought that would be the case. If there's no better solution after talking to the online store about this, I suggest, if I may, adding a note in the themekit FAQ (under How can I reload the page when I make changes) about this. That would provide themekit users a heads up that they may need to set a refresh-delay in their page-reload tool.

superfein commented 4 years ago

Thanks for your response @tanema, appreciate it. Once Themekit receives the 200 HTTP status, do you think there could be a method for relaying that to browser-sync, so that browser-sync reloads only after Themekit receives the 200 HTTP status? I know this wouldn't necessarily cut down on the 3 second delay, but could possibly push the reload time back enough to make browser-sync more accurate.

samherrmann commented 4 years ago

@superfein themekit can already do this with the --notify flag on the watch command. The file that you tell themekit to touch after the upload (i.e. after themekit receives the 200 HTTP status), that's the file that you tell browser-sync to watch. With this approach I still needed a 1.5s reloadDelay.

superfein commented 4 years ago

Thanks @samherrmann! Just curious, do you use Gulp in your Shopify dev workflow? Would you be willing to share your Shopify dev configuration with me?

samherrmann commented 4 years ago

@superfein, no I am not using Gulp yet. I am only just getting set up for Shopify theme development but it may not be long until I feel the need to bring in Gulp. You can see the minimal setup that I have so far here. If you want to discuss workflow further then feel free to create an issue on my linked repo.

PhilSole commented 3 years ago

@samherrmann the snippetOptions setting for your Browsersync setup was the final piece of the puzzle for me. Cheers!

adamatronix commented 2 years ago

Having trouble getting browser sync for me. Is my shopify site supposed to be injected automatically with the browser-sync js?