[Day15] Storybook - Publish Storybook (Static web application & Chromatic)

我们透过前几天介绍的所有内容

• Storybook - 基本介绍 & 安装
• Storybook - What's a story and how to write
• Storybook - Configure story rendering
• Storybook - Controls
• Storybook - Writing Docs
• Storybook - MDX
• Storybook - Colors & Typography

将 Storybook 给搭建好了，但目前为止唯有开发者启动专案才能在本地端的浏览器开起浏览 Storybook，这显然不够方便给 UI 设计师、和其他前端工程师甚至是 PM 来检视，也因此我们会需要将 Storybook 部署至网页上，让相关的团队成员可以随时浏览。

部署 Storybook 的方式有两种，这篇的重点会聚焦在第二种方式，但也会快速带过第一种。

• 将 Storybook 打包成静态网页，并自行部署到任何托管服务。
• 发布至 Chromatic (由 Storybook 维护者提供的免费云端服务，可以用於发布 Storybook 并收集UI 反馈、视觉测试和文档。)

将 Storybook 打包成静态网页，并自行部署到任何托管服务

在一开始透过 CLI 建立 Storybook 专案时，CLI 就有将 build-storybook 指令添加至 package.json 中，因此我们可以直接执行 npm run build-storybook ，如果想知道其余的配置可以参考 CLI Options。

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

npm run build-storybook 

打包的结果会输出至 storybook-static 资料夹，再将资料夹内的东西部署至任意第三方，如 Vercel, Netlify, AWS S3 或 GitHub Page。

Storybook 官方也有提供一个用来部署到 GitHub Page 或 AWS S3 的套件 storybook-deployer。

发布至 Chromatic

Chromatic 是由 Storybook 维护者提供的免费云端服务，除了可以用於发布 Storybook 以外，也能用对元件进行版本控制、文字回馈以及视觉测试，甚至也能结合 CI / CD。

那我们就来动手将 Storybook 发布至 Chromatic 吧

Step 1: 注册 Chromatic 帐号

无论用什麽方式注册，注册完之後都还能在 profile 页面进行第三方绑定

Step 2 : 建立专案

因为我已经绑定 GitHub 与 GitLab 所以会自动出现 Choose from GtiHub 与 Choose from GitLab 的选项。

那因为范例程序码放在 GitHub 所以我选择 Choose from GitHub。

Step 3: 安装 Chromatic

Step 4: 发布 Storybook

在上一个步骤的画面中，它会给你一行指令，并带有这个专案的 token，现在我们就到编辑器中去执行吧。

npx chromatic --project-token=<your token>

再回到 Chromatic 就会看到这个画面了，也就表示你部署成功了！

参考资料

• Storybook - Publish Story
• Storybook - CLI options
• storybookjs/storybook-deployer
• Chromatic
• 玩转 Storybook: Day 25 将 Storybook 持续部署
• 玩转 Storybook: Day 18 Automated Visual Testing

今天的分享就到这边，如果大家对我分享的内容有兴趣欢迎点击追踪 & 订阅系列文章，如果对内容有任何疑问，或是文章内容有错误，都非常欢迎留言讨论或指教的！

明天开始要来分享的是 Vue3 单元测试 (Unit Testing) 的主题 ，那我们明天见！