3.4 Hiding API Keys with Environment Variables (dotenv) and Pushing Code to GitHub

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 ธ.ค. 2024

ความคิดเห็น • 228

  • @Warpgatez
    @Warpgatez 2 ปีที่แล้ว +5

    After years, I still come back to your videos. Doesn't matter which one. I just come back to them. They solve so many issues. When I first discovered you I wasn't working with JS at all. But enjoyed watching your videos. Now I am working with JS. So I am back

  • @janetrajkoski1424
    @janetrajkoski1424 3 ปีที่แล้ว +6

    As someone who just started learning to code and my first interview being: "The hell you doing your API key is public", this was a godsend video. Very to the point and clear explanation. Subscribed

  • @PROTOTYPZ
    @PROTOTYPZ 3 หลายเดือนก่อน

    Just found this guy's channel and he cooks, simple easy to understand instructions, great job to the creator! Always going to check your channel for any information I need before others.

  • @simonmafanye.3537
    @simonmafanye.3537 ปีที่แล้ว

    Watched your video for 5minutes and i have no choose but to hit the Subscribe button very fast.
    I love your style of teaching,

  • @CodeBUNNY
    @CodeBUNNY 2 หลายเดือนก่อน

    it's been years and i still love your content.

  • @aristotleanderson930
    @aristotleanderson930 4 ปีที่แล้ว +42

    This is a great tutorial! Thank you for being quick and to the point, as well as informative and helpful!

    • @gustavotomas5214
      @gustavotomas5214 3 ปีที่แล้ว

      You probably dont give a damn but does someone know a way to log back into an instagram account?
      I somehow forgot my account password. I love any help you can give me.

    • @casenace5722
      @casenace5722 3 ปีที่แล้ว

      @Gustavo Tomas Instablaster :)

    • @gustavotomas5214
      @gustavotomas5214 3 ปีที่แล้ว

      @Casen Ace thanks so much for your reply. I found the site thru google and Im waiting for the hacking stuff now.
      Seems to take a while so I will reply here later when my account password hopefully is recovered.

    • @gustavotomas5214
      @gustavotomas5214 3 ปีที่แล้ว

      @Casen Ace It did the trick and I finally got access to my account again. I am so happy!
      Thank you so much, you really help me out!

    • @casenace5722
      @casenace5722 3 ปีที่แล้ว

      @Gustavo Tomas no problem =)

  • @hj1916
    @hj1916 ปีที่แล้ว +3

    It was never boring! Actually, you made this serious topic so fun like magic. Also, I loved the ending credit of the train. Creative idea!!! Thank you so much!!!!

  • @zeyadahmedsamer3443
    @zeyadahmedsamer3443 2 ปีที่แล้ว +2

    no words can describe your awesome explanation

  • @honeybcomb
    @honeybcomb 4 ปีที่แล้ว +3

    I randomly came across this video and I can't go without thank you ! Your explanations are very clear and makes the course material simple to understand. Thank you very much ! I am so happy I fond your channel today :))

  • @aakash-codes
    @aakash-codes ปีที่แล้ว

    I just love the way you teach things! Doesn't even let me feel boring for a single sec! 😊🚀

  • @SaiKumar-vf9lz
    @SaiKumar-vf9lz 4 ปีที่แล้ว

    From hiding api keys to adding local source to GitHub ..well summarized things in 10 mins ..great video !

  • @MrGreg557
    @MrGreg557 2 ปีที่แล้ว

    What a great series man, I'm grateful everyone can use resources like this. Going from knowing almost 0 JS to deploying my app was very satisfying.
    One update though: if you get this error like me: "npm ERR! Missing script: "start"", add this to the end of your package.json file, before the finishing curly brace:
    ,"scripts": {
    "start": "node index.js"
    },

  • @moaazbhnas886
    @moaazbhnas886 4 ปีที่แล้ว +5

    I was searching for a video about env file and felt relief when I saw yours

  • @zwlw
    @zwlw 2 ปีที่แล้ว +3

    you're a legend dude this is a life saver

  • @arshamazami159
    @arshamazami159 4 ปีที่แล้ว

    The best video about environment variable and how to use them👍👍👍

  • @Rlc201
    @Rlc201 4 ปีที่แล้ว +2

    How i didn't know this channel? Awesome tutorial and one of the best teachers that i have ever seen on youtube. Keep up!

  • @smashing_data4292
    @smashing_data4292 10 หลายเดือนก่อน

    As someone who has done this before on my own projects I can say this is legit. Immediate subscribe.

  • @SnobbyLion
    @SnobbyLion ปีที่แล้ว

    You're so good at explaining things! Thank you!

  • @kareng9484
    @kareng9484 5 หลายเดือนก่อน

    Bro, thank you very much, this is exactly what I needed, you're so good at explaining things

  • @bandarabdullah40
    @bandarabdullah40 5 ปีที่แล้ว

    I was suffering to understand the environment variable and its benefits this video the best explanation I have ever seen.

  • @kingsley3194
    @kingsley3194 3 ปีที่แล้ว +1

    Thank you so much. You saved my day with this explanation

  • @Niehde
    @Niehde 5 ปีที่แล้ว +20

    Nice video! I've just recently pushed some API keys to Github. Fortunately they have a service that lets you know when you've screwed up.

  • @benSfft
    @benSfft 4 ปีที่แล้ว +6

    Thanks a lot ! That's clear and the objectives are so well explained ! I didn't even know that we could code on ecstasy !

  • @snehagangurde6266
    @snehagangurde6266 4 ปีที่แล้ว +1

    Thank you so much i have been searching one good video for days. finally got this one. this one is quick, understandable

  • @leerenae313
    @leerenae313 3 ปีที่แล้ว +1

    Hey, love your videos! they're so straight to the point Thank you for putting this out for free 🙏

  • @nofacee94
    @nofacee94 5 ปีที่แล้ว +6

    If your file is called index.js, you can just do `node .` or `node index`

  • @220syedrazamehdirizvi7
    @220syedrazamehdirizvi7 6 หลายเดือนก่อน

    U made it so fun to watch ....❤

  • @kenfeier5542
    @kenfeier5542 ปีที่แล้ว

    Great tutorial, but I do want to mention one thing. Environmental variables help you hide your sensitive information for version control purposes. If you build a public website and have environmental variables showing on client side, a user can open the debugger and hover over those variables and see the values of them. Make sure that you use these variables on back-end (server) side if you don't want anyone to see their values.

  • @tegaogheneovo5881
    @tegaogheneovo5881 3 ปีที่แล้ว

    So keep working on my project and when I want to deploy hide all my keys and db names thank you 😁

  • @bacanalienigena
    @bacanalienigena ปีที่แล้ว

    It works amazingly, thanks a million!

  • @skrillex15
    @skrillex15 3 ปีที่แล้ว

    Thanks for this playlist. Really helped

  • @pjguitar15
    @pjguitar15 3 ปีที่แล้ว +1

    You're a great teacher!!!

  • @nighknight9012
    @nighknight9012 4 ปีที่แล้ว

    if you are working on linux you may experience a problem when running the code, "undefined" gets returned, thats because you need to set the env variable yourself.
    go to bashrc and do export ENV_VARIABLE=VALUE no spaces around the equal and if the VALUE has spaces add quotes around it

  • @JanacMeena
    @JanacMeena 2 ปีที่แล้ว

    2:00 start
    5:30 Create a sample .env
    Make sure .gitignore has .env listed

  • @drhastings
    @drhastings 3 ปีที่แล้ว

    Simple and straight to the point thank you👏🏿

  • @dennisgonzales9521
    @dennisgonzales9521 3 ปีที่แล้ว

    Very engaging! thank you for the lesson.

  • @sweickel
    @sweickel 3 ปีที่แล้ว

    Thank you! This is exactly the video and explanation I needed!

  • @hargur4121
    @hargur4121 2 ปีที่แล้ว

    Thanks a lot! This has been a lifesaver

  • @santra528
    @santra528 3 ปีที่แล้ว +1

    Using dotenv package and store the API_KEY in .env file does not completely hide the API_KEY. It is fine for GitHub because someone visiting this repo they wont be able to see the API_KEY. But if the project is deployed in sever then anyone can see the API_KEY from the browser when they visit this particular website. The best way to hide the API_KEY is store it in the backend and make the API calls from the backend only. Only send the response data to the frontend. And to add more security you can set up CORS for the API_KEY so even if someone gets access to the API_KEY they wont be able to send request as the request will be rejected and only the request from the domains mention in the CORS will be able to make successful request using this API_KEY.

    • @incandescentbruh
      @incandescentbruh 3 ปีที่แล้ว

      No one is dumb enough to put the api key in frontend, also the example code in the video is using express js which is run by node js in backend.

  • @familyjuega12345
    @familyjuega12345 3 ปีที่แล้ว

    Awesome content and explanation, thanks man!

  • @lorisp186
    @lorisp186 ปีที่แล้ว

    Thank you man, I was exactly looking for that

  • @zensic
    @zensic 2 ปีที่แล้ว

    Thank you! Was just looking for this

  • @edwincaceresi.3284
    @edwincaceresi.3284 3 ปีที่แล้ว +1

    Thanks! It was very clear!

  • @ncpurge789
    @ncpurge789 4 ปีที่แล้ว

    THIS SAVED MY LIFE THANK YOU

  • @noco2605
    @noco2605 2 ปีที่แล้ว

    Thank you very much for your explanation 😊

  • @mohammedraqeeb4392
    @mohammedraqeeb4392 2 ปีที่แล้ว

    Great explanation

  • @appiahseth5319
    @appiahseth5319 4 ปีที่แล้ว

    Great presentation. Thank you very much

  • @ivankljun2542
    @ivankljun2542 4 ปีที่แล้ว

    Very nice, thank you, very educational and entertaining! :)

  • @nicetomeetugaming7024
    @nicetomeetugaming7024 2 ปีที่แล้ว

    Amazing video sir!

  • @zorro1rr
    @zorro1rr 4 ปีที่แล้ว +3

    I'm getting the api key returned in my terminal, but now my data is not being returned in the browser and getting console error: Uncaught ReferenceError: require is not defined. Help please

    • @TheCodingTrain
      @TheCodingTrain  4 ปีที่แล้ว

      Our Coding Train Discord is a great place to get help with coding questions ! discord.gg/hPuGy2g
      - The Coding Train Team

  • @santiagootero3580
    @santiagootero3580 8 หลายเดือนก่อน

    you are the goat, thanks so much

  • @oyetorostephen5010
    @oyetorostephen5010 5 ปีที่แล้ว +2

    THank you! I find this fun to learn

  • @davidchopin6583
    @davidchopin6583 4 ปีที่แล้ว

    So, so useful. Thanks!

  • @nicetomeetugaming7024
    @nicetomeetugaming7024 2 ปีที่แล้ว

    BTW you are amazing teacher!

  • @LimitlessGamingYoutubeChannel
    @LimitlessGamingYoutubeChannel 3 ปีที่แล้ว

    Super helpful video!

  • @abigiyatadesse2672
    @abigiyatadesse2672 2 ปีที่แล้ว

    Thanks so much this is helpful.

  • @sharadsharma3176
    @sharadsharma3176 5 ปีที่แล้ว

    eagerly waiting for the next video of this series....
    I want to know more about the available hosting services for node.

  • @DieHard88913
    @DieHard88913 4 ปีที่แล้ว

    Thank you! this helped me a lot, earned a new sub :D

  • @DigitalMonsters
    @DigitalMonsters 5 ปีที่แล้ว +8

    Whats the difference between using dotenv and just throwing them in another javascript file that you export from and then adding that file to the gitignore?
    I could watch the video and most likely get the answer to that question; but in the interest of being one of the earliest comments.... please understand.

    • @ridespirals
      @ridespirals 5 ปีที่แล้ว

      kind of the same thing, but environment variables are more common because you can configure them more easily on other host services like heroku, CI systems like Jenkins, you can change then on a command line, lots of other ways.

    • @BertMaurau
      @BertMaurau 5 ปีที่แล้ว

      Waiting for the actual answer, but like for me, my main reason for using .env files is because it's a "standard" and you can share that file between different languages for example. A single .env file can be read in NodeJS, PHP, Python,... (others?) without changing any syntax and let dotenv handle everything. My second reason would be the "environment" part. It's clear that it is environment-based and the scope for these variables is globally accessible (less an issue in NodeJS probably) within classes, methods, ..

    • @johncerpa3782
      @johncerpa3782 5 ปีที่แล้ว

      Ahh true that

    • @Loppy2345
      @Loppy2345 5 ปีที่แล้ว +1

      For the same reason you wouldn't take a helicopter to do your grocery shopping, it's not the right tool for the job.

  • @techmarinar
    @techmarinar 3 ปีที่แล้ว

    thanx man , this was helpful

  • @bluemagicuk
    @bluemagicuk 5 ปีที่แล้ว +1

    super helpful - thank you!

  • @RayfranRocha
    @RayfranRocha 4 ปีที่แล้ว +1

    Spectacular tutorial! Thank you. It's very clear. I wonder if using any browser inspector, can anyone see the API_KEY? Looking inside the code or in the Request to the API message?

  • @aham3687
    @aham3687 5 ปีที่แล้ว

    could continue this series with PWA. This has been popular with web technology in this modern day.

  • @sazaam
    @sazaam 4 ปีที่แล้ว

    Simply awesome

  • @Cam-lm6wo
    @Cam-lm6wo 3 ปีที่แล้ว +1

    incredible video, I spend like 1 year in a College trying to use GitHub as they told me without actually know what I was doing. thank you! Just a question... Can I add to the .env file a private key from firebase?

  • @akramsyed3628
    @akramsyed3628 2 ปีที่แล้ว

    i am first here and very impresed they way you teach , ke

  • @danieloliveira9815
    @danieloliveira9815 4 ปีที่แล้ว

    Typing those command line commands made me feel like a real programmer 😎 Thank you for this awesome playlist!

  • @ousmaneyadely
    @ousmaneyadely 5 ปีที่แล้ว

    Thanks a lot! I was totally stuck with a bug until I watched your video. So clarifying!

  • @dreznik
    @dreznik 5 ปีที่แล้ว +1

    sheefmahn brilliant series of videos. any videos where you interact with a Database-as-a-Service? SQL or not

  • @MuhammadRizky-ub3oy
    @MuhammadRizky-ub3oy 2 ปีที่แล้ว

    i love your energy

  • @akhilyadav7426
    @akhilyadav7426 5 ปีที่แล้ว +3

    Please publish the continued episode fastly sir waiting for it
    A subscriber from INDIA
    #Codingtrain

  • @ilearncode7365
    @ilearncode7365 2 ปีที่แล้ว

    From a “security/ privacy” standpoint, how is this any better than just having a js file with a variable for thr api key in it?

  • @Vincetroid
    @Vincetroid 4 ปีที่แล้ว

    You saved me, suscribed!

  • @xtree2817
    @xtree2817 2 ปีที่แล้ว

    I exactly landed where i wanted to be. I was just looking for this

  • @serdarinjo
    @serdarinjo 2 ปีที่แล้ว

    Muchas gracias bro 😀!

  • @coffeymay6775
    @coffeymay6775 4 ปีที่แล้ว +1

    It says require is not defined for me in the console. I followed the steps in terminal, have the lastest version of node etc.???

  • @gideonaswani2449
    @gideonaswani2449 2 ปีที่แล้ว

    Awesome, thanks

  • @devinschlegel1763
    @devinschlegel1763 5 ปีที่แล้ว +10

    his next coding challenge should be solving the heat equation based off of 3blue1brown's video on the same topic

    • @TheCodingTrain
      @TheCodingTrain  5 ปีที่แล้ว

      Please suggest here! github.com/CodingTrain/Rainbow-Topics/issues

  • @justingolden21
    @justingolden21 2 ปีที่แล้ว

    I prefer sample.env rather than .env_sample that way it still has the same file extension .env which means syntax highlighting and icons in code editor are the same, and also makes it slightly easier to rename.

  • @GabrielTobing
    @GabrielTobing 13 วันที่ผ่านมา

    Here after learning developers added the api key and people were able to view it in the git history commit before it was published XD

  • @adedimolao9094
    @adedimolao9094 4 ปีที่แล้ว +2

    can you use .env and gitignore in a vanilla js project?

  • @willuk7336
    @willuk7336 3 ปีที่แล้ว

    Thanks dad xx

  • @m_ko
    @m_ko 5 ปีที่แล้ว

    So nice thanks for this video

  • @justingolden21
    @justingolden21 2 ปีที่แล้ว

    install:
    npm install dotenv
    import:
    require('dotenv').config()
    use:
    process.env

  • @iakovryzhichka2832
    @iakovryzhichka2832 ปีที่แล้ว

    I suppose if you commit env file before .gitignore file(with line.env), you'll see your .env file in the repo anyway.
    To delete it from the history, write this in console:
    git rm -r --cached .env
    git filter-branch --index-filter "git rm -rf --cached --ignore-unmatch .env" HEAD
    git push --force

  • @TheRealDjinnet
    @TheRealDjinnet 5 ปีที่แล้ว

    for people who tried to find the GitHub project in the video, here is the link to the GitHub repository: github.com/CodingTrain/The-Weather-Here

  • @GopalChand
    @GopalChand ปีที่แล้ว

    Hi, how about if i am using Docker and dont want to publish my .env file in git. But my application is require env file. Can you pls help how to use .env file in Docker container or K8

  • @michaelamay9714
    @michaelamay9714 4 ปีที่แล้ว +1

    require('dotenv').config is a sever-side technology not a browser, hence, I am getting an error on my console. How are you not getting this error?

  • @catalinhora6489
    @catalinhora6489 3 ปีที่แล้ว

    i'm working with custom-env pretty similar, but I need to have two env files, for two environments, how should this be treated? How can i make it work?

  • @abhishektyagi4428
    @abhishektyagi4428 5 ปีที่แล้ว +1

    Sir Could you please make a video explaining the resources you use to learn or enhance your programming skills

  • @onmroman5391
    @onmroman5391 3 ปีที่แล้ว

    You helped me

  • @montazmeahii6029
    @montazmeahii6029 4 ปีที่แล้ว +2

    always sounds to me like you're saying "I'm going to post this in the video's subscription," but I'm sure you're saying "video's description".

  • @lochsandro
    @lochsandro 4 ปีที่แล้ว

    Nice video!!! How to use this environment variables in the CI(actions)?

  • @weixiangng8279
    @weixiangng8279 3 หลายเดือนก่อน

    If I were to deploy to vercel how can I retrieve the .env values?

  • @kritikshivanshu
    @kritikshivanshu 4 ปีที่แล้ว

    @TheCodingTrain Hi there! I am facing problem in order to upload .env file in my github repo. Since the application doesn't fetching information. What to do???Please help me.

  • @kwameagyenim-boateng2968
    @kwameagyenim-boateng2968 3 ปีที่แล้ว +1

    console.log(process.env) doesn't include my .env variable

  • @carlosduque8767
    @carlosduque8767 3 ปีที่แล้ว

    Why when you put the node_modules in the .gitignore file you put a / in front of it?

    • @dusanlukic6784
      @dusanlukic6784 2 ปีที่แล้ว

      because node modules is a folder and then git will ignore every file in that folder

  • @lilynn7777
    @lilynn7777 9 หลายเดือนก่อน

    Great Tutorial! Although i have a question and i hope some good soul will answer me.
    During my Bootcamp, we never got tought or warned to hide our API Keys. So now that i am about to apply for jobs, i have been overwhelmed with the fact that i need to hide my personal API key that i used for my projects (it's a free personal key from my bootcamp). So my question is: What should i do that i already committed and publicly pushed all of my projects and API keys on my github? Thankfully no one has access to it yet but i need to take action before sending applications or post my github to Linkedin. Any advice would be greatly appreciated 🙏🙏

  • @li-on1
    @li-on1 5 ปีที่แล้ว

    The dot means add everything of the current directory.
    Otherwise "--all" is required.

  • @Viralplace
    @Viralplace 3 ปีที่แล้ว

    but this works just for development on github... if I go in production like a jam stack project? it is not hidden right?