Merge pull request #28 from eirslett/correct-working-dir

Tweak Vite setup so we use the correct working directory
storybookjs · Jun 15, 2021 · 3a57a71 · 3a57a71
2 parents 1fd19a4 + dca3bf2
commit 3a57a71
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -56,6 +56,12 @@ The `configType` variable will be either `"DEVELOPMENT"` or `"PRODUCTION"`.
 
 The function should return the updated Vite configuration.
 
+## Note about working directory
+
+The builder will by default enable Vite's [server.fsServe.strict](https://vitejs.dev/config/#server-fsserve-strict)
+option, for increased security. The default project `root` is set to the parent directory of the
+storybook configuration directory. This can be overridden in viteFinal.
+
 ### Getting started with React, Vite and Storybook (on a new project)
 
 ```

diff --git a/packages/storybook-builder-vite/build.js b/packages/storybook-builder-vite/build.js
@@ -5,20 +5,10 @@ const { build: viteBuild } = require('vite');
 module.exports.build = async function build(options) {
     const config = {
         configFile: false,
-        // We create a kind of "custom" source root inside this project (yes, inside the node_modules folder)
-        // so that "iframe.html" resolves to a correct path. (Otherwise, Vite will fail.)
-        root: path.resolve(__dirname, 'input'),
+        root: path.resolve(options.configDir, '..'),
         build: {
             outDir: options.outputDir,
-            rollupOptions: {
-                input: {
-                    'iframe.html': path.resolve(
-                        __dirname,
-                        'input',
-                        'iframe.html'
-                    ),
-                },
-            },
+            emptyOutDir: false, // do not clean before running Vite build - Storybook has already added assets in there!
             sourcemap: true,
         },
         resolve: {

diff --git a/packages/storybook-builder-vite/code-generator-plugin.js b/packages/storybook-builder-vite/code-generator-plugin.js
@@ -1,3 +1,5 @@
+const fs = require('fs');
+const path = require('path');
 const { transformIframeHtml } = require('./transform-iframe-html');
 const { generateIframeScriptCode } = require('./codegen-iframe-script');
 
@@ -17,18 +19,36 @@ module.exports.codeGeneratorPlugin = function codeGeneratorPlugin(options) {
                 }
             });
         },
+        config(config, { command }) {
+            // If we are building the static distribution, add iframe.html as an entry.
+            // In development mode, it's not an entry - instead, we use an express middleware
+            // to serve iframe.html. The reason is that Vite's dev server (at the time of writing)
+            // does not support virtual files as entry points.
+            if (command === 'build') {
+                config.build.rollupOptions = {
+                    input: {
+                        'iframe.html': 'iframe.html'
+                    }
+                };
+            }
+        },
         resolveId(source) {
             if (source === virtualFileId) {
                 return virtualFileId;
+            } else if (source === 'iframe.html') {
+                return 'iframe.html';
             }
         },
         async load(id) {
             if (id === virtualFileId) {
                 return generateIframeScriptCode(options);
             }
+            if (id === 'iframe.html') {
+                return fs.readFileSync(path.resolve(__dirname, 'input', 'iframe.html'), 'utf-8');
+            }
         },
         async transformIndexHtml(html, ctx) {
-            if (ctx.path !== '/iframe.html') {
+            if (!ctx.path.endsWith('/iframe.html')) {
                 return;
             }
             return transformIframeHtml(html, options);

diff --git a/packages/storybook-builder-vite/vite-server.js b/packages/storybook-builder-vite/vite-server.js
@@ -8,16 +8,20 @@ module.exports.createViteServer = async function createViteServer(
     devServer
 ) {
     const { port, presets } = options;
+    const root = path.resolve(options.configDir, '..');
 
     const defaultConfig = {
         configFile: false,
-        root: path.resolve(__dirname, 'input'),
+        root,
         server: {
             middlewareMode: true,
             hmr: {
                 port,
                 server: devServer,
             },
+            fsServe: {
+                strict: true
+            }
         },
         resolve: {
             alias: {