Deploy Storybook to an Azure storage static website with Azure Devops Pipelines
Storybook is a great front end development tool. It is also a good platform for team collaboration, allowing designers and QA an early preview. This provides early feedback reducing the cycle time of the feature developed.
Azure Storage static website hosting is a perfect choice as the hosting provider. It is cheap and quick to get started.
This guide demonstrates how to configure a pipeline that publishes Storybook to a static website hosted in Azure storage for each feature branch.
Setup a Static website in Azure Storage
There are a few different ways to achieve this. The how to guide from Microsoft Docs is the best place to getting your static website setup.
Connect Azure Devops to Azure
Next, you'll need to connect your Azure Devops project to your Azure subscription. To do this, a service connection will need to be setup.
Setup the pipeline
The best way to configure Azure Devops Pipelines is with code using YAML. The pipeline is then part of your repository enabling version control. This provides history and comments about how the pipeline evolved.
The pipeline below performs the following steps:
- Restores & caches NPM packages to enhance performance
npm cito restore NPM packages
npm run build-storybookto build Storybook
- Copies the static website to Azure storage with a folder prefix of
the current branch name (
trigger: - none pool: vmImage: 'ubuntu-latest' variables: SrcFolder: 'src' StorageAccountName: 'StorageAccountName' npm_config_cache: $(Pipeline.Workspace)/.npm FolderPrefix: $(Build.SourceBranchName) jobs: - job: Publish_Storybook_to_Static_Site steps: - task: Cache@2 inputs: key: 'npm | "$(Agent.OS)" | $(SrcFolder)/package-lock.json' restoreKeys: | npm | "$(Agent.OS)" path: $(npm_config_cache) displayName: Cache npm - task: Npm@1 inputs: command: 'custom' customCommand: 'ci' workingDir: '$(SrcFolder)' displayName: 'npm ci' - task: Npm@1 inputs: command: 'custom' workingDir: '$(SrcFolder)' customCommand: 'run build-storybook' displayName: 'Build Storybook' - task: AzureFileCopy@3 displayName: 'AzureBlob File Copy' inputs: SourcePath: '$(SrcFolder)/storybook-static' azureSubscription: 'ServiceConnection_Name' Destination: AzureBlob storage: $(StorageAccountName) ContainerName: '$web' BlobPrefix: $(FolderPrefix)
Once committed to the repository, log into Azure Devops and create a new pipeline using the wizard. Select where your code is and then pick the YAML file of your pipeline.