All about Adapters - How to Deploy in SvelteKit

[Music] so [Music] hey everyone welcome to the third felt sirens live stream stream today i'm going to be talking about adapters and this is a pre-recorded talk so i'm going to go ahead and click play and afterwards i will have some time for q a so enjoy what's up everyone my name is stephanie dietz i work at for sale on the devrel team and today i'm going to talk to you about spell kit adapters first i'm going to go over what adapters are and why we use them then i'll show you how to select the appropriate adapter for your project how to add it to your project and then finally how to deploy that project so before you can deploy a svelkit project you have to adapt it based on where you're going to host it in today's world we have all these different serverless providers and svelte's solution to becoming serverless first is through the use of adapters basically we have different platforms such as versel and netlify and while they do have similar functionality they each have their own vendor-specific implementation so in order to ensure that svelt runs seamlessly on each platform we have to use the specified adapter and each adapter does a few major things so here in this felt kit documentation under adapters it gives you a list of everything an adapter should do and if you want to read through this you can do that but essentially all together there are three major things that an adapter needs to do it needs to copy svelte's compiled client-side javascript bundles and static files to the serverless hosting directory it needs to copy spell server-side javascript bundles as well as platform-specific render functions to the serverless functions directory and then it creates the redirects configuration with the catch-all route to the service render function in simpler terms and the most important thing for you to understand about adapters is that an adapter is a plug-in that takes your app as an input during build and it generates an output suitable for deployment on that specific platform so let's scroll back up to the top of this adapter section in the documentation and down under supported environments we see that sveltkit provides adapters for versailles netlify and cloudfare pages as well as two non-service based adapters we have the adapter node which i'm going to talk about later in this video as well as uh adapter static which again i'm going to go over how to add these to your projects and deploy with these in a bit but first let's talk about deploying to versailles so depending on where we're going to host our app we have to import the appropriate adapter so for instance if we were going to host our app using first cell we would first have to install the adapter versailles and use that in our svelt config.js file recently however there's a new adapter that was created called adapter auto and this is the default adapter so anytime you create a new spell kit project this adapter will already be installed and it makes deploying spell kit apps feel like magic so let's start off by creating a new sveltkit demo app and we'll go over adapter auto and how it works and then we can deploy this project to vercell with little to no work on our end so let's pull open our terminal and we can initiate a new sveltkit demo project by running npm init spelt at next because it's still in beta and then the name of our app i'm going to say adapter example and click enter and it's going to prompt us to answer a few questions so first it wants to know which felt app template i want to use and i want the demo project so i'm going to select this first one and then just to keep things simple i'm going to say no to all these other ones but you can obviously configure your project however you want to then we just move into our project directory we have to npm install and then we can run this locally once it finishes installing all right so now it's running at localhost 3000 and we can go check it out really quickly all right so here's the demo app that it creates for us it has this little counter component it has some routing and then a little to do app you can type in items and it adds to it you can check them off but what we care more about right now is the actual code so let's pull this open in our text editor all right so here we have our project pulled open and we moved into our svelte.config.js file and we see that we're importing adapter auto and we are using it in our project as our adapter so there's no additional work needed on our end we don't need to install the adapter ourselves and with adapter auto this app can already be hosted on versailles as well as other platforms now if you're familiar with spell kit you're probably wondering like hey don't we need to install the adapter cell and a couple months ago this would have been true you would have had to install and use the versailles adapter in your spelt config file so in this file before deploying it but now that we have adapter auto it makes this setup unnecessary basically when we deploy this to first cell the adapter will automatically choose the appropriate adapter for the current environment so in our case when we deploy the server cell it's going to detect that we're using versailles and it will add the verscell adapter for us and then the versaille adapter will create the versail app using a function for dynamic server rendering so let's go ahead and test this out by deploying it versailles but first i need to create a new repo on github and commit all this code to it okay so let's create a new repo i'm going to call it adapter demo i'll keep it public and just create the repository now i'm just going to copy this code and head back into my terminal i'm going to go ahead and stop running this locally and just paste the code i copied in now i'm going to say get status i'm going to add all of it and commit it just say first as the message and then let's push okay so now our repo is up to date with all of our most recent code so let's go to versailles.com and get this deployed okay so we're at versacell.com and you can either log in or sign up i think they take you to the same page it's going to prompt you to sign in with some sort of get so i use github for this repo so let's sign in with github now you can see all of my repositories are here and i can just select the one that i want to deploy and import it so we want to import our adapter demo i'm going to keep the name as is and just click deploy so now our adapter auto is detecting that we're using cell and it's adding the versailles adapter for us and then vercell is doing all the configuration behind behind the scenes all right so let's wait for this to finish deploying it's going to take a few seconds almost there all right so let's click on this and visit it so here we have our app we still have our home page with the counter component our about page and to-do's so we can add some to-do's and check them off so it looks great and this is being hosted at our default uh vircell domain which we could change if we wanted to um so you can see that deploying to versailles with adapter auto is extremely simple but it's important to note that not all platforms are supported by adapter auto so in the case that you encounter a platform that is not supported by this adapter you may need to add that platform's adapter yourself or you may need to use one of the non-service based adapters so for example let's go to heroku.com and try to deploy this exact same app with our adapter auto alright so here we are in our heroku dashboard i'm going to click new and create a new app the app name will just be adapter demo just like our other one and let's create now i'm going to do this through github again which i already have my github connected and i need to enter in the repo name which i think i called it adapter demo also right let's see search yep adapter demo so i'm going to connect to that and i'm going to deploy our main branch so this once again is going to take a few seconds let's wait for it and we can see what it gives us all right so now it has been deployed let's go visit it in a new tab and we see there is an application error this is because a spell kit app is not adapted correctly for heroku since there is no heroku adapter adapter auto cannot add the correct adapter instead what we need to do is add our adapter node to this project so let's go ahead and do that all right so now we're back in our terminal and we can install our node adapter by running the command npm i at svelt js slash adapter dash node at next enter and we'll let this install now if we go back into our text editor where we are importing adapter auto we can just switch auto to node and just like that our node adapter is now being used pretty easy right so now we have the adapter node installed so when we build this app it's going to generate a self-contained node app inside of our build directory so let's go ahead and run the command npm run build in our terminal and we'll look at what adapter node generates for us so back in terminal npm oops npm run build it's going to build our application and if we head back to our code we'll see we now have this build folder which wasn't there previously and we also have this dot sveltkit folder which contains our svelt code input so depending on what adapt we use this code will be used as the input to generate our output in the build folder if we open the build folder we see our compiled code and notice if we click through some of these files there's no trace of svelte so in this case we're using the adapter node so the output is a straight up nodejs app which can be hosted anywhere that hosts node now we see we have a few folders we have our client code our pre-rendered pages our server side code and we also have this index.js file and this is our main node server so since this is just a node application we should be able to run it in production by running the command node build so let's go back to our terminal and say node build slash index.js and now we see it's running on port 3000 so let's go check it out in our browser and here we see a production build of our site running in node and it works exactly as we'd expect it to now we have the correct adapter installed but if we were to commit these changes and deploy to heroku we'd still get an error saying that our build failed and this is because this felt kit template does not have a start script which is going to be looked for by heroku so in our package.json let's add a start script i'm going to move into that really quickly oops package.json we're going to add a script start and we will just say node build index.js now we're ready to commit this to our github and try deploying it to heroku again so back in our terminal i'm going to stop running this and i'll say get status all right let's add all of that commit we just added node adapter and we can push all right so now if we go back to our heroku dashboard let's simply click deploy branch and now it will run the build again all right our app is deployed let's copy this url and visit it we see heroku has successfully deployed our app and it still works exactly as we'd expect it to which is great so the last thing i want to go over is the adapter static now most adapters will generate static html for any pre-renderable pages but in some cases the entire app might be pre-renderable in which case we can use the adapter static and a static site can be hosted just about anywhere we can use the adapter static just like we did our adapter node so let's start by installing it this time instead of node we just switch that word for static so back in our terminal we will say npm install at sfelt js slash adapter dash node at next oops i just said node we need to do static so we will do that same command but instead of node static enter now we are installing our static adapter and back in our code just like we did before instead of node swap that out for static now let's delete this build folder and build it again in our terminal and let's look at what that generated if we open up our build folder we see that it generated all these html files since this time the entire site is static now let's commit these changes so that we can redeploy this to for sale now back in our terminal we can say get status add all of them commit we just added adapter static and push let's head back to versailles.com and one thing that's cool about versailles is that anytime there is a new commit to maine it's going to automatically deploy it and we see we have an error here and i think i know what the issue is let's go to settings and down here where we have our output directory let's change that to build and save it now i'm going to try to redeploy our last one redeploy redeploy and let's see so let's visit it and now we see our app however if we go to our to-do list you'll notice that we can no longer add any to-do's and that's because this was generated static so we lose that functionality but we should only be using adapter static for static sites so this shouldn't really matter the last thing i want to touch on is that there are also some community adapters so if we head back to this felt kit docs under adapters i'm going to collapse this really quick and scroll down you can see they have a section for community adapters if we click this link it will show some community adapters you can use in your project so for instance here's an adapter to deploy your app with firebase and you can even create your own adapter so back in the docs uh if we scroll down a little bit you can see there's a section on writing custom adapters and they list everything the adapter should do and just how to get started with that alright well that just about sums up everything adapter related i hope you learned something and thanks for tuning in all right um so now i'll go over some questions i really only saw one question which was asking how we can use multiple adapters and you really wouldn't use multiple adapters if you wanted to host your site say on burcell and also netlify well first of all we have a adapter auto so you would just use that one but let's say you had to use two different ones you would just install the appropriate adapter build it for that platform and then install the other adapter and build it for that platform you wouldn't really use multiple adapters in your project other than that i did not see any other questions so make sure you follow us on our twitter and join our discord channel um also if you're interested in tuning in tomorrow we have a live stream and we also have our next talk on february 14th jen will be talking about sveltkit animation so make sure you tune in for that thanks for joining and i hope you learned something

Channel: Svelte Society

Views: 13,631

Keywords:

Id: SUrFDhhsJNo

Length: 18min 38sec (1118 seconds)

Published: Tue Jan 18 2022