Free tools Windows power users keep installed
One-click scans. No signup required.
Build Storybook into static files, then publish the output directory as an Azure Pipelines artifact. Teammates can retrieve those files from the pipeline run, but they will not get a browser-ready preview URL: opening Storybook interactively requires a web host or publishing service.
What “showing” Storybook without hosting means
An Azure Pipelines artifact keeps the built files with a pipeline run so people can inspect or download them, or another pipeline can use them. It does not serve the files as a website. Microsoft describes PublishPipelineArtifact@1 as a way to upload a file or directory as a named artifact for the current run.
As an Amazon Associate I earn from qualifying purchases.
| Approach | What teammates receive | Separate web hosting? | Best fit |
|---|---|---|---|
| Azure Pipelines artifact | Files to inspect or download from a pipeline run | No | Build handoff, archival, or downstream pipeline use |
| Static host or publishing service | A browser-accessible Storybook URL | Yes | Interactive review by teammates or stakeholders |
Build and publish Storybook as an artifact
- Confirm the project’s build command and output folder. Storybook documents
npm run build-storybookas the standard build command and says the tutorial output isstorybook-static. Check the project’s scripts and configuration rather than assuming every repository uses npm or that exact output path. See Storybook’s build documentation. - Add a build and publish step to an Azure DevOps Services build pipeline. For a project that uses npm, the documented command, and the default output folder, the YAML can look like this:
steps: - script: npm ci && npm run build-storybook displayName: Build Storybook - publish: storybook-static artifact: storybookThe script line assumes npm and the named build script; adapt it to the package manager and script configured in your repository. Replace
storybook-staticif your build outputs elsewhere. Thepublishshortcut uploads the folder under the artifact namestorybook. See Microsoft’s Pipeline Artifact documentation. - Open the completed pipeline run. Select the published artifact in the run summary to inspect or download the files. Downloading those files gives you the build output, not a hosted Storybook page.
- Check the output if assets are missing. Storybook supports
staticDirsfor including static files; Vite projects may also copy files from the Vite public directory. Review the project’s static-asset configuration and inspect the generated folder if the artifact seems incomplete. See Storybook’s static-assets documentation.
Choose the artifact task for your Azure DevOps edition
The YAML publish shortcut and Pipeline Artifacts apply to Azure DevOps Services. For Azure DevOps Server or TFS 2018, Microsoft says to use Publish Build Artifacts because Pipeline Artifacts are not supported there. Check which product your organization runs before choosing the task; the example above is for Azure DevOps Services. See Microsoft’s Pipeline Artifacts guidance and its Build Artifacts guidance for Azure DevOps Server.
Publishing Pipeline Artifacts is not supported in release pipelines, according to Microsoft’s Pipeline Artifacts documentation. Use a build pipeline for this workflow.
#1 Best Overall
When an artifact is not enough
If reviewers need to click through the component stories in a browser, the artifact-only approach does not meet that need. Storybook describes its output as a static web application that can be published to a web host. A static host or publishing service is therefore needed for an interactive, shareable URL; that adds hosting rather than avoiding it. See Storybook’s publishing documentation.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Access and retention depend on your organization
The artifact workflow makes files available from a run, but who can access a particular run and how long its artifact remains available depend on your Azure DevOps permissions and retention policies. Check those settings in your organization instead of assuming a particular access scope or retention period.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
