Fix file-loader URLs to work on subpaths. (#401)

This fix allows to deploy storybook to subpaths like in GitHub pages without any configuration.
storybookjs · Aug 24, 2016 · bcd5057 · bcd5057
1 parent 527751b
commit bcd5057
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git a/dist/server/build.js b/dist/server/build.js
@@ -57,18 +57,14 @@ _commander2.default.version(_package2.default.version).option('-s, --static-dir
 var configDir = _commander2.default.configDir || './.storybook';
 var config = (0, _config2.default)('PRODUCTION', _webpackConfig2.default, configDir);
 
-// remove the leading '/'
 var publicPath = config.output.publicPath;
-if (publicPath[0] === '/') {
-  publicPath = publicPath.slice(1);
-}
 
 var outputDir = _commander2.default.outputDir || './storybook-static';
 config.output.path = outputDir;
 
 // create output directory (and the static dir) if not exists
 _shelljs2.default.rm('-rf', outputDir);
-_shelljs2.default.mkdir('-p', _path2.default.resolve(outputDir, publicPath));
+_shelljs2.default.mkdir('-p', _path2.default.resolve(outputDir));
 
 // copy all static files
 if (_commander2.default.staticDir) {

diff --git a/dist/server/config/webpack.config.prod.js b/dist/server/config/webpack.config.prod.js
@@ -27,7 +27,12 @@ var config = {
   entry: entries,
   output: {
     filename: 'static/[name].bundle.js',
-    publicPath: '/'
+    // Here we set the publicPath to ''.
+    // This allows us to deploy storybook into subpaths like GitHub pages.
+    // This works with css and image loaders too.
+    // This is working for storybook since, we don't use pushState urls and
+    // relative URLs works always.
+    publicPath: ''
   },
   plugins: [new _webpack2.default.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }), new _webpack2.default.optimize.DedupePlugin(), new _webpack2.default.optimize.UglifyJsPlugin({
     compress: {

diff --git a/src/server/build.js b/src/server/build.js
@@ -29,18 +29,14 @@ program
 const configDir = program.configDir || './.storybook';
 const config = loadConfig('PRODUCTION', baseConfig, configDir);
 
-// remove the leading '/'
-let publicPath = config.output.publicPath;
-if (publicPath[0] === '/') {
-  publicPath = publicPath.slice(1);
-}
+const publicPath = config.output.publicPath;
 
 const outputDir = program.outputDir || './storybook-static';
 config.output.path = outputDir;
 
 // create output directory (and the static dir) if not exists
 shelljs.rm('-rf', outputDir);
-shelljs.mkdir('-p', path.resolve(outputDir, publicPath));
+shelljs.mkdir('-p', path.resolve(outputDir));
 
 // copy all static files
 if (program.staticDir) {

diff --git a/src/server/config/webpack.config.prod.js b/src/server/config/webpack.config.prod.js
@@ -18,7 +18,12 @@ const config = {
   entry: entries,
   output: {
     filename: 'static/[name].bundle.js',
-    publicPath: '/',
+    // Here we set the publicPath to ''.
+    // This allows us to deploy storybook into subpaths like GitHub pages.
+    // This works with css and image loaders too.
+    // This is working for storybook since, we don't use pushState urls and
+    // relative URLs works always.
+    publicPath: '',
   },
   plugins: [
     new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),