Photo by Fabian Grohs on Unsplash

CodeSandbox is an online code editor for Javascript projects which supports React, Angular, Vue and a couple of other libraries. Sharing one’s JS project from CodeSandbox is as simple as sharing its URL.

It also enables one to create a GitHub repository, which in turn allows for a neat way to host your project on a platform for deploying web projects such as Netlify.

Here are the steps on how to host your CodeSandbox project on Netlify in a couple of clicks:

Sign in to your GitHub account. On CodeSandbox, click “Create Sandbox” and choose a library — this will initialize a brand new project. Click “Sign-in to GitHub” in the rightmost upper corner. If this button is not visible, click on the “Save” icon in the bar above the code editor. Assuming you are happy with your app, click on the GitHub icon in the leftmost sidebar and enter a name for your new repository. Refresh your GitHub profile to check if it has been created. Now log into Netlify via GitHub and click on “New site from Git”, choose GitHub, choose your repository and click on “Deploy site”. Deployment will take a minute after which a free random domain in the form of “random-domain.netlify.com” will be set up. (Optional) You can change the random part of the domain’s name by going to “Site settings” and “Change site name”.

Once you have made changes to your CodeSandbox project and wish to commit them, click on the “Save” icon, and then on the GitHub icon in the leftmost sidebar — enter the subject and click “Commit”. Your site at Netlify will update by itself after a short while as it is synced with your GitHub account.

Happy coding!