Using Environment Variables With SvelteKit

hey friends welcome to an update to one of my older posts using secret environment variables with swellkit so let's get started what are even environment variables environment variables are variables in your system that describe your environment so for example on unix-like operating systems like mac and Linux if you type something like Echo home is going to give you the path to home say home and gives us the path and we can also do it for something like Echo path so you get the path to executable files on your system and this is useful because you don't have to know the entire path to an Executor it will just type its name we can set environment variables in their use of for knowing if you're in a development or production environment or storing API tokens safely here I just have a regular swell kit project and as I mentioned in the post in development you store environment variables inside the EnV file sometimes you're going to see Dot env.local and you should add it to your git ignore and add no call should you expose it to anyone so you can see here is the EnV file and that's basically what's going to get picked up and used in your application and to help your future self and others it's a great idea to create a env.example file so you can just put a placeholder and then you can push it up to your repository so the next person is going to clone your repository or work on your project knows what they need to fill in let's talk about using environment variables in swellkit circuit exposes four different modules for handling environment variables so we have EnV Dynamic private EnV Dynamic public and you have the same for em static private and EnV static public of course you can load environment variables however you want like using import.meta EnV from wheat because swell kit is built on top of Twitter you can use a package like dot tnv but it's easier and more secure if you use the built-in module swelkit provides another great benefit of circuit managing everything for you is that it won't let you expose sensitive environment variables on the client and throw an error since welkin knows about the Imports and you get great typescript support that being said these four options might look confusing but are easy to understand once you understand their purpose use the static import for variables that don't change this is what you want most of the time if you have an EnV file or store your environment variable somewhere else the next steps are going to be the same so for example if you have this environment file once you load your circuit application they're going to be loaded by Circuit and they're going to be generated here so you get great tasks report so if you go to the dot swell kit and generated MP and DS and we can search for these values so we can say secret API key and you can see it's right here for your let me see this is this is EnV static private so we're going to see this is also going to be generated for the dynamic one and you can also find the public API key here this is how it gets generated and that's why we have great typescript support I'm going to show you that in a second yeah so we can close this file and here you have a plus page DS file they're just going to use a load function and this runs on the client and server so let me just show you how we can use the secret environment variables in this case we really can't use this secret and this is a great benefit of using this swell kit provided modules so for example we can go here and we can say import secret API key and it's already see here we have great support so I can just say EnV static private but now if you look at our page and let me just open the terminal you can see here it's the output but if I saved it this should give us an error and this is how cell could prevents you from doing something stupid but if I close this and I just use the public one so you can just go here and if you press Ctrl spacebar we can type public API key and now when we say console log public API key and open the terminal scroll down we can save it this refreshes the page where you can see page DS public but what if you want to use the private environment variables you can only do this in private modules or Dot Page dot server TS files so if I go here so you can just import so for example you can do it like this from and then we can say EnV and we can say static private right and we also get great Auto completion so you can say I name it secret API key and now if I log it out here secret API key is going to get logged into the console and we're not going to get an error because this only happens on the server so let me just save it and we can see page 30s we get back the secret and we get the public API key in page DS one thing worth noting is that the public environment variables need to be prefixed with public underscore and they're going to be loaded from your EnV file and you can change the public prefix to whatever you want in the soil kit configuration use the dynamic import for variables that change sometimes you have environment variables that change and you have to send it from the server to the client use them only when you need to so you can do the same thing if you have a private one then you can just use the page server TS you can load it there and it also has to have the public prefix if you're using public one so if anything changes you can just import it from the server and that's how you use it but you should use the static import whenever possible last thing I want to talk about is so you can keep your own secrets you can create a server only module by adding dot server to a file name or place using the file inside lib slash server folder to store any secrets here I have for example a secret inside lip slash server slash secrets.ts and I'm exporting a secret and again if you try to import it somewhere like here so you can say import from lib server and then we can say secrets and now we can also complete this we have secret and now we should get an error if I open the console because you're trying to use something Secret and just refresh and yeah you're going to get an error so this is also going to prevent you from using any other Secrets but again if I remove this and if I go to page server we can import it here no problem so we can say import secret and we can just add lip here and we can just console log it out console log Secret and everything should look the same so you see here is plus page server TS here is the secret then we have our other secret that we created from the server only module and then for page DS we have the public key as before so that's everything you need to know for managing your secrets and environment variables inside swelkis so thank you for watching and catch you in the next one

Channel: Joy of Code

Views: 6,278

Keywords: sveltekit, environment variables, tutorial

Id: h2VzXTfbUpQ

Length: 6min 28sec (388 seconds)

Published: Tue Sep 27 2022