Community Tutorial: Self-hosting SvelteKit with a VPS, Docker, CapRover and GitHub Actions

hello welcome to this video we're going to be talking about the self-hosting swell kit with a virtual private server Docker cap Rover and GitHub actions my name is stanislav let's get into it so first of all why would you do self-hosting there are several reasons one of those is privacy and data sovereignty so when you use cloud platforms you're not never quite sure where that your data might be ending up and if you self-host then you do it on your own server which you can put in a specific region of the world and be sure that your data doesn't go anywhere other than that place another reason is that you're less reliant on third-party tools so once you've started self-hosting and you're self-hosting your application the next step is self-hosting your analytics your observability even your CMS so that opens the door for those type of things another reason is portability so when you use a cloud platform then you might be using you know their database their key k key Value Store some specific functions like image resizing that they provide and by building your application to be self-hosted from the ground up you can easily move it between different servers without worrying about any vendor specific things that you might be using another reason is to avoid the cold starts I think many people who use serverless platforms are familiar with this concept and the difference when you sell host is that you pay for a server and you pay it up front for a whole month and then you have access to that performance so even if your app hasn't been used for you know for hours or even days once a request comes in it's going to be answered right away so you're not going to be paying any cold start penalty so the last reason why you might want to sell host is because of cost control so when you're using like Cloud platforms you're usually paying on metrics that can be kind of obtuse and hard to calculate maybe you're paying by gigabyte hour or something along those lines uh but with a virtual private server you know that you're going to be paying for example five dollars a month and then you can you know that that's what you're going to be paying no more no less but of course uh self-hosting also has some drawbacks so um money yourself host you have a single point of failure which means that if your server crashes your application stops working I think this is a less of a big deal than it was back in the day so nowadays if you use modern web Technologies like a service worker then you can make it so that your app can gracefully handle um being down for a little bit and this is good anyway because you might have clients that are on unreliable connections for example people might be on the subway and you know that would have the same effect as your app being down if they lose connection another drawback is a responsibility for maintenance and upgrades so on a cloud platform they typically for example update the node.js runtime and when you self-host that responsibility falls on on you and the last drawback is a Time investment so you know it's very easy to download like a cool CLI tool and just be up and running in a few minutes with a few commands but if you want to self-host it's going to take a little bit of time investment but you're going to be able to reap the benefits of that for months and months and years to come all right so why would we specifically want to use a Docker and cap Rover for this um well we developers we are familiar with the CLI tools and we don't mind them but sometimes it's quite nice to have just a nice admin panel that you can go into and see the status of your apps see logs and environment variables those types of things and capper over provides that and why we use Docker for all this is because Docker lets us containerize apps so that means that each of your apps is packaged in a container and it works independently of all the other apps and it also is protected so that even if something would were to happen inside the container it wouldn't be able to access other apps on running on the same machine another great feature of caprover is one click apps and if you use something like a cpanel you're gonna know what this is about so they have a catalog of hundreds of different apps and with just a few clicks you can install redis or postgres or myscale or any number of applications including more complex ones like WordPress cap Rover also has a continuous integration support and we're gonna show that in the demo how we will connect it to GitHub CI GitHub actions to have like a full CI flow another great feature of cap Rover is automatic SSL certificates so it's gonna use let's encrypt and you're going to get free SSL for all of your apps cap Rover is also a free and open source so it's actually written in in typescript so you can even contribute to it if you'd like and the last reason is that cap Rover can actually build them just for you instead of using GitHub CI so even if you don't want to use GitHub CI you can also use this stack without any other tools and so why would we use GitHub well GitHub is the most popular Cloud hosting platform right now and they have a very generous free tier for public repositories when it comes to GitHub actions and the login that you can experience is pretty limited if you really want to you can still build your images on cap Rover but you would still need somewhere to like put your code and even though you can self-host even that part with something like Gita or gogs it's way outside the scope of this tutorial alright so before we start let's look a little bit of a high level overview of what cap Rover actually does on your server so you have this box here which represents your virtual private server and the cap Rover essentially functions inside of Docker so you're gonna have your Docker inside your virtual private server and the cap Rover is going to spin up some images for you once you install it so one of those images is nginx and that will be used to Route all the different applications you install as well as route the cap Rover admin panel and this runs as a Docker image then caprover also sets up a Docker image for its admin panel as well as a Search bot for automatic certificate management and a few other images to make everything work so that's kind of the cap Rover part which I've denoted here by putting little cap Rover logos on the images but that's just one one of the parts right so the second part is your applications and those also run inside Docker each of your apps is going to run as a Docker container so you can have as many apps as you want as many as can fit on the server giving the CPU and the memory constraints that the server has and you can also run a databases and really any other images that you want in here all right so let's do a little checklist what do we need to install cap Rover so we're going to need a domain and it doesn't have to be the full domain if you already have a domain that you use for something you can use a subdomain of that and I'm going to explain how that works you need a virtual private server to install cap Rover on and you need SSH access to that server and then you need a GitHub account so the steps that we're gonna do we're gonna create a brand new virtual private server I'm going to use digitalocean for this but you can use any server host that you want we're gonna point a domain to our server install cap Rover and then we're going to create a brand new soil kit project publish it to GitHub we're going to set up GitHub continuous integration through GitHub actions and deploy the whole thing and then just at the end I'm going to demonstrate how you can easily add a database to your project all right it's time for the demo all right now I'm in the digitalocean control panel and I'm going to go ahead and create the new server I'm going to use together with the cap Rover to do that I go to create and then I choose a droplet which is what the digital lotion calls a virtual private server and here I get to pick the region and you should pick something that is close to your users basically so that the latency is as low as possible so I'm going to pick Frankfurt and then I get to choose the operating system and for this I recommend that you use the latest Ubuntu LTS version the long term stable version because that's going to get support for the longest time and then here I select which type of server I want and so what you're gonna need the cheapest server usually has on most platforms usually has about half a gig of RAM if you're gonna be running maybe just one app I think that is fine but you're going to want to be running multiple apps on your server I would recommend the spring for one gigabyte and that's what I'm gonna do here then um it's going to uh we're gonna choose which authentication method we want to use and in this case I'm going to choose password and I'm just gonna make a very uh simple password Here There You Go and I'm gonna save this for uh use later all right and then here they also have some extra options so you can add the metrics to your server which is very good uh you can add automatic backups which is very uh very nice to have in case something goes wrong with your server crashes for some reason and they also offer you a managed database which they charge 15 bucks for but we're gonna do it for free by launching a database on our server so here you get to pick a name I'm gonna just call my server cap Rover and then I press create all right so as you can see the server is creating it is gonna take a little bit of time but soon we are going to have um we're going to have our server and our IP address for this server as well all right so as you can see we have our server now it's running and we got the IP address and I'm gonna right away go ahead and SSH into our server so I have a terminal here I'm going to type SSH root at the server IP all right so there we go and it's going to ask me for the password and I've saved the password here so I'm gonna put that in and now I'm into the server so from here we're just gonna go ahead and install cap Rover so if we follow this um this guide that cap Rover has the getting started guide they can advise you to start with installing a Docker first so we're going to go ahead and do that and I'm gonna go to this page which explains how to install Docker on Ubuntu so first it asks me to run this cleanup command and I'm going to go ahead and do that to make sure we're not we don't have any old version of Docker or anything like that running right then it's going to ask ask us to set up the docker specific apt repositories so I'm just gonna paste these commands in and this is going to install some prerequisites and then here I'm gonna be adding the um the APT package source for Docker so I'm just putting in one command at a time here and then here I have the actual command that I think is going to install Docker first no not yet okay one command down okay so we added the new source so now we're updating it to make sure all these packages are fetched and now we're going to install Docker all right as you can see it takes a little bit of time but not not too long all right if you get the screen I think you can just say okay here great it's done and then they have this command where you can check if the installation went okay and it's gonna print just hello world let's see if it works it says hello from Docker so now we have the prerequisite all done and we can continue to installing a prover so to do that we run a Docker command because if you recall all of caprover actually runs inside of Docker so I'm just going to take the command I'm going to paste it and now it's going to install the camera over for us all right and now the installation finished so if we keep reading it says that we should go to http the IP of our server on Port 3000 let's go ahead and try that so and go back here get the IP I'm gonna paste it in like this all right so now we have the login screen and let's say let's see what they say so you should use the default password the captain 42 and then I can change it later all right let's go ahead and log in all right so it says you have successfully installed the cap Rover but you still need to assign a domain and finish the https setup all right and then it's telling us to do it through the terminal so let's go ahead and do that so I'm Gonna Cancel out of the server now I'm gonna run this actually on on my on my machine so not on the server so first I'm going to install the Capper over CLI all right and then I'm going to run this cap Rover server setup have you already started cabrover yes it's going to ask for the IP address again let's give it that all right and then it's going to ask us for the root domain so here is where you're going to need a a domain so I have a domain here that I'm going to use that uh that is not in use right now and I'm using Google domains here but the settings should be more or less the same regardless of which DNS hosting you use so you go to the DNS settings and then here is where you need to add some records so there's two records you need to add one record is for the kind of root domain that you want to use so in our case we're going to use all of all of this domain and it's going to be an a record and it's going to point to the to our server and then we're going to add another record for a wild card so anything dot my domain and it's also going to be an a record and it's also going to point the to our server the reason for this is that just like on heruku apps are gonna have an automatic domain which is going to be like your app name dot your domain dot com all right so this is all you need so I'm gonna save this and it's here it's going to take a little bit of time to propagate it so it might not work right away but we're gonna try it in just a second just want to explain how you would do it if you want to use a sub domain so in this case let's say you wanted to use not the root but you wanted something like capro over dot your domain so in this case it works exactly the same you would put the IP in right like this and then you would add the um the wild card as well so so in this case if you don't want to use the full domain this is how you would you would do it but in our case we're going to be using the full domain all right so now we have all everything we need since we did the pointer so I'm going to put in the name of my domain here and and then I'm gonna set a password again I'm just gonna make something up and save that I'm gonna enter it again all right uh I'm gonna enter a valid email address here this is for um let's encrypt so that they can notify you if domains are expiring or not working properly as if they sorry if the certificates is about to expire and it's not being renewed correctly right and now uh capital is actually going to go out and figure out the SSL certificates that are needed to make the server work and at this stage if you didn't wait long enough with the DNS record you might get some sort of error but in this case it did seem to work okay it's gonna suggest a machine name let's just continue there all right and now we're ready to use our brand new instance so I'm gonna copy the domain from here I'm gonna paste it in here and now Captain 42 is not gonna work anymore because we uh we changed the name so we change the password so I'm gonna put in the new password and now we're we're in so this is the admin panel and now we can continue by creating a um our salt GitHub so to start with that let's go ahead and create an app we're gonna maybe we're gonna call it just the salt kit and we're gonna press create and now the app is going to be created for us so it's going to spin up kind of like a um just a simple container so we you can see here that we got a automatic domain here cell kit dot the domain I picked for the installation and if I go to this page I just get like a welcome screen that tells me but my app is going to be here when I deploy it and then now is a great time to um to actually set up our our app in in vs code so let's go ahead and do that so I'm gonna just follow the uh the guide here from Salt kit on how to create a new app so all right and um yeah let's let's see let's do the demo app to have something to to show and I'm not going to use typescript that I'm not going to add any of these other packages just to kind of keep it brief all right um so I'm going to follow the guides here I'm gonna install the packages let's see I need to use the correct version of node I'm gonna use node 18 here let's try it again okay and then I'm just following the commands here that are given to me and then I'm gonna go ahead and open this in vs code all right now we're ready to continue and the first thing that we need to do is to actually uh pack our salt Kit app in a Docker container so first of all let's make sure that it runs correctly all right so that seems to work okay so how do we pack this in a Docker container so we can run it in cap Rover so writing containers from scratch is takes a while so I have a finished container here container configuration that we're just gonna copy in but we can briefly mention some of the things that go on here so so basically we are starting starting with a node image node 19 and then we basically run npm install and npm build just like so it's like kind of normal stuff and the one thing we need to do to make this work is we also need to switch to adapter node instead of adapter Auto so I'm going to go ahead and do that install it and I'm not sure if this is actually required but I am going to set also the build folder to uh to write to build so that now when we run npmram build it's going to create a build folder here for us so there it is and what I'm also going to do is I'm going to add that to git ignore it looks like it's already added there great so now we have the um the docker file that's gonna package the app and then we need to create a GitHub actions workflow for it and you do that by creating a folder called GitHub workflows so it's two folders for stop github.workflows and then inside here you create a yaml file and again building a workflow from scratch it takes a little bit of time so I have prepared one here that I'm going to share with you and what this workflow will do is um basically it's going to build the image it's going to publish it to the GitHub container registry and then it's going to deploy it on cap Rover so let's first uh let's let's start with some things that we need to configure here specifically the deploy and cap Rover part so it's asking us for our server which we have that that's our domain it's asking us for the app name it's asking us for this token what is this token well I will show you so if you go back to um to the app incap Rover and you go to the deployment Tab and you scroll down there is this official Clyde method and to use it we need to use this token we need to generate map token there we go so this token is what's going to let us actually deploy and if we look at the configuration it's coming from a Secrets a secret is something that you configure on your on your app so in GitHub so let's go ahead and and then publish this repository to GitHub and then configure the secret so I'm gonna go ahead and publish this just to a public repository all right and I should be able to see that if I go here yes this is the package that I just published uh sorry the um this project that I just published and then now I can go to settings for this project uh Secrets which you can find here actions and then I'm going to add a new secret and if we look what the name of that secret is supposed to be it's app underscore token and the actual value is going to be the value here that we uh got from cap Rover all right so now it's configured and we're going to be able to access it here then it's asking us which image to deploy and that's going to be this ghcr slash your username slash the name of the repository all right there we go so I have some file changes here so this specifically the changes we've been making I'm gonna go ahead and Stage those changes and uh

Channel: Svelte Society

Views: 4,562

Keywords: Svelte, Javascript, Web development

Id: KbIFRVvdgA8

Length: 31min 35sec (1895 seconds)

Published: Tue Jun 06 2023