Polling Storybook with Docker-Compose-CodePudding

I am trying to run a basic NextJS and Storybook application using Docker and cannot get hot reloading to work with Storybook. I tried adding the webpackDevMiddleware piece which I use in next.config.js to Storybook's main.js as an attempt to leverage Webpack options polling and it did not work. Can't seem to find any useful solutions in my search attempts. Does anyone have an idea on how to get this working?

Thanks!

Storybook main.js

module.exports = {
  stories: [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: "@storybook/react",
  core: {
    builder: {
      name: "@storybook/builder-webpack5",
      options: {
        webpackDevMiddleware: (config) => {
          config.watchOptions = {
            poll: 1000,
            aggregateTimeout: 300,
          };
          return config;
        },
      },
    },
  },
};

Dockerfile-storybook

FROM node:16-alpine

RUN mkdir -p /app

WORKDIR /app

COPY package.json /app
COPY yarn.lock /app

RUN yarn install

COPY . /app

EXPOSE 3200

CMD yarn storybook

docker-compose.yaml

version: "3"

services:
  nextjs:
    build:
      context: .
      dockerfile: Dockerfile-dev
    container_name: nextjs
    restart: always
    volumes:
      - ./:/app
      - /app/node_modules
      - /app/.next
    ports:
      - 3000:3000
  storybook:
    build:
      context: .
      dockerfile: Dockerfile-storybook
    container_name: storybook
    restart: always
    volumes:
      - ./:/app
      - /app/node_modules
      - /app/.next
    ports:
      - 3200:3200

CodePudding user response：

Found the solution! webpackFinal provided by Storybook is a way to add options to Webpack. Here's the answer for the next person looking up how to do this.

module.exports = {
  stories: [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: "@storybook/react",
  core: {
    builder: {
      name: "@storybook/builder-webpack5",
    },
  },
  webpackFinal: async (config) => {
    config.watchOptions = {
      aggregateTimeout: 200,
      poll: 1000,
    };
    return config;
  },
};