[工具] CodeSandbox 配合 GitHub 使用

之前使用到了 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 看看。