Deploy React Repo from Github with CodeSandBox.io & Netlify integration.

tldr: This write-up elaborates on two related processes I use several times a week.
spinning up images and deploying them

-one
You can create images of several projects at once using the urls from the github repos
I use this technique to review my students projects 8 at a time to save time & space on my personal machine and avoid cloning down and installing dependencies of each project 1 at a time.

-two
There is a sweet netlify/vercel integration with codesandbox that lets you streamline a CI/CD setup at the literal click of a button the step by step for both processes is below.

I like to code. Going to a fully remoteCode School I have gained a lot of exposure to CodeSandBox, Github, and React--especially create react app.

I have gained a fondness for using CodeSandBox as my development environment.
I have access to a terminal. I can fork my project right there and have it spin up a clone to try out new features. I have access to node package manager and a staging environment. I can drag and drop in images to have them accessible in the project. Its so cool.
I love it already.

Then I figured out I could deploy my creations to netlify and Vercel(Zeit now).
Niiiice.

Im really loving it.

When starting a create React App, you inadvertently end up with a project nested inside of a named directory. When developing on a local machine that's very Useful. It helps you to keep you projects separate and identifiable in the terminal.The problem arises with the root of you project being nested inside the directory.
When you push your project to Github You have to drill down one directory to see
-your index.html
-your package.json etc
-the files that a build step is going to look for. I first noticed this when I attempted to deploy my hard earned projects to a live site so that I can show them on my portfolio. When deploying to Netlify Gh-Pages or Vercel/Zeit you have to give the build server directions to your root.

• One -Level -Down. This causes so many errors and You end up having to wait 2 minutes everytime for the project to spin up | ⚡🌩 fail 🌩⚡ | and try again. 🔁🔁🔁

So I become a Team Lead at the code school. I now have a team of 8 programmers slightly junior to me creating projects 5 days a week after lecture. These projects need my review and feedback the same day by 5pm! 3 hours 8 projects.
Options.

2. clone them all down
3. spin up the project on a local host
4. open a VSCODE instance in the half screen beside and line by line it checking for whatever features I dont see on the local host browser.
5. hope the dependencies match my local setup. HA! right!

2.
Look through the code line by line on github and assume it works because the code'looks right with no obvious bugs'-- not good enough for the pros not good enough for me.

1. Pick up a Neural Link a la Elon Musk and try number two but this time my neural cortex actual runs the code somewhere in my left lobe?
   Not this year.

2. the option I have gone with for 8 month now ... 🥁 💦

Enter Codesandbox. and their import Project from Github feature.
🥰😍😻💖 be still my hearts

Lets get the actual process

1
Find your repo at github

• choose the correct branch

• meaning the one you want to deploy

2 choose the correct level aka folder

• Drill down to the Package.json
  • If you dont see it on the top screen
  • click into the folder Create React App named after you project. That'll take you inside and on the next page you should see everything the same but the folder structure.
• You're one(1) folder in.
• Locate package.json -that's the level you want to deploy as root.

3
From here you want to copy the URL from the address bar exactly as it is

• don't change it by clicking on anything else.

4

• in a new tab go to your codeSandbox dashboard -- https://codesandbox.io/dashboard/recent

(4 1/2 - you might have to log in 😭 🔐 😂)

5
Click create Project

• the top box Center of Page

6

• in the box modal that pops up
  • choose the bottom option --on the left sidebar -- "import Project"

7

• Paste your URL into the input blank and hit "Generate Sandbox"

7a
If you have permission to link to this repo you'll see Codesandbox's loading animation.

7b
It cant be private unless
-its yours
and
-you've linked github to your Codesandbox account

7c aka 'try again you copied the url incorrectly'

• If you get -an all black screen -with the error message -you might go back to your github repo and make sure --you copied the URL correctly and --that you had navigated to the level where package.json can be found.

When your sandbox spins up it will be in a safe mode so
8

• hit fork sandbox in the top right corner

from here you can locate the familiar
Github OctoCat on the left menu bar
~click her smile~
..(Octocat is a her, right?)
9

• click their smile

9a
youll see more familiarity such as options

• to link to a repo
• create a new repo
• create a pull request
• create a commit message.

you can deploy here but I usually wait until I have something worth while before doing any type of Continuous Deployment even if it is ridiculously simple with CodeSandBox and Netlify's integration.

When you get to that point that you feel the need to share this work of art with the rest of the world wide web...

10

• in the "Left Menubar of Power" (the only left menubar)

find the ardently labeled Rocket Ship 👩🏻‍🚀👨🏻‍🚀🚀
We are Launching Code bebe! 🤘🏻👩🏻‍🎤🤘🏻 🤘🏻👨🏻‍🎤🤘🏻

11
--select Vercel or Netlify
hopefully you have a free account with one of the two
11a
-- if not its the standard verify with google etc.

11

• So select Netlify. 12
• Select Deploy App.

give it a few seconds
13

• and you will see a new option appear -- to view the build progress.

This will show you the console rolling down command line responses as your app is built at rocket speed(see what I did there? I told you we were launching rockets bebe 🎸 )

13b

• At the end of the rocket rollout aka when the build process logs stop.. If you dont see something about
  • "failure!!!" or
  • "exit code 132"
  • "--failed deploy"

13c

• you should see a message with -- deploy successful -- followed by a button and a link -- to "view demo" Check it out!

14

• This is the testing grounds -- Look for any bugs -- this is what your page will look like to the world and Netlify is kind enough to give you a practice round before the big show.

15

• If you like what you see -- go back to code sandbox

16

• in the "Lefthand Menu of Power" find the button that says " CLAIM "

16b

• click it and you should see a screen with --" merge codesandbox deploys to Netlify Dashboard" I have to go through this screen almost everytime.

16c
--Click accept.
occasionally You will have to verify your google account by pushing the picture of your google icon one more time.

17

• Now on to the Netlify Dashboard -- so you can pick a more accurate Domain Name. -- That's a technical term for the webpage address. 🕸+📃

17b

• Click on Domain options in the middlescreen navigation bar.

17c

• In center screen -- there is a button for domain options/settings. -- select that -- a dropdown on the right has the option -- to edit settings or edit domain settings.

By clicking this you will gain access to a input field and be able to pick the website name that brings you the most joy. 😂 🎈 🎉

Its free too. 🆓

18 Last Button@@!@!!

• Hit save and you are done my beautiful friend on the internets!

We deployed 👇🏻 click by click 👆🏻 from a 🥪⌛⏳ CodeSandbox. 🏁🙊🐱‍👤

Never 🙅🏻‍♂️ once spun up a single character of code on our local machine. 💻
We 🚫 Didnt ❌ clog up 🚯 anything with another 2 million bytes of node_modules.
It all happened on some far away planet 🌍 in a virtual machine 🤖 on a beautiful little technology called CodeSandBox.

Thankyou Codesandbox. 👨🏻‍💻 🙏🏻🙏🏻🙏🏻 👩🏻‍💻

Take a Bow!