It has been 7 months since , and one year since I made the . Can you imagine? This certainly deserves a celebration, and we decided to do that with a big update! I took the last 2 weeks off to work fulltime on CodeSandbox and we were able to get a lot done.Let’s dive in! we announced CodeSandbox first commit New Homepage Since the first release we’ve added many things to CodeSandbox. To give you an idea: we released CodeSandbox without embeds! A lot has changed, we’re not an editor for React only anymore, and I think we moved past the definition of a playground. All these changes, but the homepage didn’t receive a single update. This caused confusion, as people didn’t know about the things we built. It was time to do something about that. We’ve now designed and built the homepage from scratch using Gatsby. ! A very big thanks to for helping us with the design. You can see it here Danny Ruchtie There are more pages in the pipeline, like documentation and picked examples. We also want to show a more personalized page for logged in users. The basis is here now, so it’ll be easier to expand to this in the future. GitHub Committing & Opening PRs The most requested feature since day one is committing to GitHub. At the beginning we couldn’t tackle that because of the groundwork that needed to be built first. The groundwork has been built and from now on you can commit, create repositories and open pull requests right from within CodeSandbox! It truly feels incredible to commit changes directly from your browser to GitHub. Creating Repositories This is a very simple process. You can now export any normal sandbox to GitHub by just entering the name and clicking ‘Create Repo’ in the sidebar. This will create a repository and then redirect you to the Git version of the sandbox. Committing & Opening PRs To commit to your repository you’ll need to import it first. You can import any GitHub repository by appending the GitHub URL to codesandbox.io/s/github. For example, for my test repository the url would be: . The next step is to create a fork of this sandbox and make your changes, from then on you can commit or open a PR, by clicking on the buttons in the sidebar. codesandbox.io/s/github/CompuIves/codesandbox-test-git-app Create a commit or open a PR We first try to make a commit, if this fails we try to make a merge commit. When a merge commit fails as well we fall back to opening a Pull Request. Merge conflict solving is next on our list to build inside CodeSandbox. Committing some changes 😃 You can only commit to repositories you have write access to, you can open a PR to any repository. Other Changes To properly support GitHub in CodeSandbox we had to make some changes. We now import all files (like and ) for git repositories. We also implemented custom ‘editors’ for binary files, like images. This feels great for me, because you now work on your project in CodeSandbox as if you are working locally. There is no transforming happening anymore. The next feature also helps with that .gitignore package.json An Image view Static File Hosting One of the biggest differences between the local development server and CodeSandbox was the behaviour of and the folder. CodeSandbox didn’t host the files in the folder, which was confusing until now. From this update on we do host all files from the (or for Vue) directory. Many exciting possibilities arise with this. You can, for example, add web workers, static images, mock API call responses now. You also get full control of from now on! index.html public public public static index.html Here is an example sandbox: We download test.json from the public folder Future This new update adds many advanced features, and also opened up many new things to build. I’m looking forward to work on these points in the very near future (along with the existing features that are planned). UI Overhaul The UI is getting a bit cluttered, and deserves some reorganization. I’m working on a UI overhaul that I couldn’t fit in this update, but certainly want to deploy very soon. The new UI is inspired by vscode and will put all advanced features like deployment and GitHub support in their own place. Diff View The Git integration is currently missing a diff view for commits. This is very important and on the top of my list to tackle. This change will go together with the UI Overhaul. Configuration Source of Truth Now that we import files like we need to do some conflict resolving between CodeSandbox configs and file configs. We want to make files like the source of truth for eg. dependencies, and show a UI to configure these files. This gives the user flexibility and we still keep the UX very user friendly. package.json package.json Conclusion The past 7 months were great, developing CodeSandbox has been fun from the start to now. One thing we didn’t expect is the amount of support we received when we went open source. The open source community is truly amazing and all our contributors deserve one extra big thanks. If you like what we’re doing, consider becoming a . The last 2 weeks were amazing, and I’d love to work more fulltime on CodeSandbox. But this is only possible if I’m able to afford my food 😃. Patron
