CLI: Allow passing --site-url to build a sitemap

Author: Sidnioulz

code/core/src/bin/core.ts

@@ -153,6 +153,10 @@ command('build')
   .option('--docs', 'Build a documentation-only site using addon-docs')
   .option('--test', 'Build stories optimized for testing purposes.')
   .option('--preview-only', 'Use the preview without the manager UI')
+  .option(
+    '--site-url <string>',
+    'The URL where the built site will be deployed, for sitemap generation'
+  )
   .action(async (options) => {
     const { env } = process;
     env.NODE_ENV = env.NODE_ENV || 'production';
@@ -169,6 +173,7 @@ command('build')
       staticDir: 'SBCONFIG_STATIC_DIR',
       outputDir: 'SBCONFIG_OUTPUT_DIR',
       configDir: 'SBCONFIG_CONFIG_DIR',
+      siteUrl: 'SBCONFIG_SITE_URL',
     });
 
     await build({

code/core/src/cli/build.ts

@@ -9,6 +9,7 @@ export const build = async (cliOptions: any) => {
     ...cliOptions,
     configDir: cliOptions.configDir || './.storybook',
     outputDir: cliOptions.outputDir || './storybook-static',
+    siteUrl: cliOptions.siteUrl || undefined,
     ignorePreview: !!cliOptions.previewUrl && !cliOptions.forceBuildPreview,
     configType: 'PRODUCTION',
     cache,

code/core/src/core-server/build-static.ts

@@ -25,12 +25,15 @@ import { copyAllStaticFilesRelativeToMain } from './utils/copy-all-static-files'
 import { getBuilders } from './utils/get-builders';
 import { extractStorybookMetadata } from './utils/metadata';
 import { outputStats } from './utils/output-stats';
-import { extractStoriesJson } from './utils/stories-json';
+import { extractSitemap, extractStoriesJson } from './utils/stories-json';
 import { summarizeIndex } from './utils/summarizeIndex';
 
 export type BuildStaticStandaloneOptions = CLIOptions &
   LoadOptions &
-  BuilderOptions & { outputDir: string };
+  BuilderOptions & {
+    outputDir: string;
+    siteUrl?: string;
+  };
 
 export async function buildStaticStandalone(options: BuildStaticStandaloneOptions) {
   options.configType = 'PRODUCTION';
@@ -163,6 +166,14 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption
       )
     );
 
+    effects.push(
+      extractSitemap(
+        join(options.outputDir, 'sitemap.xml'),
+        initializedStoryIndexGenerator as Promise<StoryIndexGenerator>,
+        options
+      )
+    );
+
     if (features?.experimentalComponentsManifest) {
       const componentManifestGenerator = await presets.apply(
         'experimental_componentManifestGenerator'

code/core/src/core-server/dev-server.ts

@@ -22,6 +22,7 @@ import { openInBrowser } from './utils/open-browser/open-in-browser';
 import { getServerAddresses } from './utils/server-address';
 import { getServer } from './utils/server-init';
 import { useStatics } from './utils/server-statics';
+import { useSitemap } from './utils/stories-json';
 import { summarizeIndex } from './utils/summarizeIndex';
 
 export async function storybookDevServer(options: Options) {
@@ -138,6 +139,9 @@ export async function storybookDevServer(options: Options) {
     throw indexError;
   }
 
+  // StoryIndexGenerator should now be guaranteed to be defined as `indexError` if not set.
+  useSitemap(app, initializedStoryIndexGenerator as Promise<StoryIndexGenerator>, options);
+
   const features = await options.presets.apply('features');
   if (features?.experimentalComponentsManifest) {
     app.use('/manifests/components.json', async (req, res) => {

code/core/src/core-server/utils/stories-json.ts

@@ -9,15 +9,55 @@ import type { NormalizedStoriesSpecifier, StoryIndex } from 'storybook/internal/
 import { debounce } from 'es-toolkit/function';
 import type { Polka } from 'polka';
 import { SitemapStream, streamToPromise } from 'sitemap';
-import invariant from 'tiny-invariant';
 
+import { logger } from '../../node-logger';
+import type { BuildStaticStandaloneOptions } from '../build-static';
 import type { StoryIndexGenerator } from './StoryIndexGenerator';
 import type { ServerChannel } from './get-server-channel';
 import { getServerAddresses } from './server-address';
 import { watchStorySpecifiers } from './watch-story-specifiers';
 import { watchConfig } from './watchConfig';
 
 export const DEBOUNCE = 100;
+let cachedSitemap: Buffer | undefined;
+
+async function generateSitemap(
+  initializedStoryIndexGenerator: Promise<StoryIndexGenerator>,
+  networkAddress: string,
+  isProduction: boolean
+): Promise<Buffer | undefined> {
+  const generator = await initializedStoryIndexGenerator;
+  const index = await generator.getIndex();
+
+  const smStream = new SitemapStream({ hostname: networkAddress });
+  // const smStream = new SitemapStream();
+  const pipeline = isProduction ? smStream : smStream.pipe(createGzip());
+
+  const now = new Date();
+
+  // static settings pages; those with backlinks to storybook.js.org are the most important.
+  smStream.write({ url: './?path=/settings/about', lastmod: now, priority: 1 });
+  smStream.write({ url: './?path=/settings/whats-new', lastmod: now, priority: 1 });
+  smStream.write({ url: './?path=/settings/guide', lastmod: now, priority: 0.3 });
+  smStream.write({ url: './?path=/settings/shortcuts', lastmod: now, priority: 0.3 });
+  smStream.write({ url: './index.json', lastmod: now, priority: 0.3 });
+  smStream.write({ url: './project.json', lastmod: now, priority: 0.3 });
+
+  // entries from story index; we prefer indexing docs over stories
+  const entries = Object.values(index.entries || {});
+  for (const entry of entries) {
+    if (entry.type === 'docs') {
+      smStream.write({ url: `./?path=/docs/${entry.id}`, lastmod: now, priority: 0.9 });
+    } else if (entry.type === 'story' && entry.subtype !== 'test') {
+      smStream.write({ url: `./?path=/story/${entry.id}`, lastmod: now, priority: 0.5 });
+    }
+  }
+
+  smStream.end();
+
+  // await and cache the gzipped buffer
+  return streamToPromise(pipeline);
+}
 
 export async function extractStoriesJson(
   outputFile: string,
@@ -29,14 +69,42 @@ export async function extractStoriesJson(
   await writeFile(outputFile, JSON.stringify(transform ? transform(storyIndex) : storyIndex));
 }
 
+export async function extractSitemap(
+  outputFile: string,
+  initializedStoryIndexGenerator: Promise<StoryIndexGenerator>,
+  options: BuildStaticStandaloneOptions
+) {
+  const { siteUrl } = options;
+
+  if (options.ignorePreview) {
+    logger.info(`Not building preview`);
+  } else {
+  }
+
+  // Can't generate a sitemap for the static build without knowing the host.
+  if (!siteUrl) {
+    logger.info(`Not building sitemap (\`siteUrl\` option not set).`);
+    return;
+  }
+
+  logger.info('Building sitemap..');
+  const sitemapBuffer = await generateSitemap(
+    initializedStoryIndexGenerator,
+    siteUrl.endsWith('/') ? siteUrl : `${siteUrl}/`,
+    true
+  );
+  if (sitemapBuffer) {
+    await writeFile(outputFile, sitemapBuffer.toString('utf-8'));
+  }
+}
+
 export function useStoriesJson({
   app,
   initializedStoryIndexGenerator,
   workingDir = process.cwd(),
   configDir,
   serverChannel,
   normalizedStories,
-  options,
 }: {
   app: Polka;
   initializedStoryIndexGenerator: Promise<StoryIndexGenerator>;
@@ -46,8 +114,6 @@ export function useStoriesJson({
   normalizedStories: NormalizedStoriesSpecifier[];
   options: Options;
 }) {
-  let cachedSitemap: Buffer | undefined;
-
   const maybeInvalidate = debounce(() => serverChannel.emit(STORY_INDEX_INVALIDATED), DEBOUNCE, {
     edges: ['leading', 'trailing'],
   });
@@ -79,7 +145,13 @@ export function useStoriesJson({
       res.end(err instanceof Error ? err.toString() : String(err));
     }
   });
+}
 
+export function useSitemap(
+  app: Polka,
+  initializedStoryIndexGenerator: Promise<StoryIndexGenerator>,
+  options: Options
+) {
   app.use('/sitemap.xml', async (req, res) => {
     try {
       res.setHeader('Content-Type', 'application/xml');
@@ -91,40 +163,18 @@ export function useStoriesJson({
         return;
       }
 
-      const generator = await initializedStoryIndexGenerator;
-      const index = await generator.getIndex();
+      const { port = 80, host } = options;
 
-      const { port, host, initialPath } = options;
-      invariant(port, 'expected options to have a port');
       const proto = options.https ? 'https' : 'http';
-      const { networkAddress } = getServerAddresses(port, host, proto, initialPath);
-
-      const smStream = new SitemapStream({ hostname: networkAddress });
-      const pipeline = smStream.pipe(createGzip());
-
-      const now = new Date();
-
-      // static settings pages; those with backlinks to storybook.js.org are the most important.
-      smStream.write({ url: '/?path=/settings/about', lastmod: now, priority: 1 });
-      smStream.write({ url: '/?path=/settings/whats-new', lastmod: now, priority: 1 });
-      smStream.write({ url: '/?path=/settings/guide', lastmod: now, priority: 0.3 });
-      smStream.write({ url: '/?path=/settings/shortcuts', lastmod: now, priority: 0.3 });
-
-      // entries from story index; we prefer indexing docs over stories
-      const entries = Object.values(index.entries || {});
-      for (const entry of entries) {
-        if (entry.type === 'docs') {
-          smStream.write({ url: `/?path=/docs/${entry.id}`, lastmod: now, priority: 0.9 });
-        } else if (entry.type === 'story' && entry.subtype !== 'test') {
-          smStream.write({ url: `/?path=/story/${entry.id}`, lastmod: now, priority: 0.5 });
-        }
-      }
-
-      smStream.end();
-
-      // await and cache the gzipped buffer
-      cachedSitemap = await streamToPromise(pipeline);
-      res.end(cachedSitemap);
+      const { networkAddress } = getServerAddresses(port, host, proto);
+
+      const sitemapBuffer = await generateSitemap(
+        initializedStoryIndexGenerator,
+        networkAddress,
+        false
+      );
+      cachedSitemap = sitemapBuffer;
+      res.end(sitemapBuffer);
     } catch (err) {
       res.statusCode = 500;
       res.end(err instanceof Error ? err.toString() : String(err));

code/core/src/types/modules/core-common.ts

@@ -334,6 +334,9 @@ export interface TestBuildFlags {
 }
 
 export interface TestBuildConfig {
+  /** URL of the deployed website (needed for sitemap computation). */
+  siteUrl?: string;
+
   test?: TestBuildFlags;
 }