Select text to annotate, Click play in YouTube to begin
00:00:00
[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
00:00:16
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
00:00:29
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
00:00:42
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
00:00:54
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
00:01:06
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
00:01:19
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
00:01:34
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
00:01:46
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
00:01:59
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
00:02:13
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
00:02:25
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
00:02:37
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
00:02:50
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
00:03:03
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
00:03:15
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
00:03:27
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
00:03:47
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
00:03:59
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
00:04:14
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
00:04:26
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
00:04:39
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
00:04:52
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
00:05:05
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
00:05:18
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
00:05:38
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
00:05:51
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
00:06:04
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
00:06:15
[Music] you
End of transcript