SvelteKit | $env module | how to use .env in SvelteKit 1.0

[Music] hello and welcome thanks for popping into my channel if you are new here please like And subscribe for me if you find this content helpful smash that notification Bell so that you don't miss out in the next video comment below with anything that you need help with or topics you'd like me to cover and check out my website consultingninja.tech with that out of the way let's get into some environment variables with svelt kit 1.0 now if you've used environment variables in the past frequently what you would do would be install the npm package npm install Dot EnV and then you would fire that up and make use of that in order to access your environment variables now with svelt kit 1.0 you no longer need to use that in fact they recommend now that you don't because svelt kit provides its own way in fact they provide four ways of making use of your environment variables and they tried to set this up so that it would make logical sense before we get into the four different ways I do want to point out that inside of the svelte.config.js file there is an area called kit and this contains all of the configuration options for your spell kit application things that are not explicitly set are supposed to have default values for myself when I started playing with the environment variables with svelt kit 1.0 I ran into an issue where it was not letting me import anything it would say that there was no X exported member from that file so in order to fix that for myself I came in here into the kit portion of this config object and added an EnV and that is an object with some properties and one of them is directory and this is the directory that svelt kit should look in in order to find your environment variable for myself it's the base directory but you can have this set up to be whatever it is you'd like if you're having issues with environment variables in your spelled kit application come in here and add the path to where your environment variable lives just to make sure that's not the problem and you'll see here if I hover over it it does say that the default is supposed to be dot so I'm wondering if maybe this was an issue with Mac I know frequently when I'm trying to run a script I have to have dot slash in order for the script to run that's one thing to put you up on right in the beginning before we get to too far into this if you're having issues try this it certainly fixed my issues looking at the documentation for the environment variables in svelt kit there is really good documentation here and I will link to this in the description of the video but what this lays out is essentially this we have two static ways of importing environment variables and we have two Dynamic ways there's both a public and private version of each so the difference between the dynamic and static is that static is inserted into the application at build time and dynamic is sent at runtime now the difference between public and private is essentially where in your application has access to those environment variables in the case of the public versions these are able to be accessed from the back end and the front end the client has access to these and in the case of the private versions only the back end has access to those environment variables so what that looks like in our application is this I have a an environment variable here I have a two environment variables that are private they're in the private section I preface mine with the word secret underscore we don't want to accidentally expose that which spell kit makes that actually hard to do and then anything listed with public underscore by default spell kit will consider a public environment variable if you wanted to change what this prefix is you can do that as well inside of the svelte.config.js by adding another option just after directory you just put a public prefix and then you can set it to whatever it is you'd like now I generally don't set things unless I need to and public is fine for me that the private ones you choose yourself I don't know why they didn't choose to have a private prefix in here but you can set your public one there if you'd like otherwise for myself I just always stick to secret underscore for my private ones and keep the default of public underscore for my public ones so what this looks like in practice is this I have a plus page dot TS file and here you can see I have import public underscore URI and public underscore variable VAR from a dollar sign EnV slash static slash public and that would make sense these are our public environment variables we know that they're public because they're prefixed with public underscore and then here you have in EnV import EnV from dollar sign EnV slash Dynamic slash private now if I were to try to access EnV Dot Public you'll see that there's nothing even showing up when I try to type out public underscore URI nothing and if I were to try to type out public underscore VAR again nothing but if I were to look for my secret ones since that is the private module where those are exposed you'll see that both of them show up here no problem I've got the URI and I also have the VAR that I have set in my DOT EnV file now because these are private if I were to try to save this let's save that and then look at I'm not sure why the hot module reload just did not work there but if I were to save that you'll see right away svelt kit yells at you and says hey you cannot do this the build will not build you can't even run this in development mode because you are trying to load in a client facing a file a private environment variable you cannot do that spell kit won't allow you to do it so that makes it really nice for preventing accidental mistakes let's take a look at some of these I'm going to go ahead and console.log and I'm going to get rid of this private because we can't do that and I'm going to say public and then the public URI and I'm just going to copy this and paste it and say public underscore VAR and if I give that a save you'll see here in the back end console we have John towns and gabagool those are my two public environment variables John towns and gabagool and the console.log just fine out in the back end code no problems there now if I want to access the private environment variables again you cannot do that from a client facing file and plus page.ts and the plus page.js remember those files run both on the client side and on the server so this file would run first on the server and then during hydration would also run on the client so that is why you cannot have your private environment variables exposed in this file but if you wanted to or needed to access private environment variables you can easily do that by simply changing this file to a plus page dot server and I'm changing the file name and I'm saying this is super easy but at the same time let me point out that this might change the structure of your application because in the case of deploying to versel for instance there's some differences between what you can do in the plus page.server and the plus page so just keep that in mind tuck that in the back of your hat for later now I can import the private environment variables so I can import uh Secret and the other Secret like that and let's console.log these Secret do a colon and Secret and we'll just copy and paste this and grab the other one save that and we'll make sure to refresh since my hot reload is acting funny and now you can see that we have all of them printing out just fine we've got both of the Publix John towns public gabagool and then a secret secret URI and secret secret sauce we don't want anyone to get that special recipe so that is how we print these off now the other thing to keep in mind is that these are the static versions if you wanted to access the dynamic versions you would import EnV from either dynamic EnV dynamic Dynamic private or dynamic public your choice depending on what you need and then you'd access that by doing EnV Dot and then the variable that you're looking for and I can save these and now you'll see that those still print out the difference again to keep in mind is that the dynamic versions are sent at runtime and so if you're sending these to your client that is going to increase your payload it's going to make your payload larger if you're having to send environment variables from your back end to your front end I would only use the dynamic versions if absolutely necessary because of it increasing your payload size that is environment variables in svelt kit 1.0 I hope that you found this video helpful if you did please give a thumbs up that would really help my channel comment below with your thoughts and as always have a great day

Channel: Consulting Ninja

Views: 3,394

Keywords: .env, env, sveltekit env, SvelteKit env, $env, $env module, environment modules sveltekit, SvelteKit, sveltekit, svelte kit, Svelte Kit, Svelte kit, svelte Kit, Sveltekit, svelte, development, framework, javascript, dev, tutorial, beginner, Tutorial, environment variables, environment variable, sveltekit environment variable, Svelte

Id: ai8PJgxF9Lw

Length: 11min 40sec (700 seconds)

Published: Fri Apr 07 2023