Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Serving static files in "storybook js"

I am using storybook documentation and couldn't load images from assets folder. As documentations says: "if you are using a custom Webpack config, you need to add the file-loader into your custom Webpack config" - and my webpack.config file looks like:

const path = require('path');


 module.exports = ({ config }) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    });
 config.module.rules.push({
   test: /\.(ts|tsx)$/,
   use: [
     {
       loader: require.resolve('awesome-typescript-loader'),
     },
   ],
 });
 config.module.rules.push({
   test: /\.(svg|png|jpe?g|gif)$/i,
   use: [
     {
       loader: 'file-loader',
     },
    ]
  },);

  config.resolve.extensions.push('.ts', '.tsx')


  return config;
};

package.json:

"react": "^16.10.1",
"react-dom": "^16.10.1",
"typescript": "^3.6.3",
"@storybook/react": "^5.2.1",
"@types/storybook__react": "^4.0.2",
"file-loader": "^4.2.0"

This is after yarn storybook webpack-debug

seems like something is missing from storybooks documentation, or I am doing something wrong :? thank you whoever can help me out with this problem. ^_^

like image 892
Vano Avatar asked Oct 07 '19 10:10

Vano


People also ask

Can you host storybook?

You can publish the static Storybook web app to many hosts. We maintain storybook-deployer , a handy tool to help you publish to AWS or GitHub pages.

What is .storybook folder?

Storybook is configured via a folder called . storybook , which contains various configuration files. Note that you can change the folder that Storybook uses by setting the -c flag to your start-storybook and build-storybook scripts.

Does storybook support React 18?

Storybook 6.5 supports React 18 and Angular 14 out of the box. When you run your React project for the first time, it will auto-detect the React version and use the new root API if it detects it on React 18. Check out #17215.

What is storybook server?

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.


1 Answers

Configuring the static folder in the storybook-start script worked for me:

Documentation: Static Files Via Directory

You can also configure a directory (or a list of directories) for searching static content when you are starting Storybook. You can do that with the -s flag.

//package.json
{
"scripts": {
    "start-storybook": "start-storybook -s ./public -p 9001"
  }
}

Good Luck...

like image 173
Aakash Avatar answered Sep 27 '22 22:09

Aakash