Deploy Your SvelteKit App Using Vercel And Supabase

hey friends welcome to the last part of this valky series which is going to be about deploying a full Stacks felkid app we're going to learn a lot in this one from web hosting types or if you don't care what you can just skip to the end and I'm going to show you how to deploy a silky project but at the end of this we're going to deploy a full stack swellkit block project that's going to use Prisma postgresql as the database which is going to be hosted on Super Bass and we're going to host the app on versel I wanted a real world example because applications are more complicated than deploying your typical static blog right in this project we're going to have blogs a dashboard which is just a mini content manage resistance so you're going to use server size rendering is going to be great but before that let's talk about web hosting types the reason why I want to cover all of this web hosting lore is because I want you to actually understand why I picked these Solutions instead of going for some other Solutions and we're going to briefly speed run the history of hosting and what led us to where we are today but of course you can skip this and just go to the hosting part part which is going to take you five minutes probably let's talk about Cloud hosting basically all of Hosting is cloud hosting so you might be familiar with this traditional hosting providers like digital ocean remote or vulture but I call them specialized clouds providers because they're actually focused on the consumer so if you go here you can see they have a really nice site so they're like focused on individual developers businesses and Etc so you can see it's very clear when you go to products droplets kubernetes and Etc you can pick a virtual private server or shared hosting so you're going to share CPU RAM and Etc with others you can see managed databases so basically you know what you get you also have Solutions here like manage WordPress Magento woocommerce and Etc so they really aimed at making this as user friendly as possible and then you have the second category which are the Titans of infrastructure they're basically like digital oceanly node and these others but AVS or Google cloud provider on Azure are basically the titans of infrastructure so look at this you basically the main difference is they offer thousands more services they have insanely larger infrastructure Etc and you need a degree to understand any of it so if you go for example to products you can scroll up for days so how can you make sense of this right and basically this isn't for mere mortals but this is for Enterprise and Etc and this sounds boring true but this is important to understand how we got to the next tier of web hosting which is going to be serverless so here we have the most popular ones for most people I think when you're with developers is going to be serverless or Jam stack and these are your Versailles netlify Cloud Fair pages so if you go here immediately here is advertising as a jam stack platform and jamstack platform means a lot to many people but basically it just means an R architecture where you use third-party apis to stitch together a site instead of Hosting everything on a single server and you have their sales and Etc and basically how do you make other sales so let's go back to AWS right so AWS has many offerings let's say for example you want to make this super easy you make a nice CLI you make a nice front end there are some of their offerings like AVS Lambda which is serverless and what you get you get our cell that's it and they also offer you a lot of more beneficial features like continuous Integrations for example when you push your code up to GitHub it's automatically going to redeploy and Etc you get nice previews and Etc and that's really the greatest developer experience out of all of them and then you have this other category that I didn't know the name of so I named it full stack platform so basically you might be familiar with Heroku and Heroku is like versel but for the entire stack right then it makes it easy one click deploys where you're back in front and Etc but Heroku has fallen out of favor due to recent pricing structure changes right but there's all other amazing Solutions now in this space you have a railway which is really easy if you want to just provision a database where you can host full stack you have render.com which is also awesome you have flyer which is also becoming popular and basically flyo is really interesting because it lets you deploy your app across the globe so as you can see here you can deploy not just your app but your data Etc so this is blazingly fast and this means that in a lot of cases the server side rendering can actually beat the speed of static and this is really awesome if this is something that you're interested in so you might be asking alrighty this is really so something why didn't you pick flyer or any other and this is another great selling point of serverless because serverless is so cheap because you don't have this server that you manage right like think of a traditional server it's just a long running process in your text manager or whatever you can imagine but serverless are just functions which get invoked by some action right so for example if you have an entire server and you only send one newsletter a week that's really a waste of electricity but if you using serverless it's only going to spin up when you need to send the newsletter which is really awesome and cheap this is why they have a lot of these three generous tiers because they don't actually give you a real server where you can wreak havoc right because the thing is with this sort of sites render flyo they actually give you a real server and this is really dangerous if you make it a free tier for everyone because people are going to do nefarious things with it so basically this is just all me rambling about just to say that this type of services require you mostly to use a credit card just to prevent that abuse and that's why I really chosen something like versel to host the app and I chosen Super Bass for the database and of course this is the next year I want to talk about because serverless has its own unique set of challenges you have all of these amazing great serverless databases you have super bass Firebase 49 jasura which I haven't tried but they seem like they're all into graphql if that's something you're interested in SATA sounds really interesting you have upstage for ready so you can use that you have plenty scale and then you have mongodb if you like using mongodb I really not a fan of Firebase because Firebase is proprietary and locks you in what is the benefit of something like super bass is that it uses postgresql so if Super Bass buys the dust or whatever they change the pricing tiers it really doesn't matter you can switch to Planet scale or whatever else you can provision another type of SQL database because we're also going to use Prisma that has many database adapters so your schema stays the same because the schema looks more something that looks like typescript instead of writing raw SQL or mongodb even yourself alright friends I'm super excited to show you how simple this is the only thing you're going to need is a GitHub account which I have a secret Smurf account here so you can use GitHub to log into Super Bass and to for sale inversell is going to ask you for permission to your GitHub anyhow because it has a tight integration with it so first we're going to create a database because that takes a minute and again we're going to use super bass to provision our postgresql database we don't really care about any other Super Bass features we're using Prisma another JavaScript library but of course if you want to use other Super Bass features you don't have to use Prisma so let's go and create a new project if you go to app.superbase.com create a new project I'm going to name it blog you can name it whatever you want and this is the important part we need to generate this password then we need to copy it I'm just going to create a new tab here copy the password don't link it to anyone and here you can choose a region close to you I'm going to pick this and then you can press free simple as that let's create a new project and this is going to take a second and that is going to take a minute to provision the database itself so you can see the project is created by the setting up the project this is a perfect time to set up the project so here is the example project with some simple instructions you really need to go here I'm just going to tell you what to do if you're following along which I hope you're doing so here inside of an empty project you're basically going to create a new GitHub repository and we're going to push this up so you can host it yourself and try it right so I'm going to use this command pnpx digit which is just going to copy over a GitHub Project without the history and it's really super simple so I'm going to complete joys of code 12K deploy this is the name of the repository and this dot at the end just means okay put it in this exact folder don't create a new folder and I'm just going to press enter and awesome it's fast like that let's install the dependencies and of course you can use any package manager you want but I highly encourage you to use pnpm so this is great and now if I close the terminal you should see here is the project so we need to rename this environment file to environment and be careful to not leak this to anyone this is very important and this is only required for local development because later when you host it somewhere on yourself you need to enter your environment variable in their dashboard so here I can open the EnV and I already have some example here and by now this should be done so our database is provisioned awesome so if you go to Project settings database and you can see here's the connection string so you can get this but we want the connection string for the pooling because it's going to fix the problem when it comes to using a serverless database you really have to think about it just copy the string over we can copy it right here I hope you have your password because we're going to take the password copied let's close this because we don't need it anymore and now including brackets replace this and this is it boom you're done so let me just really show you inside the Prisma schema I set it up to use postgresql you can use any other adapter you want to ride the schema stays the same it looks like typescript beautiful chef's kiss and you can see here we have something for authentication really it's not important here is the post schema itself so let me just close this and now I can even close this and now if you go to your terminal I'm going to press Ctrl L to clear everything so now we just want to create the tables from our Prisma schema and you can run migrate if you're in production but if you're just prototyping and trying things out you can say pnpx Prisma DB push and now this is going to create the table on Super Bass alright so let's give it a try and let's see what happens and now when you go to the table editor you're going to see here it populates the tables and here your posts are going to be you can even edit now Super Bass error l which is hilarious but yeah okay this is it as you can see here is the database also I want to mention that you can also set up row level security because right now anyone with the anonymous Prisma key can edit this but you can look into this if you want another thing is that you can run the development service you can say pmpm run Dev and everything should work great so first time running now we can go to localhost 5173 you should see everything working give it a minute to build everything you see everything working we only see the title because we don't have any posts but yeah this is just the full stack block app so you can see here is the blog which is going to be the search here is the dashboard right now there is nothing here so you get an error maybe I should have done some better error handling right but yeah it's really not important about and yeah this is awesome and you can even just go here and you can see here where the dashboard was right you can register here because you already have the access to the database but this is boring let's host our app on Versa at first let me just close this I'm going to close everything and on GitHub first we need to create a new project so we're going to create a new repository I'm just going to name it blog let's name it swellkit blog nothing else you need to do so you can just go here create new repository don't do anything here I'm going to press Ctrl shift G to enter this git mode and I can say initialize repository we have the user terminal if that's spooky to you so the only thing we have to do here is ADD everything and let's just say feature add project nothing special we're going to use this sometimes I mix the GUI in terminal however I feel and this is what I love to do so I can go here I can just copy everything I can just say paste let's just do this and everything is fine because we're going to push on already existing repository and congrats now you have your own repository you can host it's clean and now you can use your cell but let me tell you one thing before we do that which you should do we're going to talk about adapters let's talk about that first so how do you host a swellkey project right swelling has this concept of adapters by default if you don't have any adapter specified in the swell config you're going to see if you just close this you're going to see here it uses adapter Auto and this basically means when you deploy it to a supported platform like Cloud Fair workers netlify node static or your cell is going to know what the platform is that is going to use the right adapter but you can of course do it yourself you can go here which resale recommends so let's do that prpm led development soil.js adapter for cell let's do that and we just need to replace that and that's it okay so now we can go here or sell here is a good tip I have for you so before you deploy to yourself just run pmpm run build and this is going to expose any potential errors like task repairers because those are going to error out when you deploy your project so if you catch anything here it's going to save you so much time for having to redeploy constantly your app because of some silly errors right and you can see everything looks great this is the same output that's going to be on resell but it's not really the same and then when you're done with this you can say pnpm run preview and if you're really wondering how do I know all these commands or go to your package.json you can always find the scripts here for testing and Etc they're all here so this is going to open it on Port 4173 instead of five you can go here you can see all right not brave search nice one you can just go here five or seven free and okay you see everything else okay this is internal error but it's because we output it using build this is not the developer server so don't freak out okay so now let me show you how easy this is let me just stop all of this I'm just going to exit and now inside of the versal dashboard you just have to go create new project and this is going to load your repository if you're doing this for the first time it's going to ask you for the permission to your GitHub just say yes and then we can just select the repository because I'm on my legendary Smurf account I only have one repository so I can say import blog and now here it already knows this is 12 kit because it's already pre-configured for you now the only thing you have to do is populate the environment variable here so let me just see I need to open the sidebar here you can see build and output settings you don't really have to change anything here because you have the preset here so it's feed build public and you don't have to care about this okay so now we care about this so now we just need to give it a name it's going to be database URL and I will just need to copy this connection string let me do this press add before you click Deploy on exit but you can edit after right because you can use this dashboard or whatever so now it's added and that's basically it so let me just collapse this and now I can press deploy and let me also close this tab and now this is going to take under a minute and another thing I want to mention is that if this is the first time you're doing this never be afraid of the built album this might look spooky but this is the same thing we did here in the terminal right same thing as you run pnpm or npm round build this is the same output but it's using someone else's computer right so if you ever get an error don't freak out it's just running the command just stay calm read the error maybe Google it maybe it's something obvious you're doing something crazy right if you remember this is like exactly the same like we did here everything looks great and it's just doing its thing closing to the end let's see it's already done okay so this is it no errors great this is how simple that was let me just scroll up there's a lot oh it's actually not done but yeah it's going to be soon and the next time it's going to be even faster alright so now we get congratulations but let's continue to the dashboard so alsoever cell gives you a nice name for a preview but you can also look at other deployments so here we see our site is live so we can go to the deployment right here or you can change other settings like your node version if you want all right so let's see oh I clicked the deployment on accident I want to click on domains okay let's go to The Domain so let's see what's going on so we have latest posts and now when we go to the dashboard since you don't have an account right we can go register I'm going to say test one two three four and this will create a new account on Super Bass right and we already have a page hosted and if you want to enter your domain you can go here and somewhere under settings there is an option for The Maze and Etc alright so let's see what it's complaining about and if you ever get an error you can go to your deployments and you can go here I think and then you can see logs but you can also check it for functions you can see if something is wrong here but I don't think anything should be wrong here so let me just check what is going on here okay I don't know what happened now but we are already logged in and as we can go to Super Bass let's see user you can see here is the user and then we can go here we can create a new post and let's say Bob Ross ipso of course let's go here and let's add some happy little trees like a post and then we can say happy little trees or whatever else title you want to give it happy little trees happy little trees and let's just paste this text I go to select as published let's submit it this is going to be added to our database here you can see despite this being server-side render this is really fast and if we go here let me just see this should work actually I'm really curious interesting must be something going on with your cell because I actually do not experience this basically this is going to work 100 you go to the blog that's what you can see here are all your posts you can search happy little trees we only have one post and let me just see about blog and here it is so basically maybe this is just so new that things need to settle down just give it a minute don't panic right things are going to work and now you can share this with your friends or whoever you want and you can log out and basically this is it now you've learned how to host a full stack project using circuit we use super bass to provision the postgresql database and of course then we deploy the entire project on resell in the next section I'm going to show you how you can optimize your site further using cache headers alright friends so how do we make our site even more awesome I'm not sure if you notice it I probably mentioned it but we're using server side rendering that means none of this is static but you can see our site is blazingly fast so how is that possible well basically the server side rendering is slow is a misconception what is expensive with server side rendering isn't the creation of the HTML page or whatever but is the data you're trying to finish because fetching is expensive if the data is further away from you but how was static site works for example if I go here it uses a CDN or a Content delivery Network which are just servers across the globe that literally just take the assets from where you're hosting this so HTML video images and Etc and they put it closer to you so for example if you're here and you request some image for my blog then you're going to get this from this CDN instead of here and this is why static sites are so fast but then imagine that if you have some data like here in this case we're using Super Bass right and this is here in Frankfurt somewhere in Germany right and this is fast for me but it might be not fast for you over here or here what people are trying to solve this problem with is Edge Computing which is basically the same concept as CDN but it's using the edge to move the data closer to the user we're not going to use Edge today but we're going to use some simple HTTP caching basically we can just set cache control headers for a certain iteration which means if a thousand people visit your page you're not going to create a thousand requests doing the same work on the server but the CDN is going to be like oh I have this cached already I can just serve you this resource and then for example if an hour passed then is going to get it from the server again and this is really simple but powerful and really cache control headers aren't anything spooky so if I go here in the post here I have this section where I show you how you can set cache control headers and another thing I like about this is that you have to think about the content on your site so you can optimize it you can do whatever you want basically it gives you a lot more power freedom and flexibility and if you want to learn more about cache control headers you can go to mdn here you have some descriptions they aren't very useful to be honest but you learn a couple of these things and then you say so for example if we set max age this just means okay I don't want you to Cache this to the disk then you have this directive s Max H and this tells a share cache which is a CDN a Content delivery Network it tells it how much to Cache this resource and this is 60 times 60 so this is going to be one hour because 60 seconds times 60 minutes so if I go to the block here Let's see we have the latest post right and they're like thinking okay how often do I want to refresh this right and maybe you can put an hour because this really isn't that important and then we have an RSS here which you can also cache for an hour because why would you need to ask the server every second for this right this is like it's a waste of electricity and then you have some other things if you go to the block if you have a search and this just grabs the post and here I have some client JavaScript to just filter through them so this is nothing special and just ask yourself like how important is this right maybe we can also cache this for an hour because it's not important and then for the dashboard of course that gives us this internal error for whatever reason I don't know what's going on but we can just ignore it for now in here you can be like okay I don't want to Cache anything that's Dynamic that's not the same right because I want the freshest data always and it's not really often used or public facing and then we have an interesting thing like an about which we can pre-render using page option in socket and we can even disable JavaScript by disabling client-side routing which are going to show you how and this is really awesome all right so now that we discussed this strategy another thing probably I should mention is that newsletter I don't really have any logic here but you can't you might be thinking if you look at this newsletter okay this isn't changing we can just pre-render it but you can't because pre-rendering isn't going to work if you use swellkit form actions because they require a server so we're just going to leave this alone really don't care about this alright so let me just use this pause so I don't miss type anything and have some silly errors so we just discuss the strategy what we want to do and I'm just going to use this to set the cache control headers so now I'm going to go to Source routes and now we can set the cache control header inside page or server TS file so here is one for the route and here it is so here is where you get the publish post and really we just need to destructure set headers from here and that's how simple this is so now we can say set headers here you can set any header you want you can say x and you can say I'm going to give it to you and then you can specify your cache control headers if you want which is the thing we want so you can say cache control and again I also prefer to use this format like this so we actually know the time so we can say max age zero that's never going to change and we can say s Max H which this is really sometimes easy to get wrong and then let's just use this and I like to use this format but you can use an hour or there will soon but you can just use JavaScript for some easy maths okay so you can save this and then we have the blog route so we can go to the blog route as we discuss it and let's also cache this for an hour and let's just copy this part over so you'll have to repeat ourselves so we can go to the blog so we have the blog so here is the search for the site right if you go here see blog it's not cooperating today with me let me just see what's going on I'm just going to log in again see what's going on well yeah I hope this works much better for you because yeah apparently there are some difficulties but yeah we can just ignore it for now but we can just go here to the page server and let me just go here I'm just going to close this and let me just close the sidebar I'm going to copy over you don't really need this we just need to get the headers we can say set headers and now we can do this like I have it in the post right if you look at here here is the same thing so this is going to be an hour this is going to be an hour so for the Post itself really want that to always be fresh so when we fix a typo or something we just want it to be immediately reflected so we can set this to one minute so let's go here to the blog slog you can go here again same thing and copy this over you can just go here you can say set headers and then go here and just set it to 60 seconds you don't even have to do anything special here and I'm also going to need three params yeah so let's not mess that up and then another one I think is the RSS so let me just see here is the RSS and this is interesting because this is at a root so if I go here where is the RSS here it is so here's something different because I'm using a standalone endpoint I'm already returning a new response which is content type and then we just need to do the same thing so we can just go here we can say hey cache is also on the CDN let's say Max stage zero this message and then you can set it to an hour or you can set it to whatever you want and also you don't have to just use these values you have access to JavaScript right so you can make this conditional if you have a pose that's older than seven days you can look at the publish time you can say okay if this post is older than seven days I'm probably not going to edit it often so cache it forever and then to bust the cache you can just redeploy to versal or you can use a web hook so let me just look at the about page when we're here here we're going to use circuit page options so say for example I'm going to collapse everything just so you know where we are so for example in routes about I can just create page server TS file see what I created here so you can say export cons and now if you say pre-render this is just going to build a HTML page in advance and we can also disable the client router so this is not going to have any JavaScript at all because we don't need it for an about page and it's going to get rarely viewed anyhow so you can say client-side rendering false all right awesome so basically now we're done and now we can push the changes press Ctrl shift G I can go here and we can just add this let me just add this you can see feature for sale adapter or actually it's not a feature we can say build but it doesn't matter just commit and then we can say feature cache let's add all of these say commit and then you can say sync so now you're going to see something beautiful if I refresh this you're going to see who's going to push something in your commits and now for sale since it's hooked into this you go to resale dashboard is going to automatically redeploy so this is going to also take under a minute I'm going to close all of this and our cache is going to work so give this a second all right and this time it's a lot faster so you can go here and even have a new URL for that if you want and I hope this time we have more luck and less errors unlucky I know but it is how it is so this is another great thing that even if you have a branch in your repository you can push that up before you push it to main you can get a preview deployed to make sure you didn't mess something up on yourself which you should always do and then we can just open the link which is the link for this preview deploy and let's see things are already looking a lot better so let's see just login it should take a second and you can see it here so let's see our caching in play so when we open the network tab so the first thing I respect is we're going to get a cache missed because what I've done right now is I've just used client-side navigation right and your data can also get cash this way but it doesn't really matter how someone is going to open your link they're going to go directly to that link right so first time you're going to get a Miss because it didn't Prime the cache so let's reset it and actually maybe I'm also unlucky let me just see I'm just going to do this and then let's just open this and we can see h0 so you just started and when we go here do these headers we can see it's a miss and now when we refresh this instead of asking the server is going to pull this from the CDN so let's refresh this and you already seen how fast this was and how awesome is this and this even isn't using static size generation right we're using server side rendering with some clever caching you can see h14 and now when a minute passes this is going to reset so let me just try my luck if I can go to the dashboard let me just make some changes here if I can I'm just going to give it exclamation marks let's save it submit it and let's go to the blog and now you can see 44 and now no matter how many times a refresh is going to be cached how awesome is this beautiful it's just using web standards right so here we say it's 54 we set it to 60 seconds right one minute so let's see are we close who's giving us this error but now let me just go here now you can see this is updated so now again this timer is going to start running and beautiful this is it some basic caching using the web platform and if you like to support me you can like And subscribe and find my patreon in the description thank you for watching and catch you in the next one peace [Music] thank you

Channel: Joy of Code

Views: 9,265

Keywords: sveltekit, deployment, supabase, vercel

Id: uAF4Yd-gddo

Length: 30min 37sec (1837 seconds)

Published: Fri Mar 24 2023