之前使用到了 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下:
因為是跑了錯誤的 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 看看。