Blank output with Storybook-Static
See original GitHub issueDescribe 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:
- Created 3 years ago
- Reactions:3
- Comments:18 (11 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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.
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!