Auto Scroll
Select text to annotate, Click play in YouTube to begin
[Music] welcome we're going to show you how to deploy a glitch app to digitalocean first thing that you'll want to do is
find your way to the glitch playlist deploy to digital ocean here you'll find four pre-made apps that you can remix and quickly deploy to the digital ocean we're gonna work on the first one hello
dash digitalocean click there we've got a nice preview of what we're going to be deploying and then find the remix your own button click that this is going to take us to glitches in
browser text editor where we can see the files that make up the code that powers that website all right so we've got a nice readme with lots of instructions but the first
thing that we want to do is we want to connect our glitch app with our digitalocean account and the way that you do that is you go to the dot env file and here glitch is asking us for a
digitalocean access token you find that in your digitalocean account so let's go over there i'm in my cloud console and i'm going to go to the api tab and i'm going to generate a new token
let's call this one glitch project and we want this token to uh offer read and write access to the application we're gonna generate that token and there's the token we're gonna copy it
you can only see this once so make sure that it's on your clipboard and then let's head back over to glitch we're gonna paste that token in the value and hit the add a variable button
and if you see here in the left hand corner we have connected glitch with digitalocean and now we can set up our app platform where we are going to deploy this application so
uh the glitch uh logs tells us what's going on and it looks like uh we're actually all ready to go so let's head back to the digitalocean cloud console and look at the app platform view
i've got a couple of projects here but the one created by glitch is called humorous actually road glitch automatically generates these fun names for us so we'll click into that
all right looks like it's getting ready to uh build and deploy but we actually have to tell glitch hey deploy this to digitalocean so let's exit out of the logs here and then click on the deploy
to digitalocean button oh it looks like the logs popped right back up no problem all right so that application is currently deploying to digitalocean we have to give it a little bit of time
but let's poke around and see what we can find while we're here so we we're dropped into the readme it tells us what's in the project what's in the source folder it looks like it's react we've got hooks
and pages uh and we've got this to do dot markdown file that gives us some instructions for if we want to alter the website awesome
all right let's go back to the digital ocean view excellent so when our application is ready we will get a message here and it looks like it's not quite ready so we're going to
wait for just a few moments all right it looks like our deployment went live and i can open up the link and actually see my application wonderful just like i expected this
react app that says hi do and has some instructions on it and we have the image that bounces when i hover over it awesome well now let's go back to the glitch view and let's make a really
small change to this uh application and then redeploy to digitalocean the first thing that i'm going to do is head over and look closely at the preview pane all right and i have this drop down menu i've got dev and pub so dev shows us
when we make changes to the code here in glitch what changes i'm going to make and pub shows me what i've actually deployed on digitalocean right now those two things are the same but what i want to do is make a change
in dev see if i like it and then if so i'll deploy it to digitalocean and it'll be in production okay so a simple change i want to change the background color of the landing page so i'm going to go to the
src the source directory then i'm going to go to styles and then i'm going to go to styles.css and i want to change the background color so right now it's this nice yellow color i would like to change it to a
nice coral color so we're going to change the hex value to f9 e 0 e d and we see in development on glitch the color has
changed but in production the color is still yellow so let's push this change to digitalocean click the deploy to digitalocean button we'll go back to digitalocean alright we
see there's a new build that's pending here it goes and once that is done we should be able to refresh our page and and see it alright it looks like that change is
live so if we go back to our page and we hit refresh we see the background color of the page changed so that's just a little preview of what you can do with glitch and digitalocean if you're interested in
making some more substantial alterations to the application go to the to do dot markdown file and they give you instructions for how to make changes to the image and how it
works when a user hovers over it thanks so much for joining us we hope that you'll give this a try uh go and deploy a glitch app to digitalocean
[Music] you
End of transcript