Comments (18)
@tomitrescak @purplecones there could be more than one static directories. You can pass them to storybook -s
as a comma separated list. So you can do,
start-storybook -p 9001 -s ./assets,/path/to/themes/directory
picked this info from #229
from storybook.
Hi @tomitrescak I just had the same issue, I fixed it by specifying a static directory. So you can run
start-storybook -p 6977 -s ./dist
in this example ./dist
is the output dir that webpack will put the files, so my webpack output config looks like this:
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/'
},
and I changed my package.json scripts block to
"scripts": {
"start": "node server.js",
"storybook": "start-storybook -p 6977 -s ./dist"
},
See here https://github.com/kadirahq/react-storybook/blob/master/docs/api.md#static-directory
from storybook.
Hi @tomitrescak sorry about the delayed response.
So I currently have 2 webpack configs - one at the root dir & one in .storybook:
.storybook/webpack.config.js
const path = require('path');
module.exports = {
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
presets: ['es2015']
},
include: path.resolve(__dirname, '../')
},
{
test: /\.css?$/,
loaders: [ 'style', 'raw' ],
include: path.resolve(__dirname, '../')
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"],
include: [
path.resolve(__dirname, '../client/'),
path.resolve(__dirname, '../components/')
],
exclude: path.resolve(__dirname, '../dist/')
}
]
}
}
And my root webpack.config.js
var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var autoprefixer = require('autoprefixer')
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'./index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new ExtractTextPlugin('styles.css')
],
module: {
loaders: [
{
test: /\.js$/,
loaders: [ 'babel' ],
exclude: /node_modules/,
include: __dirname
},
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
presets: ['es2015']
},
include: path.resolve(__dirname, '../')
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader!postcss-loader'),
include: __dirname
},
{
test: /\.(jpe?g|jpg|gif|png|woff|woff2|eot|ttf|svg)$/,
loaders: [
'url?limit=10000',
'img'
],
include: __dirname
}
]
},
postcss: function () {
return [autoprefixer]
}
}
The reason for 2 configs is at the time, storybook didn't allow for anything in .storybook/webpack.config.js
other than loaders. So I had webpack --watch running on my root dir & then ran storybook. I know this was a slightly hacky solution, but I think the changes in PR #64 will fix this. Will update today & see how it goes.
from storybook.
@tomitrescak The following config is working fine for me to load fonts and images. Might be helpful.
const path = require('path');
module.exports = {
module: {
loaders: [
{
test : /\.scss$/,
loaders: ["style", "css", "sass"],
include: path.resolve(__dirname, '../')
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
}
]
}
};
from storybook.
@roonyh that did it. Thanks for that insight!
from storybook.
Do you why is this? What's the normal webpack config we used when doing this?
Then we can see how to do something on this.
I am pretty new to webpack. So, any help would be great.
from storybook.
Unfotunatelly I'm not a webpack master. @eXon, would you be able to shed some light on this please? What is needed to be done to serve static assets from webpack?
from storybook.
@stewartduffy that is great! Woulf you be please so kind and post the whole webpack configuration file? Thanks!!
from storybook.
Did this help?
from storybook.
Works for me as well, thanks guys! Amazing stuff.
from storybook.
Guys, sorry to ask this here, but you seem to have much better understanding of webpack than me. I have a problem when storybook is not loading icons.woff and icons.tts from semantic ui. The framework is trying to load them from "themes/default/assets" directory. How can I mount assets to storybooks webpack so that they are then served from the correct url? Maybe webapck can even parce css and serve these files automatically? Not sure here ....
from storybook.
@tomitrescak were you able to load the fonts that come with semantic-ui with storybook? I'm having issue with the fonts and icons that semantic ui uses. See image.
from storybook.
The only way to go is to copy icons and all other required file to the asset directory which you configure when you run storybook. Copy the files into the "default" directory (see where sui is trying to load it from). Then configure loaders as above. And you are done.
from storybook.
@roonyh I have this
"storybook": "start-storybook -p 9001 -s ./node_modules/semantic-ui-css/themes/default/assets/fonts/"
but it still does not load the assets
GET http://localhost:9001/themes/default/assets/fonts/icons.woff2
:9001/themes/default/assets/fonts/icons.woff:1
GET http://localhost:9001/themes/default/assets/fonts/icons.woff
:9001/themes/default/assets/fonts/icons.ttf:1
GET http://localhost:9001/themes/default/assets/fonts/icons.ttf
@tomitrescak I also wasn't able to get the fonts to load by copying them to the 'default' folder in the semantic-ui-css
module
from storybook.
@purplecones That config will make the fonts available at root. At url http://localhost:9001/icons.woff2
What you probably should do is giving -s
the path to the themes directory. So try,
"storybook": "start-storybook -p 9001 -s ./node_modules/semantic-ui-css"
This will make them available at http://localhost:9001/themes/default/assets/fonts/icons.woff2
from storybook.
Also just for future references, you can also put the *
to catch-all. For example if */assets
is the argument, it will make all directories with the name assets
.
from storybook.
Now that the -s
option is being deprecated, what's the solution for this issue now?
from storybook.
-s
is replaced by a config in main.ts
.
https://storybook.js.org/docs/react/configure/images-and-assets#serving-static-files-via-storybook-configuration
from storybook.
Related Issues (20)
- [Bug]: a11y ignoring SVG fill property
- [Bug]: type error for required props when reusing story definitions according to the docs
- [Project SfC]: Tracking Ticket for Bugs
- [Project SfC]: Bug - Editing or saving stories for CSF2
- [Project SfC]: Bug - Toolbar gets long when Controls panel is small
- [Project SfC]: Bug - Arror navigation not implemented
- [Project SfC]: Bug - Link to a story if it is already available
- [Project SfC]: Bug - Update Story Banner isn't sticky
- [Bug]: First story dispayed in place of every other one in Docs (sb8 webcomponent) HOT 2
- [Project SfC]: Bug - X button is a bit unaligned
- [Project SfC]: Bug - Search input caret position ignored
- On Setting viewport to 320*256 pixels, Keyboard focus is moving to the hidden controls.[Bug]:
- [Bug]: Vite HMR Issue
- [Bug]: Response cookies are not available from the middleware
- [Bug]: Failure in Upgrading Storybook
- [Bug]: Importing anything that contains a word `raw` in NextJS+Storybook project from ant-design makes every other import null
- [Bug] :Storybook + vite shows "No Preview" but story still renders below
- Warn when a story is rendered in portable stories when there are lingering cleanup functions
- [Bug]: Module not found error when using CommonJS entry point in @storybook/test HOT 1
- [Bug]: v8 Loading @emotion/react more than once warning
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from storybook.