shopify how to store api keys as environment variables

hello welcome to another working with,data API is video and in this video I'm,continuing the weather here project and,I just want to do one thing one thing a,very important thing I want to look at,how do stop my API key from just sitting,there in my code I mean I have something,a little bit better here which is at,least the API key is in my server code,so no one could go view source just in,the browser page and see API key is,there however I would like to open,source this this is a public example I,would like to post I would like to share,it I don't want that API key just,sitting there in the code and the way,that I'm gonna address this is with,something called,an environment variable an environment,variable is a variable you know about,variables it's just like I think I have,in my code like Const API key equals the,thing is I don't want my variable in the,code I want it stored in the environment,I want it to be something that's set,within the operating system or whatever,framework or system I'm using to run,software itself and I just pulling it in,the code so how do I set environment,variables with node ultimately there's,no one way to do this a lot of different,platforms will have mechanisms for,storing and retrieving environment,variables and in fact when I look in the,next video about deploying your project,to a web server,we'll have to examine well how do I have,environment variables saved on this,particular web server but a nice sort of,clean way I could do it right here,locally and demonstrate it is by using a,node package called dot E and V so I'm,gonna go over to terminal and I'm gonna,say npm install,env how dot env works is summed up,perfectly in this one sentence that a,and B is a zero dependency module that,loads environment variables from a dot,env file into process env let me show,you exactly what this means I'm gonna go,over to the code I'm gonna just make,sure I've got it here yes I've got the,dot env package installed it's a,dependency I'm going to go to my server,code in order for da T and V to be in,action I need one line of code and it's,right here I want to say require env and,then call the config function so this is,going to tell this particular server to,load anything that's in a file called,dot env into an environment variable so,now what I need to do,whatever text editor I'm using is I need,to make a new file and I'm gonna call,this file guess what dot env then this,is now a plain text file where I can put,my environment variables typically you,might use all upper case for an,environment variable though I don't know,if that's necessarily required but I'm,gonna say API key API underscore key,equals I'm gonna go back to my code I'm,gonna grab the API key I'm gonna go back,to dot env and I'm gonna paste it in so,now I just want to do one thing now in,the server I want to log console.log,process env and we should see that,anything that's in the dot env file as,long as I require a via call config will,now be inside of process env so let's,restart the server and we can see oh boy,well a lot of stuff look there's lots of,there are lots of environment variables,already there but look at this I've,added one right here at the bottom API,key there it is,which means I can now go here into my,code and I could change this to be API,key equals process env API underscore,key so I can pull this API key from the,environment variable it's no longer in,the code whatsoever let's remove that,console.log let's make sure the,application is still working I'm gonna,run the server I'm gonna hit refresh and,it looks like I'm still getting the,weather information when I go look at,the check-ins everything is still there,I check in and I'm still getting to,weather information again but oh oh you,might be asking how is this any better,sure there's no API key here in the code,it just says process env API key but you,have a file right over here that has the,API key in it right there and so this is,a convention so it is a convention for,for environment variables to be stored,either in an dot env file or through,some other mechanism based on whatever,server you're using but not to be,published when the,is published so we this begs the,question am i bothering to publish this,code is this fine,how do i do what do I do when I deploy,this so did some extent this is really,going to matter when it comes time to,deploy this project to a web server,somewhere and I'm gonna do that in the,next video and we'll have to revisit,this environment variable question here,but let's just say I just want to,publish this as an open source project,on github so why not a little extra,feature in this video this feature is,also about hiding your API keys and then,publishing your project on to github and,I'm gonna do it in the most lightweight,simple way possible now you might be,asking yourself what's github what's get,those could be completely unfamiliar,things to you and so I'm gonna refer you,in the video's description to some,additional information about that as,well as some video tutorials that I've,made over the basic introduction to get,and github so this won't be,comprehensive at all I'm gonna kind of,assume some knowledge but try to be as,friendly beginner friendly to you as,possible to when walking you through the,steps so the first thing that I want to,do is actually create another file I'm,just gonna create two other files I'm,gonna make a file I'm gonna call it dot,env I'll call it like sample so because,I actually want when I publish this to,publish a file that tells you how to put,your API key in and so I'm just gonna,say your API key here so this dot env,sample file is the sort of sample it's,we're implying rename this file to dot,env and put your real API key in here,and I could probably in the in a readme,or somewhere I would want to provide,more context and information but this is,a nice starting point then I need yet,another file I'm gonna create another,file and I'm gonna call this dot get,ignore so this is really important git,is version control software that keeps,track of all of your files and various,versions of them what git ignore does it,says hey don't keep track of this file,this is my own personal secret stuff I,just have it here on my machine don't,keep track of with git don't upload it,anywhere don't ever use it anywhere so,in order to do that so I'm going to,create that file and what's the file I,want to ignore and ignore dot a and V I,actually also want to ignore some other,stuff like node modules I don't want,that node modules directory this is,all of the other people's code of all,these packages is a huge amount of stuff,that's not something that I want to like,publish and upload when I'm publishing a,project but everything else you know I,could presumably maybe ignore the,database like maybe I don't want to keep,the database but I don't really care,about that right now so I'm just gonna,leave that be I don't want to ignore it,let's say let's ignore it this is an,interesting question I'm not so sure,whether it makes sense to ignore it or,not but I'm gonna ignore it the next,step that I need to do is go back to,term I'm gonna go back to terminal I'm,going to quit the server I am here in,the directory of this project the,weather here and I'm going to type the,commands get in it that's going to,initialize this folder as a git,repository get in it so it initialized,an empty git repository then I'm gonna,do my first commit of everything that's,in the directory a git commit is a,moment in time saying hey this is a,particular set of changes that I want to,snapshot as a moment in time to this,project and save for its history and the,truth of the matter is this is my first,commit so I'm just really saying like,hey you can add all this stuff and save,it so to do that first commit I'm gonna,do this in two steps I'm first gonna say,git add which is like add all these new,files get add and the dot means add,everything now I'm ready to type git,commit now you might think this a little,bit strange why is it two steps get add,and then get commit don't I just want to,commit all the stuff well this has to do,with sort of how git works as a software,system there's a staging area that files,get attitude and those files can be,committed and things can be moved around,in all sorts of complex ways and this is,something that I cover more in more,depth in that other git and github video,series but for now all I want to tell,you is that I need to add all the files,and then I want to commit these files,I'm gonna say - em and I'm gonna put a,little message here there's more ways,you can write longer more thoughtful,messages but I'm just saying this is the,code from weather here as of video I,think it was gonna be video 5 - 4 I'm,gonna hit enter and then all this stuff,has been added now look if you look at,this list,do you see node modules there do you see,dot env there no because those were,ignored with git ignore the next thing,that I want to do is put this on github,so github,is a website that can host your git,repositories this is now a git,repository sitting on this laptop so I'm,gonna navigate over to github slash,coding train I'm gonna come up over here,I'm gonna click this button to create a,new repository then I want to go here,and I want to make this I have a github,organization which is called coding,train so I'm gonna select that and then,I'm gonna make a project called the,weather here this is based on Joey,Lee's project the weather here I'm gonna,initialize this with a readme no there's,so many different ways to do all this,stuff and I think I show you in other,videos different ways but what I've,actually the steps that I'm following,here I already created the git,repository so I don't want to make a new,one I want to just up I just want to,sync the two so I'm just gonna click now,I want this to be public I'm just gonna,click create repository and github is so,nice to me it's just saying all this is,all I need to do here all I need to do,is add this as a remote write the coding,train weather here add as a remote and,then I can push which means send it so I,can just literally copy-paste to this,command go back to terminal type that in,and copy this command go back to,terminal paste that in and I have sent,all of the code to github I hit refresh,here this is the full project here and,if I navigate in and look at index such,a s we can see that the code oh I mean,sorry the API key is come from the,environment variable but the environment,variable is not set there's just an,environment sample which is showing how,to add your API key and this is where,hopefully by the time you watch this,video there won't be this add a readme,button and I will add this readme and I,will add all sorts of information and,instructions about how to work with this,and add your own API key itself maybe I,can actually even teleport into the,future and show you a little bit of what,it will look like and I also want to,consider adding maybe a licensing,information a contributing file a code,of conduct all the,things that I might put with a new open,source repository so I've shown you now,how to both hydro API keys as well as,publish your code in a git repository to,the github website itself so there's one,last piece that I want to show you,before I wrap up this series how to I,can't actually run the code off of,github although maybe that's something,that you'll be able to do in a future,time how can I put this code somewhere,on a server where that node server can,actually be executed and I have either,and I have a domain that's hosting this,website itself that other people can,access that's what I'll show you in the,next video see you there

Congratulation! You bave finally finished reading shopify how to store api keys as environment variables and believe you bave enougb understending shopify how to store api keys as environment variables

Come on and read the rest of the article!