Build and run SvelteKit Apps with Docker

hello and welcome to another small sveld kit tutorial and this time we want to look into how we can run our spell Kit app in the docker container and um first we have to actually make it able to to build our swellkit project for node.js so um what we can do now is add a dependency to our project and this is spelled kit and then adapter Dash node so I'm going to install it also as a Dev dependency and then we can go to our sveld config.js file here and the first line here adapter gets imported oops from adapter Auto and we can just change this here to node after we installed it and this basically allows us to build our project um for node.js and we can check here if you generated your sweat kit project with a default template you get already the script here Village that's that's just calls wheat build and if I'm gonna execute it we can see that we get a build folder here and in this build folder is basically almost everything we need to run it to run the project so I can also then do note build index.js and I can start our sweat Kit app from node already so you can also if you only want to do it a node you can already work with that but we want to do it in Docker so we now need to create actually an image Docker image so for that do it manually we're gonna create a new Docker file and this is basically our build plan to create a new image and um you're gonna here do is we first Define a builder image so we do a two-step build first we create a small container that only builds our project the thing that we did here manually now and for that I'm gonna get the node 18 Alpine container 18 is currently the long term release and long-term supported release and Alpine is is known to be a really small image type so we don't need to get a bloated Big Image we can work with alpine and so what we do in our Builder we basically in there I always like to work in an app folder so create slash app and in their data because um this project here is the one I also worked on for the for my sqlite tutorial with with square kit so we have a data folder here and it has a small sqlite file I'm just going to create a data folder and what we do in this Builder is um and first we actually need to copy everything in the app folder so we just copy everything um accept actually we can create it Docker ignore file so we actually don't copy anything but everything except a few exceptions first one is not modules we want to install it in there again because I'm here developing on a map Mac and some modulus get installed for my Mac architecture and in the docker container it's a Linux architecture so we have to reinstall it and here's valid kit is a smaller uh yeah 10 folder we don't need the data in there and build we want to build it ourselves we don't need the build already done here and also included click.n and after that we have everything we need in the container we go to our app folder and install our dependencies I'm also going to create a new end file with an absolute path So currently in my.n from from my Dev environment I have a relative path but let's do an absolute path because we are now our container setup and gonna write it to the dot end file and in the end we just call yarn build and yeah that's the first the build container done so we now actually do the real container again from the same image node 18 Alpine and we can then again create an app directory then we copy the relevant files from our Builder image so um I say from Builder and we first copy the actual build in there and what we also need is the package Json and our yarn Dot Lock this is actually optional but you could generate it a new one if you install from package.json but now if we do this we get exactly the same setup as our Dev environment and we we copy these files to the app folder and so what we still need to do is we need to install at this time production so how you should structure your package Json is that you install Dev dependencies for everything that can that is not actually needed to run your app but basically to develop it so for example swirl kit itself because spelled builds our app for us that's the build folder we don't need the swell libraries anymore because they are land the necessary stuff lands in this build doesn't land in the build is our runtime dependencies like we use b-crypt to Hash our passwords or our sqlite library these stuff you import in your backend for example you need to Define as normal dependencies and if we say here in the docker file in style production we only install these dependencies so we don't need the dev dependencies we won't get them if we say dash dash production after that we clean the cache to make the image a little bit smaller then we say our worked here slash app and at last we Define a command that basically calls node with a parameter built in the xjs so basically like we did here node build index.js we just call the index file in the build folder and that's already our Docker file so we are now ready to actually start our uh or our build our container so what we do here is Docker build minus t and you can call it everyone you can also spell ticket escalate image or something and Docker then goes ahead and starts building or our first year running the Builder here you can see it's yarn build is currently executing it then it's done it now goes to our second our runner image and copying the files node installs here the Deep dependencies and in a few seconds we should already be set and have our image ready um so how did I call my image okay so um if we want to run our container now we can then um do this by uh using the docker run command here I'm gonna say detached so it runs also in the background it doesn't always be in the foreground and also I say part three three thousand binder to three thousand that's the default part and it's free you can also bind it to another one but the inside part needs to be three thousand so I'm going to do a volume or with the mount syntax here a bind say source is my current directory so I need to start it from this directory here and slash data so I get the database inside mounted inside so container this is really recommended is so when you change something in the app the changes also get written through your file system and you can safely delete the container and start a new one and you don't lose any data so always Mount your your data directories just because I do it here for for testing purposes I also added dash dash RM so when I stop this container it could automatically removed give it a name and here in the end I have to say which image I want to run so let's see um I can also draw card logs that's a container name in follow so it says listening great and if I'm gonna find here's a browser and refresh yeah I get my app here and if I yeah I could change data and stuff and it gets written back so everything works fine um I will um put a link to the Run command enter the docker file to the GitHub in the comments and um thanks for tuning in I hope this works great if you have any feedback make sure to leave it in the comments and have a great day by

Channel: hartenfellerdev

Views: 5,619

Keywords: svelte, sveltejs, sveltekit, webdev, component, popup, combobox

Id: LwzoWuHjOWk

Length: 10min 30sec (630 seconds)

Published: Tue Jan 31 2023