Composition: Verify refs in node

lib/api/src/modules/refs.ts

@@ -36,7 +36,7 @@ export interface ComposedRef {
   id: string;
   title?: string;
   url: string;
-  type?: 'auto-inject' | 'unknown' | 'lazy';
+  type?: 'auto-inject' | 'unknown' | 'lazy' | 'server-checked';
   stories: StoriesHash;
   versions?: Versions;
   loginUrl?: string;
@@ -46,7 +46,7 @@ export interface ComposedRef {
 }
 export interface ComposedRefUpdate {
   title?: string;
-  type?: 'auto-inject' | 'unknown' | 'lazy';
+  type?: 'auto-inject' | 'unknown' | 'lazy' | 'server-checked';
   stories?: StoriesHash;
   versions?: Versions;
   loginUrl?: string;
@@ -135,12 +135,12 @@ export const init: ModuleFn = ({ store, provider, fullAPI }, { runCheck = true }
       });
     },
     checkRef: async (ref) => {
-      const { id, url, version } = ref;
+      const { id, url, version, type } = ref;
 
       const loadedData: { error?: Error; stories?: StoriesRaw; loginUrl?: string } = {};
       const query = version ? `?version=${version}` : '';
 
-      const [included, omitted, iframe] = await allSettled([
+      const [included, omitted] = await allSettled([
         fetch(`${url}/stories.json${query}`, {
           headers: {
             Accept: 'application/json',
@@ -153,10 +153,6 @@ export const init: ModuleFn = ({ store, provider, fullAPI }, { runCheck = true }
           },
           credentials: 'omit',
         }),
-        fetch(`${url}/iframe.html${query}`, {
-          mode: 'no-cors',
-          credentials: 'omit',
-        }),
       ]);
 
       const handle = async (request: Response | false): Promise<SetRefData> => {
@@ -168,7 +164,7 @@ export const init: ModuleFn = ({ store, provider, fullAPI }, { runCheck = true }
         return {};
       };
 
-      if (!included && !omitted && !iframe) {
+      if (!included && !omitted && type !== 'server-checked') {
         loadedData.error = {
           message: dedent`
             Error: Loading of ref failed
@@ -244,11 +240,6 @@ export const init: ModuleFn = ({ store, provider, fullAPI }, { runCheck = true }
 
   const initialState: SubState['refs'] = refs;
 
-  Object.values(refs).forEach((r) => {
-    // eslint-disable-next-line no-param-reassign
-    r.type = 'unknown';
-  });
-
   if (runCheck) {
     Object.entries(refs).forEach(([k, v]) => {
       api.checkRef(v as SetRefData);

lib/core/src/server/manager/manager-config.js

@@ -2,6 +2,7 @@ import path from 'path';
 import fs from 'fs-extra';
 import findUp from 'find-up';
 import resolveFrom from 'resolve-from';
+import fetch from 'node-fetch';
 
 import { logger } from '@storybook/node-logger';
 
@@ -91,6 +92,17 @@ async function getManagerWebpackConfig(options, presets) {
   }
   if (autoRefs || definedRefs) {
     entries.push(path.resolve(path.join(options.configDir, `generated-refs.js`)));
+
+    // verify the refs are publicly reachable, if they are not we'll require stories.json at runtime, otherwise the ref won't work
+    await Promise.all(
+      Object.entries(refs).map(async ([k, value]) => {
+        const { ok } = await fetch(`${value.url}/iframe.html`).catch((e) => ({
+          ok: false,
+        }));
+
+        refs[k] = { ...value, type: ok ? 'server-checked' : 'unknown' };
+      })
+    );
   }
 
   return presets.apply('managerWebpack', {}, { ...options, babelOptions, entries, refs });