Themekit: Feature Request: Live reload with `theme watch`

[evvvritt]

Hi, just voicing a request to add a livereload feature to the theme watch function. Thanks!

[tanema]

Duplicate of #236

[78doog]

I dont think this is a duplicate, Livereload is like Browsersync. Slate https://shopify.github.io/slate/ uses Browsersync but you are tied in to Slates way of doing things which is a good or bad thing depending on your preferences I guess...

[tanema]

Reopening because it is a good point that themekit should enable any workflow and not be as opinionated as slate.

[tanema]

This is difficult now that I am actually looking into the implementation of this. Since the code is not served locally, it is really hard to figure out how to reload a page. If it was served locally it would be non trivial, I would setup a websocket to force the page to refresh. Since theme kit is only concerned about transferring file data to shopify and back there is currently no way I can think of to reload the webpage. I will keep this open a little while longer to think about it or for suggestions if anyone has any.

[tanema]

I have talked to some of our frontend devs and it seems like a lot of these tools starts up a proxy on another port that you would load in your browser. Then the proxy would inject JS with websocket interaction so that live-reload functionality can be inserted. This is definitely doable but I will have to experiment a bit with this feature.

[dave4jr]

Hi Tim, thanks for all your work on this project, it's hugely helpful. I have a question that relates to this. I use Sublime Text with Live Reload chrome plugin. I want to use the --notify command but I can't for the live of me figure out which file to notify! Also, do you have any recommendations on being able to develop shopify on localhost? The only option I can think of would be firing up an nginx server, but thought I'd ask if you knew of any better ways? Thanks!

[tanema]

you can pass any file path into notify. For instance you can pass theme watch --notify=/tmp/themekit the provide that path to whatever you use to reload your browser. What this will do is

When watch becomes idle

• create the file if it does not exist
• touch the file if it already exist to emit a change event

This allows you to trigger another program for whatever reason you may choose. I am not sure exactly how you could do this with livereload because I have not used it.

[keyurshah]

I'm using prepros with themekit and it works great. perhaps this feature is not needed inside themekit.

[tanema]

@keyurshah do you have a guide for setting up themekit with prepros. I am starting to think that there are a huge amount of live reload tools out there and to keep themekit from reinventing the wheel and keep it un-opinionated I should stay away from implementing this.

I think the best option for this is to document how to use the most popular tools with themekit. Slate uses BrowserSync so I could document how to set that up. I could probably document a live reload chrome plugin with a notify file as well.

[keyurshah]

sorry, just saw this in my inbox.

I was about to add screenshots for my setup, but found this guide by Shopify's Tiffany Tse that already exists:

https://www.shopify.com/partners/blog/live-reload-shopify-sass?utm_medium=social&utm_campaign=partnersocial&utm_source=twitter&utm_content=resource

but in summary, here is how I am setting it up in Prepros:

Here are the sections for each setting to configure:

File Watcher

add .liquid to my watchers

Live Preview

Enter your domain name to preview

Live Reload

I set mine for 2000 ms (2 seconds) but can configure as needed per your network connection. If it's too quick then it won't capture the changes on loading.

One thing to keep in mind is that you have to publish changes to your live theme to see the changes.

You can configure that in your themekit settings. I publish to the live theme setting

Here is a good guide to use

http://www.brettchalupa.com/shopify-theme-development-workflow

[keyurshah]

one nice thing about prepros is that you can also have it concatenate multiple files into one and use it to process .less or .sass as well before uploading. You don't need to rely on uploading to shopify and then have it processed.