nlog

とめどなく流れるよだれ

React Static と Storybook を導入してビルドするまでの流れ

dev

React Static をビルド

http://localhost:3000 でつくったプロジェクト（サイト）を確認できるようにする。

まずは React Static を使えるようにする。これはプロジェクトごとに必要なわけではなく、最初一回すれば ok 。

# React Static を使えるようにする
$ npm install -g react-static

そしてプロジェクトを立ち上げる。

# プロジェクトをつくる
# 対話形式で 1. プロジェクト名と 2. 使うテンプレートを聞いてくるので答える
$ react-static create

# つくったプロジェクトのディレクトリに移動
$ cd ~/path/to/react-static-site

# ビルドして http://localhost:3000 で確認
$ npm run start

完了。

すでにあるプロジェクトに React Static を適用する

ちなみに、すでにあるプロジェクトに React Static を適用したいときは、プロジェクト名を聞かれたときにすでにあるプロエジェクトを指定するだけで適用できる。

[~/path/to/]
$ ls
react-static-site ...

[~/path/to/]
$ react-static create
? What should we name this project? react-static-site
...

[~/path/to/]
$ cd react-static-site

[~/path/to/react-static-site]
$ npm run start

react-static create したときに README.md を勝手に書き換えてくるから、そのへんは注意が必要そう。

Storybook をビルド

http://localhost:6006 でプロジェクトの Storybook （スタイルガイド）を確認できるようにする。

まずは Storybook を使えるようにする。これはプロジェクトごとに必要なわけではなく、最初一回すれば ok 。

# Storybook を使えるようにする
$ npm i -g @storybook/cli

そしてを立ち上げる。途中 $npm run storybook を実行したときに BABEL でエラーが出るが、これは .babelrc を変更することで解決する。

# プロジェクトに移動
$ cd ~/path/to/react-static-site

# Storybook をつくる
$ getstorybook

# npm run storybookしたときにエラーが出ないように .babelrc を変更
$ vi .babelrc

# .babelrc のファイルの中身を確認
$ cat .babelrc
{
  "extends": "./node_modules/react-static/.babelrc",
  "plugins": ["babel-plugin-styled-components"]
}

# ビルドして http://localhost:6006 で確認
$ npm run storybook

参考