CodePen
CodePen とは、ご存知、Webブラウザで完結できるフロントエンドの開発環境です。
CodePan
その CodePen の クローン OSS の CodePan というものがあります。これをインストールします。
なお、デプロイ済みのデモはこちらです。
手順
特に難しいところはないです。以下のとおりになります。
1. git clone する
まずはリポジトリから git clone しましょう。
$ git clone git@github.com:egoist/codepan.git
2. ディレクトリに移動し yarn する
「1.」の clone したディレクトリに移動し、yarn します。
$ cd codepan $ yarn
3. yarn build する
無事に yarn でモジュールが入ったら、yarn build でビルドします。少し時間がかかります。
$ yarn build
4. serve を用いて起動する
dist ディレクトリ配下にビルドされたので、serve を使ってサーバを立ち上げます。
serve はこれです。
serve が入っていない場合は $ yarn add global serve で入れましょう。入れたら以下のコマンドでサーバが立ち上がります*1。
$ serve dist --single
補足
serve でサーバを立てる際に私の環境では xsel が入っていないから入れろと怒られました*2。$ sudo apt-get install xsel と入れてもやはり怒られました。（デスクトップでなく）コンソールで起動しているとどうしても怒られるようです。
無視しても問題なく動作するのでスルーでよいでしょう。クリップボード周りでイケてないことになると思いますが、大きな問題ではないと思います。
