1 00:00:00,150 --> 00:00:00,490 Great. 2 00:00:00,720 --> 00:00:09,960 So our initial functionality works, we have Packy, we added to our URL course we constructed with 3 00:00:09,960 --> 00:00:16,050 the root and point as well as the photos, and as a result, we get back 10 images. 4 00:00:16,380 --> 00:00:22,730 The problem right now is that we are sharing our access key with the rest of the world. 5 00:00:23,130 --> 00:00:30,420 So eventually when you push your project up to get up, anyone who visits the repo can just grab the 6 00:00:30,420 --> 00:00:34,500 key and he or she can do whatever they please with the key. 7 00:00:34,770 --> 00:00:36,700 And that is not the best practice. 8 00:00:37,320 --> 00:00:44,200 It is much better to set up environment variables and then add that EMV file to the get ignored. 9 00:00:44,520 --> 00:00:51,860 So when we push this up to you to get a well, we can only see the name of the value. 10 00:00:52,170 --> 00:00:53,940 OK, so we don't see the actual. 11 00:00:54,450 --> 00:00:57,870 And this is exactly what we're going to do in this video. 12 00:00:58,230 --> 00:01:05,670 Now, environment variables or in variables, how they are also called are not specific to react or 13 00:01:05,670 --> 00:01:06,710 create react up. 14 00:01:07,020 --> 00:01:10,770 So the boilerplate that we're using to set up our apps. 15 00:01:11,430 --> 00:01:19,820 But there are some gotchas when it comes to using and setting up environment variables and create react 16 00:01:19,870 --> 00:01:21,030 app environment. 17 00:01:21,330 --> 00:01:25,870 And originally the environmental variables are coming from the node. 18 00:01:26,190 --> 00:01:33,110 Now, if you want to get more info, just navigate to your favorite search engine online. 19 00:01:33,120 --> 00:01:41,130 You can type C are A and then environmental variables and you should see some of the links on the first 20 00:01:41,130 --> 00:01:46,280 one probably will lead back to the docs and my noticiero. 21 00:01:46,290 --> 00:01:51,450 You can keep on scrolling and you'll get more info and I'll reference here and there. 22 00:01:51,630 --> 00:01:57,580 There's documents page as well, and we start by creating dot and we file. 23 00:01:57,600 --> 00:02:02,280 However, the location is extremely, extremely, extremely important. 24 00:02:02,670 --> 00:02:07,410 So you don't you don't put the DOT N.V. in the source. 25 00:02:08,070 --> 00:02:10,000 You have to put it in route. 26 00:02:10,350 --> 00:02:13,380 Now, when I talk about road, I'm not talking about our whole project. 27 00:02:14,010 --> 00:02:15,630 I'm talking about the up folder. 28 00:02:15,960 --> 00:02:22,050 Or, for example, if you're working in a final folder or if you would be working in a different project. 29 00:02:22,050 --> 00:02:23,650 And then we have final answer. 30 00:02:23,940 --> 00:02:28,190 So keep in mind that whenever you have a project, just place it in the road. 31 00:02:28,320 --> 00:02:35,040 And I guess the easiest way to remember is just place it side by side with git ignore or package Chazen. 32 00:02:35,370 --> 00:02:39,660 So in here I'll say new file and the name is also important. 33 00:02:39,990 --> 00:02:48,300 So we go at DOT and then N.V., so that just means that you won't be able to see it in traditional messed 34 00:02:48,300 --> 00:02:48,530 up. 35 00:02:48,780 --> 00:02:53,970 So essentially, if you take a look at the folder using the finder, you won't be able to see it, that's 36 00:02:53,970 --> 00:02:54,160 all. 37 00:02:54,360 --> 00:02:59,790 So we go with a dot in we and then we're setting up key value pairs. 38 00:03:00,090 --> 00:03:09,660 So we have a name of the variable and then the value now in create react up all your names must start 39 00:03:09,660 --> 00:03:12,360 with uppercase, react underscore. 40 00:03:13,080 --> 00:03:15,080 Now after that the name is up to you. 41 00:03:15,450 --> 00:03:19,350 You can call it bananas but the prefix E is important. 42 00:03:19,590 --> 00:03:21,240 Otherwise create react up. 43 00:03:21,420 --> 00:03:22,820 It's not going to be able to find. 44 00:03:23,170 --> 00:03:29,250 So just grab this prefix or you can type it out, copy and paste and then come up with your name. 45 00:03:29,490 --> 00:03:35,550 So I'm going to go with Axis and then underscore key and then of course we would need to provide the 46 00:03:35,550 --> 00:03:35,880 value. 47 00:03:36,300 --> 00:03:41,850 Now the key here is that we don't need to go with quotation marks or anything like that. 48 00:03:42,180 --> 00:03:43,890 We just grab our volume. 49 00:03:45,130 --> 00:03:52,690 Whatever it is, or access key and copy and paste online, once we have this one in place, of course 50 00:03:52,690 --> 00:03:56,710 we would want to access it so we would navigate to app Jeff's. 51 00:03:57,190 --> 00:04:03,580 And I noticed here I already set up the variable, but I'm going to do it one more time together just 52 00:04:03,580 --> 00:04:05,760 so we all are on the same page. 53 00:04:06,130 --> 00:04:09,340 So we go here with Consed and then some kind of name. 54 00:04:09,610 --> 00:04:15,430 So in my case I'm going to go with client and then uppercase, Heidi, and then I would want to construct 55 00:04:15,430 --> 00:04:15,580 it. 56 00:04:15,970 --> 00:04:18,870 I would want to construct my template strength. 57 00:04:19,300 --> 00:04:24,590 So again, the same thing we go with Questionmark and the URL of course stays exactly the same. 58 00:04:24,790 --> 00:04:32,590 So we go with client underscore ID and instead of copying pasting the value like we did previously. 59 00:04:32,890 --> 00:04:40,120 Now, of course, I would want to access that EMV variable and the way we access it, we go with process 60 00:04:40,120 --> 00:04:43,870 that ended up online or whatever is the name. 61 00:04:44,350 --> 00:04:50,830 So we go here with process process that EMV and then whatever is the name. 62 00:04:51,160 --> 00:04:59,320 So in my case, of course, it was react under scrap and then the access key access and now you want 63 00:04:59,320 --> 00:05:02,770 to avoid some unnecessary bugs. 64 00:05:03,160 --> 00:05:08,710 You can just copy paste, which is exactly what I'm going to do because typing is not my best friend. 65 00:05:09,070 --> 00:05:10,810 So I'll save it over here. 66 00:05:11,080 --> 00:05:16,740 And now, of course, where we have the client I need now I'll pass it my variable. 67 00:05:17,170 --> 00:05:24,880 Not one thing that I would like to mention, though, is that whenever you set up this DOT N.V., so 68 00:05:24,880 --> 00:05:30,010 the file for the environment variables, you must restart the server. 69 00:05:30,310 --> 00:05:31,420 So the def server. 70 00:05:31,900 --> 00:05:39,330 And the way we do that of course, is by going to the terminal and stopping the server we control, 71 00:05:39,340 --> 00:05:43,330 say, and then we go with NPM and then start. 72 00:05:43,750 --> 00:05:51,280 And of course where I have right now the API key, I will remove the sucker here and I'm just going 73 00:05:51,280 --> 00:05:56,680 to say that I would like to access the variable by the name of client Iot. 74 00:05:56,980 --> 00:05:58,420 By the way, I messed that up over here. 75 00:05:58,420 --> 00:06:03,380 It should be client, not with the server, with client tidy. 76 00:06:03,580 --> 00:06:11,710 And then where I have the Manyara course now I'm going to access my client ID and if everything is correct, 77 00:06:12,040 --> 00:06:15,160 we should still get back those damn images. 78 00:06:15,550 --> 00:06:18,280 So let me refresh Amaresh now. 79 00:06:18,280 --> 00:06:18,970 Everything works. 80 00:06:19,390 --> 00:06:21,460 And if you check it out, of course. 81 00:06:21,730 --> 00:06:25,150 Now when I'll push this up to the GitHub. 82 00:06:26,210 --> 00:06:34,520 No one will be able to see Mikey, they'll just a process that enemy and then react and then whatever 83 00:06:34,520 --> 00:06:35,300 is the name. 84 00:06:35,580 --> 00:06:42,110 And of course that is a better practice because then people cannot take your key and use it however 85 00:06:42,110 --> 00:06:42,920 they would like. 86 00:06:43,310 --> 00:06:49,850 Now, one last thing that I would like to mention is that when you set up dot e and we also make sure 87 00:06:49,850 --> 00:06:53,410 that in the get ignored, you have this included. 88 00:06:53,690 --> 00:07:00,830 So essentially get ignored is a file that just specifies which files will be ignored by the social control. 89 00:07:01,100 --> 00:07:08,000 And since you wouldn't want to push the Dot V to the get, that's why you would want to also include 90 00:07:08,000 --> 00:07:15,570 this file, because otherwise if you set up dot file and then if you pass in the value and you set up 91 00:07:15,590 --> 00:07:21,860 everything correctly in your code, if you want to add that file to get ignore, well, then it's pretty 92 00:07:21,860 --> 00:07:28,910 much useless because the person who was looking for the access key can simply go to Dot and V and check 93 00:07:28,910 --> 00:07:29,500 out the value. 94 00:07:29,840 --> 00:07:35,900 So the whole idea is to create this file and then right away add it to the get ignore, which, by the 95 00:07:35,900 --> 00:07:36,860 way, already did. 96 00:07:37,170 --> 00:07:39,410 I'm just telling you for your own project. 97 00:07:39,770 --> 00:07:45,680 And then of course, you would want to restart the server so you don't get some silly bugs. 98 00:07:45,980 --> 00:07:54,920 And then eventually, whenever you want to use it, you just go with process that energy and whatever 99 00:07:54,920 --> 00:07:55,580 is the name. 100 00:07:55,700 --> 00:07:59,230 And of course, you can have as many valorise as you would want over here. 101 00:07:59,510 --> 00:08:03,730 Just remember that you don't need to have quotation marks or nothing like that. 102 00:08:04,070 --> 00:08:10,610 And one last thing that I would want to mention, if you take a look at the final one, so the final 103 00:08:10,610 --> 00:08:18,850 folder in stock photos, you won't be able to run the project if you don't have the data entry. 104 00:08:19,280 --> 00:08:23,930 So if you want to compare your code, of course, you can go to the final folder. 105 00:08:24,260 --> 00:08:31,180 But if you want to run the final folder, then before you do anything, you need to create the dot and 106 00:08:31,280 --> 00:08:34,280 file line, set up your value. 107 00:08:34,730 --> 00:08:36,470 So you need to check. 108 00:08:36,470 --> 00:08:39,650 First of all, what is the name for my variable? 109 00:08:39,890 --> 00:08:45,140 And of course, you can see that in the address and notice how the name is exactly the same. 110 00:08:45,380 --> 00:08:50,480 So with react, underscore then underscore access, underscore key. 111 00:08:50,810 --> 00:08:57,230 That is the name that you must have in the dot, in file, in the final folder again. 112 00:08:57,670 --> 00:09:01,670 And you need to pass in your value for key. 113 00:09:02,060 --> 00:09:07,250 So I already set up the data entry, but you won't be able to see that because of course I did include 114 00:09:07,250 --> 00:09:09,500 in the Gettinger that's why. 115 00:09:09,500 --> 00:09:09,860 Yeah. 116 00:09:09,890 --> 00:09:17,050 On my machine of course you can see it but on your you want so create the react action scheme. 117 00:09:17,480 --> 00:09:18,440 That's the variable. 118 00:09:18,440 --> 00:09:25,690 And then pass in your value and then of course you go with traditional npm install and then npm start. 119 00:09:26,120 --> 00:09:33,410 Otherwise if you just try to run the project, the server will complain that hey listen, I cannot find 120 00:09:33,410 --> 00:09:35,210 this specific key. 121 00:09:35,720 --> 00:09:40,640 So that's the difference between different projects where of course previously you were able to run 122 00:09:40,790 --> 00:09:43,490 any of the projects by just installing dependencies. 123 00:09:43,850 --> 00:09:51,850 In this case, since we're using the API key in a project, of course, it's a bit different. 124 00:09:51,880 --> 00:09:58,670 Again, the whole setup is so we're not sharing this key with the rest of the world when we push our 125 00:09:58,670 --> 00:10:00,570 project up to the GitHub.