1 00:00:00,020 --> 00:00:01,609 All right, So everything's awesome. 2 00:00:01,609 --> 00:00:05,390 We installed malter, we set up the configuration. 3 00:00:05,390 --> 00:00:11,060 Now we're able to access the file and we actually nicely have a path. 4 00:00:11,150 --> 00:00:12,500 Now, where's the problem? 5 00:00:12,500 --> 00:00:14,180 Well, you see, even though. 6 00:00:14,180 --> 00:00:21,980 Yes, technically we could provide this string over here to the front end and we'll be able to access 7 00:00:21,980 --> 00:00:22,820 the image. 8 00:00:22,850 --> 00:00:26,320 The problem is going to be when we deploy this project. 9 00:00:26,330 --> 00:00:34,220 So essentially platforms like Render and Heroku, they don't keep those images around if you're familiar 10 00:00:34,220 --> 00:00:38,900 with those platforms, if the application is not used, it goes to sleep. 11 00:00:39,110 --> 00:00:44,750 And essentially once it starts up, this image is no longer there. 12 00:00:44,750 --> 00:00:47,720 So, yes, everything is going to work nicely locally. 13 00:00:48,240 --> 00:00:54,420 But once you push this up to production, the moment your application is going to go to sleep, this 14 00:00:54,420 --> 00:00:56,070 image is going to disappear. 15 00:00:56,190 --> 00:01:02,230 So long story short, we're not going to use the straight up path approach. 16 00:01:02,250 --> 00:01:10,260 Instead, we're going to push our image up to a cloudinary, which essentially is a platform where we 17 00:01:10,290 --> 00:01:13,220 can store, optimize and deliver images. 18 00:01:13,230 --> 00:01:16,280 And once we push it up, we'll get back the URL. 19 00:01:16,290 --> 00:01:22,170 And now the image is going to be stored in a cloudinary So it's always going to be there and we'll just 20 00:01:22,170 --> 00:01:26,980 utilize that URL on the front end as a result. 21 00:01:27,000 --> 00:01:33,420 Essentially, the image is not going to disappear and of course in order to push it up as well as delete 22 00:01:33,420 --> 00:01:36,480 the old image, we'll use the Cloudinary package. 23 00:01:36,510 --> 00:01:41,760 Now, in order to set everything up, yes, we'll have to create another account. 24 00:01:41,850 --> 00:01:48,610 Again, you can do the local approach, but I can tell you right away that the moment you push this 25 00:01:48,610 --> 00:01:52,630 up to production, the image is not going to be persisted. 26 00:01:52,630 --> 00:01:57,100 So pretty much every time your application is going to go to sleep, all of the images are going to 27 00:01:57,100 --> 00:01:58,100 be wiped out. 28 00:01:58,120 --> 00:02:00,380 That's just how those platforms work. 29 00:02:00,400 --> 00:02:04,920 So for starters, we want to navigate over here cloudinary.com. 30 00:02:04,930 --> 00:02:06,160 It's a free account. 31 00:02:06,160 --> 00:02:10,690 So again, we don't need to use the credit card or anything like that. 32 00:02:10,720 --> 00:02:13,500 We want to go for sign up free. 33 00:02:13,540 --> 00:02:17,150 I'm going to go with email then just provide the values. 34 00:02:17,170 --> 00:02:18,940 Click on I'm Not a robot. 35 00:02:18,970 --> 00:02:20,710 Then get started now. 36 00:02:21,780 --> 00:02:25,350 They will ask you to verify your email, so do that. 37 00:02:25,620 --> 00:02:28,350 It might be located in the spam folder. 38 00:02:28,740 --> 00:02:31,050 So click on this link over here. 39 00:02:31,470 --> 00:02:35,490 And once you successfully log in, this is going to be your dashboard. 40 00:02:35,520 --> 00:02:40,100 Now they actually right away provide all of the values that we're looking for. 41 00:02:40,110 --> 00:02:43,800 But I'll also show you another way how we can access them. 42 00:02:43,800 --> 00:02:47,850 So essentially, if we go here with settings. 43 00:02:49,190 --> 00:02:52,850 And then more specifically, we're looking for access keys. 44 00:02:53,300 --> 00:02:55,010 We'll see this value over here. 45 00:02:55,250 --> 00:02:56,880 So this is the API key. 46 00:02:56,900 --> 00:02:58,270 This is the secret. 47 00:02:58,280 --> 00:03:01,380 And also this will be our cloud name. 48 00:03:01,400 --> 00:03:04,200 So those are the three things that we're looking for. 49 00:03:04,220 --> 00:03:07,730 And actually, in my case, I'm just going to showcase how we can generate a new one. 50 00:03:07,760 --> 00:03:10,370 So in here again, we need to provide the password. 51 00:03:11,600 --> 00:03:18,110 And I'm going to call this main course and this is going to be my API key and API secret. 52 00:03:18,380 --> 00:03:19,160 A quick side note. 53 00:03:19,190 --> 00:03:23,210 We can also access all of the values we're going to use in a second. 54 00:03:23,240 --> 00:03:29,120 If we click on the dashboard link, then we want to navigate back to our application more specifically 55 00:03:29,150 --> 00:03:29,900 Dotenv. 56 00:03:30,140 --> 00:03:34,000 And we want to set up these three environment variables. 57 00:03:34,010 --> 00:03:38,870 So right after the JWT ones, we want to create these ones. 58 00:03:38,870 --> 00:03:43,490 And essentially, of course you want to grab the values and like I said, the name is going to be this 59 00:03:43,490 --> 00:03:45,470 one, so let me copy. 60 00:03:46,210 --> 00:03:49,120 Well, set it up over here then. 61 00:03:49,120 --> 00:03:50,890 I want to go with API key. 62 00:03:51,830 --> 00:03:54,590 And then we want to copy the secret as well. 63 00:03:54,740 --> 00:03:56,210 So let me set it up. 64 00:03:56,210 --> 00:04:01,940 And then once we have all of these three values, we want to install the Cloudinary package. 65 00:04:01,940 --> 00:04:06,230 And then in the server I want to go with Cloudinary from Cloudinary. 66 00:04:06,440 --> 00:04:14,090 As I know this is not what we need to do, we just want to go with cloudinary dot config and then pass 67 00:04:14,090 --> 00:04:15,800 in all of these values. 68 00:04:15,950 --> 00:04:20,329 And you know, in order to speed this up, let me just copy. 69 00:04:20,360 --> 00:04:22,940 So again, package is already installed. 70 00:04:22,970 --> 00:04:28,160 We just want to navigate to the server and set it up somewhere here. 71 00:04:28,160 --> 00:04:32,630 So in my case I think I'm going to just import. 72 00:04:33,850 --> 00:04:34,630 Here. 73 00:04:34,630 --> 00:04:36,730 So cloudinary from Cloudinary. 74 00:04:36,820 --> 00:04:44,150 And then let me go to the Dirname and everything and then I'll set it up over here, the config. 75 00:04:44,180 --> 00:04:50,890 So essentially we need to provide the object cloud name API key and API secret. 76 00:04:50,890 --> 00:04:57,070 And if you don't see any errors in the console, we're good to go and we can proceed to the next step.