Blank output with Storybook-Static

See original GitHub issue

Describe the bug I’m creating a storybook that includes typescript with react. The stories are located at ./stories (not in src). I have a separate webpack.config for storybook as well. I’m running the build-storybook command, and then running npx http-server .out, and the result is a blank screen; completely blank with only the tab saying the name of the output.

Expected behavior I expect the server to launch a static version of storybook Code snippets .storybook webpack config:

const path = require("path");
const config = require("config");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const CONFIG = config.has("public") ? config.get("public") : {};

module.exports = {
  entry: "./src/app/index.tsx",
  resolve: {
    extensions: [".ts", ".tsx", ".js", "json"],
   
  },
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.min.js",
  },
  devServer: {
    historyApiFallback: true,
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
      },
      {
        
        test: /\.css$/,
        use: [
          "style-loader", // creates style nodes from JS strings
          "css-loader", // translates CSS into CommonJS
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf|png|svg|jpg|gif)$/,
        use: ["file-loader"],
        include: path.resolve(__dirname, '../')
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../')
    },

    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/assets/index.html",
    }),
    new webpack.DefinePlugin({
      CONFIG: JSON.stringify(CONFIG),
    }),

  ],
};

./storybook/Main.js

module.exports = {
  stories: ['../stories/**/*.stories.[tj]sx'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-knobs/register'],
  webpackFinal: async config => {
    // do mutation to the config

    return config;
  },
};

npm run storybook works perfectly fine, and launches storybook on a local port, but when I run the npx server, it doesn’t show me anything.

System: Ubuntu 18.04 Most recent node/react/typescript/sb

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:3
  • Comments:18 (11 by maintainers)

github_iconTop GitHub Comments

3reactions
ghtjiann4321commented, Sep 3, 2020

Just tested this now… Using “serve” it doesn’t load the stories. Tried installing “http-server” and It loads the stories. The new issue is that I need to refresh the browser in order for me to change to a different story. clicking other stories doesn’t reload the canvas.

0reactions
stale[bot]commented, Dec 26, 2020

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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

CLI options - Storybook
Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and...
Read more >
Publish Storybook
Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and...
Read more >
Storybook Composition
You can compose any Storybook published online or running locally no matter the view layer, tech stack, or dependencies. Storybook reference external.
Read more >
Frequently Asked Questions - Storybook - JS.ORG
Is it possible to browse the documentation for past versions of Storybook? What icons are available for my toolbar or my addon? I...
Read more >
Deploy - Storybook Tutorials - JS.ORG
Running yarn build-storybook will output a static Storybook in the storybook-static directory, which can then be deployed to any static site hosting service ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found