Exporting as a static app

首先要把寫好的Stories相關檔案，都打包成靜態可部署的檔案。

打包的語法如下

// package.json
{
  "scripts": {
   "build-storybook": "build-storybook -s public"
  }
}

$ npm run build-storybook

這樣會輸出一個靜態可部署的檔案資料夾。

Continuous deploy

團隊成員不會一直等待，所以需要搭配自動化的部署方式，把開發的程式碼Push到遠端的版本控制Repository，再透過版本控制Repository的套件或工具把頁面自動的部署到網站 Host

為了方便說明，在這裡使用 GitHub (Remote Repository) 搭配 Netlify (Webpage Host)，Netlify是使用免費的方案。

Netlify 有內建的 Continuous deploy 服務，所以可以不需要複雜的設定就能輕鬆部署 Storybook。

Step 1. 建立 Netlify 帳號，然後點選"create site"

Step 2. 選擇要綁定的 Remote Repository (在此用 GitHub)

Step 3. 選擇要部署的 Repository

Step 4. <最重要> 設定部署指令

Branch to deploy : master

Build command : yarn build-storybook or npm run build-storybook 

Public directory : storybook-static

Step 5. 按下 Deploy site 後就開始做建置及部署

Step 6. 部署完成就可以在 netlify 上看 Storybook 的頁面

Review with your team

有一個協同合作的常見做法就是，當需要團隊成員知道變化、Code Review及做意見回饋時，就在Remote Repository 發出 pull request 通知要做程式變更，然後Remote Repository會發訊息到 Slack 或 Teams 這類的團隊溝通平台，通知相關成員。

透過 Continuous deploy 在開發階段就能輸出目前專案的元件組成樣式，讓團隊成員可以及早跟快速的回饋意見。

Chromatic v.s. Netlify

Netlify 只有單純的把 Storybook 視為網站。它缺少了把Storybook 視為 Component Library 的功能。

但如果部署到 Chromatic 上，除了提供檢視 Storybook，它也會整理出 Component Library，也可以整合CI/CD的流程。

團隊成員可以在每次PR時，做 UI Review，檢視有哪些 Stroies 新增或變動，做出 Feedback。

Next

所有的 Storybook 功能都大致上介紹完畢。Storybook 的官網推出了「Design Systems for Developers」的教學，會完整介紹目前大公司的前端團隊，像是Shopify, IBM, Salesforce, Airbnb, Twitter等，都採用的 Design Systems 方法論。這個方法論也建構在 Storybook 的基礎上，接下來讓我們使用幾個單元，一邊複習一邊探討。

Reference

Publish Storybook - Vue、Angular

Deploy - Vue、Angular

What’s the best place to deploy Storybook?