"Some features work like magic. Some features are just Magic!" - Some human.
Today I learned about a really helpful feature on CodeSandbox that automatically allows you to create Sandboxes that stay synced with changes you make to your GitHub repositories.
TIL means Today I learned. 😉
Synced sandboxes
From my understanding, Synced sandboxes are sandboxes that stay up to date with the latest changes you have pushed to a GitHub project using your .git file.
Their main advantage is that they allow you to create sandboxes from specific sub-folders within your GitHub projects without importing the whole repo.
Make a Synced Sandbox in CodeSandbox
First, open your project on GitHub and then edit the URL to start with codesandbox.io/p/sandbox/ prefix before the github.com the remove .com from github.com.
For example, let's use the demo project from my last blog post on Content collection in Astro.
The GitHub URL: https://github.com/Ekwuno/content-collecttion-api-example will become
https://codesandbox.io/p/sandbox/github/Ekwuno/content-collecttion-api-example
Why does this need to exist?
When changes are made to your GitHub projects or your example subfolders, you have to do the stressful task of updating all other replicas across platforms, but with synced sandboxes, they all stay up to date because they are "synced" to the source.
Once you push a change to GitHub, your sandbox also has those changes.
Use case for Open source projects.
Another use case I see is for Open-source projects that have example folders. Most frameworks have a repo with example folders which are usually sub-folders that get harder to maintain. By making these example folders synced sandboxes, each update is added automatically, allowing maintainers or contributors to share specific folders as sandboxes so they can be viewed as individual projects.
Use case for Embedding Cloud sandbox to docs.
The final use case I see for this feature is embedding your GitHub repository in the documentation and ensuring it is always up to date. So when people come to docs, they can create sandboxes from the embeds.
I recently made one of these for a project Joe Previte made and now whenever Joe makes an update, this sandbox I made gets the changes.
That's all, folks!
Top comments (0)