[環境構築]CodeSandboxにVSCode+React+TypeScriptの開発環境を構築してみた。

Abstract

CodeSandboxというサービスがあって、Web上でReactの開発環境が作れるらしい。
で、zennに埋め込めれるらしい。
なるだけ簡素に書いてみた。

注意点

今回はGithubリポジトリから始めたけど、この場合、zennに埋込みできないというのが残念。
zennに埋込みする場合は、一番右の"Create a Sandbox"を選ぶ必要がある。でもSandboxを選ぶと機能制限が激しい。

• "Import reppository", "Create a Devbox", "Create a Sandbox"の違い。

	開始方法	Terminal	モード移行	zenn埋込み
Import reppository	リポジトリ読込みから開始	使える	出来ない	出来ない
Create a Devbox	メニューから	使える	出来ない	出来ない
Create a Sandbox	メニューから	使えない	Devboxモードに移行できる	出来る

前提

• githubのアカウントは取得しとくこと。
• 開始するプロジェクトのgithubリポジトリを作っておく。
  ※今回はココのgithubから開始する。

手順1.CodeSandbox公式にアクセスする。

ここ

手順2.githubアカウントでログイン。

サインイン。

　↓

　↓
適当に入力。
Username: aaaa1597_aaaa ※aaaa1597だと怒られた。だれか使ってるらしい。
Displayname: aaaa1597
What best describes your role?: Full-Stack Developer
How do you plan to use CodeSandbox?: Personal
で、Create accountを押下

　↓

ログイン出来た。

手順3.githubから開始する。

　↓

　↓

　↓
Githubのパスワードを入力 -> Confirm押下

　↓

　↓
読み込み中

　↓
Configure microVM environmentを下図のように。Featuresは無視。

　↓

　↓

　↓

　↓

　↓

　↓
セットアップが動き出す。

　↓
依存ライブラリもインストール。

　↓
依存ライブラリもインストール。

　↓

出来た。

手順4.zennに埋め込む

出来なかった。
理由は、Githubリポジトリの取込みで開始したから。
埋め込みは、"https://codesandbox.io/embed/"　から始まるURLじゃないとだめらしい。
だけど、githubから取込むと"https://codesandbox.io/p/github/" から始まるURLになるので、だめだった。
zennの仕様ならどうしようもないね。orz.