@storybook/server add native support for livereload

[santialbo]

With @storybook/server one of the nicest features of storybook which is live updates is lost.
I've managed to recreate it by creating a livereload server and embedding the livereload script (<script src="http://localhost:35729/livereload.js"></script>) on the responses from my server. It works nice and I think this could probably be a natively supported feature.

Describe the solution you'd like
If the property livereload is passed to the parameters the livereload script is embedded automatically on the story.

export const parameters = {
  server: {
    url: `http://localhost:${process.env.PORT || 5000}`,
    livereload: process.env.LR_PORT || 35729
  }
};

Describe alternatives you've considered
The only alternative is adding it myself but other people could benefit from this.

Are you able to assist to bring the feature to reality?
yes!

[shilman]

Sounds great! @jonspalmer WDYT?

[jonspalmer]

I agree that we'd like to support live reload in developer mode. However, it should work to reload the json stories when they change. That's automatic in Webpack with json loaders etc.

If you're using the Rails gem to generate the json stories from ViewComponents then there is a gap there. I had assumed that the simplest solution was a guard plugin that would re-compile the json stories when the ruby files changed. I haven't had time to implement that feature yet.

@santialbo Can you share a few more of the details on how you'd like it to work and what's missing?

[santialbo]

In my case I'm rendering some mjml email templates with node.js and the json stories are written by hand.

I wanted storybook to be my main developer tool for email development so I built the server with livereload. It looks like the following

import express from "express";
import { createServer } from "livereload";

const app = express();

app.get("/:email", async (req, res, next) => {
  // render email for req.params.email and
  // let html = ...
  // include <script src="http://localhost:35729/livereload.js?snipver=1"></script> on the generated html
  res.send(html);
}).listen(process.env.PORT || 5000);

createServer({ exts: ["tsx", "ts", "json"] }).watch([__dirname + "/src/emails/"]);

This works for me, I just wanted to start the conversation about having a natively supported feature and livereload seems a good initial step.
In the future, maybe something better could be developed where instead of reloading, refetches the endpoint and swaps the root content similarly to what turbolinks does.

[jonspalmer]

@santialbo ❤️ to hear about new use cases of server.

I understand the need here. What I'm not sure about is the implementation. Webpack, and hence Storybook, already has a hot reload feature and it works extremely well. Can we hook into that existing mechanism?

On the Rails backend for server there are several sources of change we'd like to reflect in Storybook.

1. ViewComponent ruby declarations
2. ViewComponent view templates
3. Sidecar view component css and js files
4. Ruby stories around ViewComponents

I had imagined using Guard to watch those files and by convention recompile the appropriate json stories (I did an initial spike and its clearly doable but a bit more involved than I'd have hoped for). Livereload might be an option there too but I'm not sure how we could wrap the Ruby files too.

@shilman Any thoughts on an unobtrusive and natural way to wire up reloading like this?

[shilman]

@jonspalmer overwriting JSON files is exactly how I'd go about it. In what situation wouldn't that work?

[jonspalmer]

@shilman I'm guessing that @santialbo's use case is that the json is not being generated. It's being written by hand and I suspect checked in. So touching the JSON files to force a reload probably has implications for source control etc. There are likely ways around that and I would encourage thought into that vs adding a second live reload mechanism.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[titouanmathis]

The livereload solution did not work for me, but I was able to set up a re-rendering when my template files change with chokidar and a WebSocket server:

.storybook/main.js

if (process.env.NODE_ENV === 'development') {
  const path = require('path');
  const chokidar = require('chokidar');
  const { Server: WebSocketServer } = require('ws');

  const wss = new WebSocketServer({ port: 40510 });
  const basePath = path.resolve(__dirname, '../web/wp-content/themes/my-theme/templates/')

  wss.on('connection', function (ws) {
    chokidar.watch(path.join(basePath, '**/*.twig')).on('change', (path) => {
      ws.send(path);
    });
  });
}

module.exports = { /* ... */ };

.storybook/preview.js

import addons from '@storybook/addons';
import createChannel from '@storybook/channel-postmessage';

if (process.env.NODE_ENV === 'development') {
  const isBrowser =
    navigator &&
    navigator.userAgent &&
    navigator.userAgent !== 'storyshots' &&
    !(navigator.userAgent.indexOf('Node.js') > -1) &&
    !(navigator.userAgent.indexOf('jsdom') > -1);

  function getOrCreateChannel() {
    let channel = null;
    if (isBrowser) {
      try {
        channel = addons.getChannel();
      } catch (e) {
        channel = createChannel({ page: 'preview' });
        addons.setChannel(channel);
      }
    }

    return channel;
  }

  const ws = new WebSocket('ws://localhost:40510');

  ws.onopen = function () {
    console.log('WebSocket is connected ...');
  };

  ws.onmessage = function () {
    const channel = getOrCreateChannel();
    if (channel) {
      console.log('Rerendering...');
      channel.emit('forceReRender');
    }
  };
}

export const parameters = { /* ... */ };

I think this could be improved as I am not familiar with WebSockets, but it works 🙂

[jonspalmer]

@santialbo thoughts on my comment #13136 (comment) ?
I'd like to better support these use cases but needs more information to come up with a good solution. I'm hesitant to add a 2nd reload mechanism when one already exists. Happy to continue to discuss.

[santialbo]

@shilman I'm guessing that @santialbo's use case is that the json is not being generated. It's being written by hand and I suspect checked in. So touching the JSON files to force a reload probably has implications for source control etc. There are likely ways around that and I would encourage thought into that vs adding a second live reload mechanism.

Exactly @jonspalmer, my json files are manually generated. I edit mjml files and livereload is listening for changes in those files to trigger the reload on the storybook iframe.
And whenever my mjml templates need a new interpolation property y add it manually to the json file.

[shilman]

Converting this to a discussion. We’re reserving feature issues for things that are on our short-term roadmap. We’ll check back periodically to see whether this is a good candidate to be added. If this feature would be useful to you, please upvote!