[工具] CodeSandbox 配合 GitHub 使用

Toki Lee
Jan 17, 2021

--

之前使用到了 CodeSandbox 做些範例,發現接配合 GitHub 使用,可以直接 Fork GitHub 的專案以 CodeSandbox 開啟,這點覺得還蠻方便的,並且也能夠登入 GitHub 的帳號發出 PR,這樣有時候就能夠無腦的直接開瀏覽器開發了呢。

在這篇會使用到之前文章的專案做個範例,[心得] 如何在 React (with Next.js) 上使用到 WebComponents (上),雖然沒有關聯,但也可以看看。

Import GitHub 專案

若要從 GitHub import 專案到 CodeSandbox ,可以使用 Create Sandbox 中的 Import Project:

不過這邊建議可以安裝個官方的擴充套件:

官方擴充套件

這樣在 GitHub 的頁面中就會多了個按鈕:

按下就能直接在 CodeSandbox 上開啟這個專案了。

在畫面上來看,目前沒有正確的跑起來,可能是使用的 Template 錯了,可能要加上 CodeSandbox 的設定檔來修正。

使用 CodeSandbox 發 PR

為了要使用 CodeSandbox 進行開發並發出 PR ,會需要登入 GitHub 並給一些權限:

在登入後,就可以 Fork 專案,而 CodeSandbox 會自動產生個專案的名稱並放在 Drafts下:

按下 GitHub view 中的 Fork 按鈕
Fork 後在 Drafts 的專案

因為是跑了錯誤的 tempalte ,那麼我們只要在專案加上設定檔sandbox.config.json 並在裡面加上 template: node 的設定,說明使用 node 的 template 來執行:

修改完成後回到 GitHub 的 View 上按下 Link Sandbox,之後就能提交 Commit:

在寫好 Commit 的訊息後,在這邊選擇第二個選項,按下 Commit changes 發出 PR ,之後再回到 GitHub 上就會看到這個 PR了:

在 merge 後回到 CodeSandbox 就會看到 Sandbox 使用了預期的 template 來執行:

另外,若回到 Dashboard 的 Repositories ,可以看到我們 Link 的 Repo:

這樣大致就是使用 CodeSandbox 發 PR 的過程,看起來與其他團隊合作開發似乎也是可以使用 CodeSandbox 看看。

--

--

Toki Lee

沒有技術上不可行,只是時間上做不到⋯