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
>> 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;
In the Project section;
The title of the sandbox is taken from
The description of the sandbox is taken from
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;
The tags of the sandbox are taken from
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;
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.