{"data":{"site":{"siteMetadata":{"title":"Developerayo","author":"Shodipo Ayomide"}},"markdownRemark":{"id":"88f7f4c5-2f14-5870-9760-fe944562aa9f","excerpt":"CodeSandbox and Netlify are like a passenger and an Uber driver, the passenger enters into the car and the uber driver starts the car and keeps on moving…","html":"

\n

CodeSandbox and Netlify are like a passenger and an Uber driver, the passenger enters into the car and the uber driver starts the car and keeps on moving, CodeSandbox started with a super amazing idea by Ives van Hoorne the Creator of CodeSandbox and now works fulltime developing it.

\n
# Table of Contents\n- What is CodeSandbox\n- What is Netlify\n- Clients Templates on CodeSandbox\n- File Structure\n- File Structure Content\n- Claim your site\n- Closing Thoughts\n- Resources
\n

What is CodeSandbox

\n

CodeSandbox is an online VSCode-like editor built for web applications development, It was built with a mindset to make projects sharing easy across teams and people. Get started with CodeSandbox here https://codesandbox.io.

\n

What is Netlify

\n

Netlify is a developers platform that automates codes, built in a way users will be able to simply push their code and the platform handles the rest.

\n

Let’s get started

\n

Firstly, visit your https://codesandbox.io dashboard and create a simple static site from one of the client templates.

\n

List of client Templates on CodeSandbox

\n\n

In this scenario, we would be using the React create-react-app template.

\n

\n

File Structure

\n
my-app/\n  package.json\n  public/\n    index.html\n  src/\n    index.js\n    index.css
\n

For the project to build, these files must exist with exact filenames:

\n\n

You can delete or rename the other files.

\n

File Structure Content

\n

src/index.js

\n
import React from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport \"./styles.css\";\n\nfunction App() {\n  return (\n    <div className=\"App\">\n      <h2>CodeSandbox X Netlify</h2>\n      <h3>Deploying Static Sites to Netlify from CodeSandbox.</h3>\n    </div>\n  );\n}\nconst rootElement = document.getElementById(\"root\");\nReactDOM.render(<App />, rootElement);
\n

src/index.css

\n
.App {\n  font-family: sans-serif;\n  text-align: center;\n}
\n

public/index.html

\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n  <meta name=\"theme-color\" content=\"#000000\">\n  <link rel=\"manifest\" href=\"%PUBLIC_URL%/manifest.json\">\n  <link rel=\"shortcut icon\" href=\"%PUBLIC_URL%/favicon.ico\">\n  <title>CodeSandbox X Netlify</title>\n</head>\n<body>\n  <noscript>\n    You need to enable JavaScript to run this app.\n  </noscript>\n  <div id=\"root\"></div>\n</body>\n</html>
\n

You can create other files inside the src folder for faster rebuilds because only files inside the src folder are processed by Webpack. You need to put any JavaScript and CSS files inside src, otherwise, Webpack won’t see them.

\n

Next, you would have to click on file and Fork the Sandbox, Awesome! Now you have it all to yourself. you can customize it whichever way you desire.

\n

Deploy to Netlify

\n

\n

Once that’s done you should have something similar to what I have below.

\n

\n

Now, let’s create our GitHub repository directly from our CodeSandbox dashboard, click on the GitHub icon on the icon tag across your left.

\n

\n

Put in your desired name of repo and then click create repository, you should get the below, but then wait a few seconds for it to deploy.

\n

\n

You should get a loading screen like the below for some seconds.

\n

\n

Once that’s done, click on the Plus sign and refork the repo, Click again on the rocket button and click deploy on Netlify.

\n

\n

Once deploy is clicked on Netlify, you will get a unique domain like csb-mqpoxl7wjx wait few seconds for it to build and deploy.

\n

\n

Awesome🔥🔥🔥, You should get two buttons Visit and Claim Site click Visit to view the deployed site.

\n

\n

Your deployed site should look like the image below if all steps were followed.

\n

\n

Claim your site

\n

Once deployed you would see a blue button named Claim Site click it,

\n

\n

Once that’s clicked, you would be redirected to a new page on Netlify that looks like the image below, you just have to add it to your netlify dashboard.

\n

\n

Your CodeSandbox site has successfully been added to the list of your site’s hosted on Netlify

\n

\n

Closing Thoughts

\n

We’ve only scratched the surface with this Deploying Static Sites from CodeSandbox to netlify article. I hope you’ve enjoyed learning how to Deploying Static Sites from CodeSandbox to netlify.

\n

Read more on Netlify via the official Netlify Docs and use CodeSandbox as your default live editor its amazing if you are looking forward to collaborating with multiple people on a single project. Read more here, Documentation - CodeSandbox Documentation

\n

Thanks to Ives van Hoorne, Sara Vieira and others behind this helping us maintain and improve this amazing platfrom.

\n

Resources

\n

Link to GitHub
\nLink to CodeSandbox
\nCodeSandbox-client on GitHub.

","timeToRead":4,"frontmatter":{"title":"Deploying Static Sites to Netlify from CodeSandbox","date":"April 15, 2019","description":"In this article, we are going to be having a walk through deploying your static application from CodeSandbox to Netlify."}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/deploying-startic-sites-from-codesandbox-to-netlify/","previous":{"fields":{"slug":"/deploying-apps-to-github-using-tortoisegit/"},"frontmatter":{"title":"Deploying Apps to GitHub using TortoiseGIT"}},"next":{"fields":{"slug":"/getting-started-with-rasberry-pi-3/"},"frontmatter":{"title":"Getting started with Raspberry Pi 3"}}}}