約束の地

キャロ組

CodePen の クローン である OSS の CodePan をインストールする

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 と入れてもやはり怒られました。(デスクトップでなく)コンソールで起動しているとどうしても怒られるようです。

無視しても問題なく動作するのでスルーでよいでしょう。クリップボード周りでイケてないことになると思いますが、大きな問題ではないと思います。

*1:ポート番号はデフォルトで 5000 ですが、--listen オプションで変えられます

*2:Ubuntu 16.04 LTS

Powered by はてなブログ