Skip to content

Instantly share code, notes, and snippets.

@d0ruk
Last active August 10, 2021 10:40
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save d0ruk/89407dc6c60f3dfa645a55b9c3782f37 to your computer and use it in GitHub Desktop.
Save d0ruk/89407dc6c60f3dfa645a55b9c3782f37 to your computer and use it in GitHub Desktop.
Sync your GitHub repo with https://codesandbox.io/

CodeSandbox(CSB) is an online React playground. One of the ways to add a project there is through importing from GitHub. Please sign in via GitHub.

This article will walk through the steps of sync'ing a create-react-app (CRA) project on a GitHub repo with a sandbox.

First, a quick recap of how to use CRA;

>> npm i -g create-react-app

>> create-react-app cra-app

>> cd cra-app

>> npm i && npm start

At this point, you can visit localhost:3000 to start working on your app. Next step is to push it to GitHub. Assuming you are at the root of the cra-app folder;

>> git init

>> git remote add origin REPO_URL

>> git add . && git commit -m "initial"

>> git push -u origin master

Then, visit your new repo on GitHub, copy the URL at the address bar, and paste it here to get the URL for the sandbox.

If all went well, you should be looking at the same app you had on localhost:3000. Do not edit anything yet. Let's have a quick look at the UI;

There are three parts to the sidebar;

  1. Project
  2. Files
  3. Dependencies

In the Project section;

The title of the sandbox is taken from package.json name field. The description of the sandbox is taken from package.json description field.

You can see how many times your sandbox has been viewed, how many likes it has, and how many times it has been forked.

Files and Dependencies sections are what you'd expect. Playing around with them for a couple minutes is enough.

The topbar is also self-explanatory. There are lots of ways to share your sandbox. You can switch the display layout. On its right are site-wide controls.

Look at the address bar: the URL mirrors the name of your repo. Also, there are no forks of this sandbox.As soon as you edit something, and save (it's on auto), the sandbox will be forked. You'll now be looking at a sandbox that is separate from the previous sandbox.

Now there are five parts to the sidebar;

4. Tags

The tags of the sandbox are taken from package.json keywords field.

5. Sandbox Actions

The sandbox you get from importing your repo mirrors the commit history. That is, if you commit something to your repo, the chages will be reflected in that sandbox. Note that the fork will not follow the repo history.

There you have it: a CRA app on codesandbox.io

So; what are the requirements for a GitHub repo to be eligible for a sandbox? Here is what the creator says;

  • package.json in root
  • src/index.js [entrypoint]

Not very strict, if you put have public/index.html we will also import the index.html separately.

Babel/webpack configs are not parsed yet, because CRA apps don't expose these files. Support for this is the next thing on my list though, it will come with templating + ejecting support.

That is, your app's webpack config is tied to the CLI you are using to generate said app. We used CRA to generate above app. There are three more options;

  1. preact-cli
  2. vue-cli
  3. create-react-app-typescript

Thus, you currently need to use any one of these CLIs to generate your app to be able to create a sandbox from it. You can also generate these apps through the UI topbar.

Git sandboxes do not alter the repo history on GitHub. Here is what CompuIves has on that;

I want to add a snapshot system to CodeSandbox, so for a single sandbox you can have snapshots of multiple versions, you can see it as commits. This way you can create snapshots on a git sandbox and from a snapshot you can open PRs on the main GitHub repo.

So, the way your sandbox communicates with your repo is to take a snapshot of the sandbox, and merge it with your GitHub repo via PR.

@zhaoyi0113
Copy link

It only works for initial load. If I update github repo, sandbox is not able to pull the latest. And there is no pull button in sandbox to get the latest changes from github.

@Harshu53
Copy link

I am also facing the same issue. Couldn't able to update my git repo.

Is there any solution?

@d0ruk
Copy link
Author

d0ruk commented Jun 28, 2019

This article is almost 2 years old. I'm surprised Google indexes it this high.

Meanwhile, Compulves apparently revamped the GH integration, and the new process seems to be PR centric.

I recommend checking out this vid.

@gatmeister
Copy link

I am also facing the same issue. Couldn't able to update my git repo.

Is there any solution?

I was able to get around it by using Fork via codesandbox UI (the code would already be in Github)
then adding the URL (this is a github url) of the initially committed sandbox.
hope that makes sense.

@slutske22
Copy link

Coming across this months later. Having the same issue. I can open my github repo in codesandbox. Then once I fork it, I can then make commits and pull requests back to my original github repo from the newly forked sandbox. The github repo will take the new commits or PRs, which I can then open in VSCode or Atom on my machine at home. But if I make commits to GH from my editor on my home machine, there is no simple way to pull them back into my forked sandbox. My tactic for now is to just fork the github repo each time I want to work on it from codesandbox (i.e. away from home). This is not as quick and easy as simply saying "Pull commits from github," but codesandbox.io is pretty amazing already so its hard to complain. Might be a good feature to update at some point.

@d48
Copy link

d48 commented Apr 15, 2020

I came across this info regarding your comment @slutske22 this gives insight as to why the setup they have for repos being templates

https://codesandbox.io/docs/git

@d48
Copy link

d48 commented Apr 15, 2020

@zhaoyi0113 it appears the code updates to the git repo for the synced sandbox now works

@vnugent
Copy link

vnugent commented Apr 19, 2020

does anyone know how to link CSB with repos under Github organization?

@RyanAmeri
Copy link

@zhaoyi0113 it appears the code updates to the git repo for the synced sandbox now works

I can confirm this is true. Once you close a project in codesandbox and open it again, if it is out of sync with the upstream repo, it will give you the option to pull the changes from the repo.

This has made working with codesandbox even more pleasant than before. It truly is a gem.

@bytrangle
Copy link

@RyanAmeri : Suppose you clone your Github repo to your local machine, make changes there, then push back to the remote.

Do those changes get sync to the Sandbox?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment