Let’s Azure : Write our Storybook in Azure
Design UI Components and Pages through Frontend Workshop without Coding or Grunt Work
A #storybook is a book with goodnight stories, of course for little ones. Well, no, that’s not what we are talking about here. The Storybook that we are gonna discuss here is a playground. A playground for UI developers.
An opensource development tool from awesome Storybook community, helps the UI developers to design, create, test and play around UI components in isolation to any business logic and outside of any app and its dependencies.
An UI developer can easily download the Storybook code and deploy in their localhost. However, when we are playing as a team, we need the playground to be in a common place and accessible to all team members. That’s where Azure becomes favorite place for developers to deploying Storybook.
The simplest method to deploy Storybook code in Azure is through Azure Static Web App service. In this blog we will discuss about deploying Storybook angular code from Azure DevOps Git Repo to Azure Static Web App.
The 1–2–3 steps goes as follows.
Create an Azure Static Web App
Login in to your Azure portal and click on Create a resource
Search for Static Web App and then Click on Create
This will take you to the Static Web App create wizard.
Select your subscription and resource group. If you want to put this app in a new resource group, use the Create new link.
Give your app a nice name and choose a hosting plan that suits your need. As the purpose storybook is to play around, so we can use Free plan here.
Next choose a region.
Next is the deployment source. Since we are going to deploy from Azure DevOps, choose Other in the options here.
Click on next and add Tags. Refer to the story Let’s Tag in this publication. Go Next to Review all the configurations once more
Now click on Create and wait for few mins for the app to get deployed. When you see the button Go to resource click on it to go to the overview of your newly created static web app.
Copy the URL from overview tab and keep it safe. Next click on Manage deployment token which will open a popup with a token. Copy this token and keep it safe. This token is called deployment token and we will need this in next steps.
Check in the code into Azure DevOps
We need to create a new repo in Azure DevOps and check in our Storybook code. Use appropriate branching strategy for team collaboration.
Create DevOps Pipeline to deploy Angular Code to Azure Static Web App
To deploy the Storybook angular code in our Azure DevOps repo, we are gonna use a Pipeline.
Login to Azure DevOps as an Pipeline Admin and navigate to New Pipeline wizard.
Select Azure Repos Git YAML option.
In the Select tab, select the repo we created in previous step
In Configure tab, choose the option titled Starter Pipeline. This will take you to an YAML editor.
Next use the below pipeline code in the YAML. Edit the code as necessary.
# This YAML is based on Starter pipeline
# Steps that build, run tests, deploy, and more:# Add your branch name here
trigger:
- teamcollaboration# Add the lasted poolpool:
vmImage: ubuntu-latest# Verify these variables and update accordingly
variables:
srcbase: '.'
npmconfigcache: $(Pipeline.Workspace)/.npm
folderprefix: $(Build.SourceBranchName)jobs:
- job: Publish_Storybook_Angular_to_Azure_Static_Web_App
steps:
- task: Cache@2
inputs:
key: 'npm | "$(Agent.OS)" | $(srcbase)/package-lock.json'restoreKeys: | npm | "$(Agent.OS)"path: $(npmconfigcache)
displayName: Restore & Cache NPM packages to enhance performance
- task: Npm@1
inputs:
command: 'custom'
customCommand: 'ci'
workingDir: '$(srcbase)'
displayName: 'Install npm ci package'- task: Npm@1
inputs:
command: 'custom'
workingDir: '$(srcbase)'
customCommand: 'run build-storybook'
displayName: 'Build Storybook Angular Code'- task: AzureStaticWebApp@0
displayName: 'Deploy to Static Web App'
inputs:
output_location: '/storybook-static'
azure_static_web_apps_api_token: $(deployment-token)
Next in the same tab, click on Variables and the add new variables. Add the key as (as in our example). in the value placeholder add the deployment toke we copied in the previous step.
Now Save the Pipeline and Run it. When the pipeline runs successfully, look out for the URL in the pipeline logs. Open a new browser and paste the URL.
Yippee !!! The Storybook app is now deployed.
Isn’t it interesting. If you like this and wanna read more on Azure, follow Let’s Azure and also click here to Follow this author.
If this story is helpful for you forward to your friends and if you have suggestions, do let us know your thoughts in comments.
Happy Azuring and Happy Coding !!!!
