Deploy from CodeSandbox to Netlify in Seconds

Celý článek

In my previous article, Creating a Social Follow Component in React, I used CodeSandbox to create and edit a brand new React application...ALL IN THE BROWSER!

CodeSandbox allows you to create, edit, and deploy applications all in the browser!

CodeSandbox really is incredible. Using CodeSandbox, you can...

• Generate new projects (Angular, React, Vue, Gatsby, etc.)
• Edit and preview your app with a live reloading server
• Create/Connect to Github repositories

and... DEPLOY TO NETLIFY!

Netlify just happens to be my favorite hosting platform, so when I figured out CodeSandbox has a deploy to Netlify button (currently in beta), I had to give it a shot. Here's what I found!

We've been using CodeSandbox for all of our live coding sessions on Twitch. It's been awesome!

TLDR

Create a project in CodeSandbox, click the Netlify deploy button, and check out your newly deployed site!

Create a CodeSandbox Project

The first thing you'll need to test out the Netlify deployment is a project. I'm going to start with the project that I created in the previous article mentioned above. Feel free to create whatever kind of project you want.

Deploy To Netlify

If you pay close attention to the screenshot above, you will see a rocket ship icon. This icon represents deployments. If you click it you'll get two deployment options, Zeit and Netlify. For what it's worth, I've heard Zeit hosting is incredible as well, but for this article, we are focusing on Netlify.

Go ahead and click that blue deploy button. After you do, it'll let you know that it is building.

You can also click on the "View Logs" button to get more details. It took a minute or two for mine to "Contact Netlify".

After it does, it should show some typical log output of installing packages, building, etc.

And eventually will let you know that it finished, and provide you with a live url.

.To my amazement, clicking on that link took me directly to the deployed app! Try your link and see if it worked!

Claim the New Site to Your Account

The one odd thing about the process above is that the initial deploy of this app doesn't get associated with your account. What i mean is, I went into my list of sites on Netlify expecting to see the new one listed, but I didn't.

Turns out, you have to take one additional step to actually "claim" that site as your own. If you look at the Netlify deploy details again, there should now be a "claim site" button.

Go ahead and click that button. You'll probably need to login. Netlify will then confirm that you want to add that project to your dashboard, so agree to that!

And after a few seconds, the site finished building, and it shows up under my list of sites. It's the first one listed.

Pushing Changes

The cool thing is you can make changes to your project. Even a simple text change like so.

Then, click the deploy button again. It will go through the build and deploy process, and your updated site will be ready to go in seconds!

Recap

CodeSandbox is awesome... Netlify is awesome... and they are even more awesome together!! This is one of the quickest and easiest ways I've seen to generate a completely new project and get it deployed. Try it out and let me know what you think!