Re-Document Browser Refresh mechanisms

[tanema]

We have now implemented a notification system that will now notify after the asset has been updated on shopify. It also allows for a webhook notification as well as the file notification. After all of these changes, I think we can document a better browser reload setup.

@felipebrahm provided a good process using webhooks here that we could document in a more formal format. This could either be a tutorial on shopify.dev or just a single page added on the docs site here. #749 (comment)

Process (referenced from above comment)

• Install a livereload server implementation example (npm install --save-dev tiny-lr)
• Create a livereload-server.js file:

const tinylr = require('tiny-lr');
const port = 35729; // standard LiveReload port
tinylr().listen(port, () => console.log('Listening on %s', port))

• Then start the live reload server and theme kit

node livereload-server.js & theme watch --notify="http://localhost:35729/changed"

• open Chrome and go to my my-website.myshopify.com
• enable the Live Reload Chrome extension

This would enable live reloading and would even change css files without a reload.

Issues that could be resolved by this documentation

• Gulp Watch doesn't trigger while processing scss with Gulp #607
• BrowserSync Add browser-sync reload when file processed feature #688

[tarin-swanky]

Thank you for this fix @tanema, however, I'm a bit confused. The very first time I make a save to a file, browser-sync reloads but it doesn't reload the changes. After the first time however it works. This is my code I currently have in my package.json, I'm using notify

"sync": "concurrently -n \"theme,sync\" -c \"bgBlue.bold,bgGreen.bold\" \"theme watch --allow-live --notify=themeWatchNotify\" \"browser-sync start --proxy 'https://example.myshopify.com/' --files 'themeWatchNotify' --reload-delay 1000 --config bs-config.js\""

I'm wondering why it's not reloading my changes the first time

[tanema]

There is no reason why it would work differently on the first request than any other request, though I will take a look around again just in case. Could it be your command that is at fault? Did it work on old versions?

[tarin-swanky]

I have a feeling it may be the command as when I refresh manually the first time I make changes, the changes that I made come into effect. It just doesn't do it automatically the first time. I am new to this so was hoping someone could give me some pointers on why it may not be working the first time

[tarin-swanky]

@tanema I need to add a refresh time of 2000 for it to actually work the first time. Can this be fixed or will there always be a delay time due to Themekit

[tarin-swanky]

Live reload with Chrome extension can be buggy too. Sometimes it works first time, other times it doesn't. I think it's dependent on whether the website and the chrome extension are all active before making any changes and running the command

[tanema]

@tarin-swanky I have left you an urgent comment on one of your repos, you should check your notifications for it.

Which files are you changing? Are they scss or liquid or just plain css/js?

[tarin-swanky]

@tanema Thank you, I did see. Its only a practice dev site but have put it back to private. I've changed JSON content file to test it, was only changing a couple words here and there to see if it would work. It seems like an issue with Shopify more than anything else. Have tested it many different ways and it always needs a delay, even the live reload server you commented about

[tanema]

Okay so if you are changing

• liquid
• scss
• config files (json files in /config)

These trigger a theme rebuild on shopify's server. This may be your delay. Unfortunately there is no way for themekit to know if/when the rebuild would complete. To verify this, try changing a plain js file or plain css file and see if there is a similar delay

[tarin-swanky]

I thought this may have been the case after testing. Thank you

[felipebrahm]

@tanema I had been meaning to submit a PR to update the docs or maybe even write a long form blog post explaining all the different ways for developers to improve their Shopify theme local development, but I haven't had the time to do it. I also have some ideas in mind to write a node.js module that could act as a proxy to serve certain files locally (JS, CSS, SCSS) instead of waiting for themekit to upload them. I'll definitely ping you guys if I end up writing that blog post and/or that module I have in mind :)

[felipebrahm]

@tarin-swanky for me, it works fine with no delay when I'm working on CSS files (I'm doing the SCSS post-processing locally and then just uploading a CSS via themekit). Right now, with the latest themekit beta my live reload script looks like this:

const tinylr = require('tiny-lr');

const LIVE_RELOAD_PORT = 35729;

// Create a live reload server instance
const lrserver = tinylr();

lrserver.listen(LIVE_RELOAD_PORT, (err) => {
  if (err) {
    console.log(`ERROR while trying to listen on port ${LIVE_RELOAD_PORT}`, err);
    return;
  }
  console.log(`Live Reload server started on port ${LIVE_RELOAD_PORT}`);
});

If you need a delay, you could try something like this (this was the script I was using before the latest update for themekit, so I don't really need this anymore):

const chokidar = require('chokidar');
const tinylr = require('tiny-lr');

const LIVE_RELOAD_PORT = 35729;

// Create a live reload server instance
const lrserver = tinylr();

lrserver.listen(LIVE_RELOAD_PORT, (err) => {
  console.log(`Live Reload Server Started on port ${LIVE_RELOAD_PORT}`);
});

// Watch the theme directories (to know which files were changed)
// and the theme.update file (to be notified when themekit has finished uploading changes to Shopify)
const filesToWatch = [
  './assets',
  './config',
  './layout',
  './locales',
  './sections',
  './snippets',
  './templates',
  './tmp/theme.update',
];

const watcher = chokidar.watch(filesToWatch, {
  ignoreInitial: true,
});

let filesChanged = [];

watcher.on('all', (event, path) => {
  if(!/^(add|change)$/.test(event)) {
    // If the event is not "add" or "change" then ignore.
    return;
  }

  // If the file is not theme.update...
  if(!/(^|\/)theme\.update$/.test(path)) {
    console.log(`Change detected: ${path}`);
    // We store which file was changed and we wait to notify the browser once theme.update has changed.
    if(!filesChanged.includes(path)) {
      filesChanged.push(path);
    }
    return;
  }

  console.log(`Notify change detected: ${path}`);

  // If the theme.update file changed, then themekit has finished uploading changes to Shopify, so we tell the browser to reload.
  console.log('Notifying browser to reload', filesChanged);
  notifyBrowser(filesChanged);
  filesChanged = [];
});

const DELAY = 1000;

const notifyBrowser = (files) => {
  setTimeout(() =>
    lrserver.changed({
      body: { files },
    });
  , DELAY);
};

[bigskillet]

@tarin-swanky, I've noticed this issue too.

I have to manually refresh the first time I make a change, but it works great after that. Adding a reloadDelay seems to solve the first change issue, but running both --notify and reloadDelay kind of defeats the purpose. You have to wait for the notify round trip, then wait for the reload delay, essentially doubling the wait time for each change moving forward. Pretty annoying for sure!

I also noticed that Shopify Slate has the same issue.

[eloyesp]

Just wanted to share what my current setup. The delay is not fixed, but seems simpler.

[Zhangyinshuai]

There will still be delays, though， But it solves the live preview problem， Thank you all