1 00:00:00,290 --> 00:00:00,560 All right. 2 00:00:00,560 --> 00:00:05,870 So now we're going to deploy our application to production and we're going to be using a service called 3 00:00:05,870 --> 00:00:07,750 render@render.com. 4 00:00:07,760 --> 00:00:15,770 Now, I used to use Heroku in most of my courses and tutorials with NodeJS, but Heroku got rid of their 5 00:00:15,770 --> 00:00:16,610 free plan. 6 00:00:16,610 --> 00:00:23,270 And I don't want you guys to have to sign up and enter credit card info and stuff like that to deploy 7 00:00:23,270 --> 00:00:24,020 this project. 8 00:00:24,020 --> 00:00:28,760 So Render has a really generous free plan and on top of that, it's a great service. 9 00:00:28,790 --> 00:00:32,600 It's absolutely simple to deploy. 10 00:00:32,630 --> 00:00:38,330 You basically just need to push your code to either GitHub or Bitbucket or GitLab, and then you can 11 00:00:38,330 --> 00:00:44,300 just simply log in with that and you can just select the repository that you want to deploy. 12 00:00:44,300 --> 00:00:49,490 And then if you have any environment variables which we do, you have to add those to the server as 13 00:00:49,490 --> 00:00:50,210 well. 14 00:00:50,630 --> 00:00:58,400 But everything is done on the server, the NPM run build, so we don't even have to do it ourselves 15 00:00:58,400 --> 00:01:05,250 and we don't even need this build folder here in the front end because that will happen once we deploy 16 00:01:05,250 --> 00:01:11,340 and it will be set up so that when you push to GitHub again to that same branch, it'll automatically 17 00:01:11,340 --> 00:01:12,480 deploy your changes. 18 00:01:12,480 --> 00:01:18,270 So really, really great service, really great workflow and they're not sponsoring me or anything like 19 00:01:18,270 --> 00:01:18,900 that. 20 00:01:18,900 --> 00:01:24,720 So let's go ahead and just you can log in with GitHub, which is what I did here. 21 00:01:24,720 --> 00:01:31,590 And if we go to New actually before I do that, I just want to mention you do have to push your code 22 00:01:31,590 --> 00:01:32,190 to GitHub. 23 00:01:32,190 --> 00:01:38,040 You can also use GitLab, I believe in Bitbucket, but as you can see, I have my my code here. 24 00:01:38,070 --> 00:01:39,330 This is the repository. 25 00:01:39,330 --> 00:01:43,740 I have it private right now, but I will set it to public before I release the course. 26 00:01:43,740 --> 00:01:46,620 So we have that pushed to GitHub. 27 00:01:46,620 --> 00:01:50,490 Now I'm going to click new and what you want to choose here is web service. 28 00:01:50,520 --> 00:01:54,390 If you if you have any kind of back end, you're going to choose Web service. 29 00:01:54,390 --> 00:01:57,630 It's not it's not like a static website or anything like that. 30 00:01:57,630 --> 00:02:00,600 Now, from here, we're going to choose the repository. 31 00:02:00,600 --> 00:02:03,270 We want, which for me is this pro Shop V two. 32 00:02:03,270 --> 00:02:09,870 So I'm going to click Connect and I'll give it a name, I'll just call it pro shop and the branch is 33 00:02:09,870 --> 00:02:12,570 going to be the main branch root directory. 34 00:02:12,570 --> 00:02:14,070 We don't have to put anything in that. 35 00:02:14,070 --> 00:02:19,860 The runtime is Node, but as you can see, you can upload all types of applications here. 36 00:02:19,890 --> 00:02:21,690 The build command, this is important. 37 00:02:21,690 --> 00:02:27,810 We want that to be NPM run build, okay, that will run in our in the root. 38 00:02:27,810 --> 00:02:33,960 So it's going to install all of our dependencies for the front end and back end and it will run npm 39 00:02:33,960 --> 00:02:41,100 run, build in the front end to create our build folder which which has our entire react application 40 00:02:41,100 --> 00:02:41,580 in it. 41 00:02:41,610 --> 00:02:46,260 Now the Start command, we're going to want to change this because remember our server.js is in the 42 00:02:46,260 --> 00:02:54,540 back end folder, so we want to change that to back end slash server.js or you know what, we can just 43 00:02:54,540 --> 00:02:58,080 do NPM start because that does the same thing. 44 00:02:58,080 --> 00:03:04,290 If I go to our Package.json you can see Start is going to run that same thing. 45 00:03:04,470 --> 00:03:05,850 So that should do it. 46 00:03:05,850 --> 00:03:11,280 And then I'm going to just select the free tier and we shouldn't need anything. 47 00:03:11,280 --> 00:03:11,910 Well, we. 48 00:03:12,270 --> 00:03:16,740 We can add our environment variables here, actually. 49 00:03:16,740 --> 00:03:19,410 Let's do that so we don't have to go back in and do it. 50 00:03:19,410 --> 00:03:25,770 So everything, not everything, but some of the stuff that's in our dot env we need to add. 51 00:03:25,800 --> 00:03:28,830 We don't need to add the node environment or the port. 52 00:03:29,430 --> 00:03:34,410 We do want obviously the mongo Uri, so let's grab that. 53 00:03:35,060 --> 00:03:36,140 Use your own. 54 00:03:36,170 --> 00:03:37,400 Of course not mine. 55 00:03:37,400 --> 00:03:45,050 And let's call this Mongo, underscore Uri, and then we're going to paste the value in. 56 00:03:45,780 --> 00:03:46,320 Okay. 57 00:03:46,320 --> 00:03:48,040 And then we'll add another one. 58 00:03:48,060 --> 00:03:55,260 Let's add our JWT underscore secret, and I'm just going to have that as ABC. 59 00:03:55,290 --> 00:03:56,580 One, two, three. 60 00:03:57,950 --> 00:03:58,690 And then. 61 00:03:58,700 --> 00:04:00,170 And this can be anything. 62 00:04:00,350 --> 00:04:03,710 And then we're going to need our pay, pal. 63 00:04:04,460 --> 00:04:07,760 Underscore client underscore ID. 64 00:04:08,960 --> 00:04:11,000 And I'm going to grab that. 65 00:04:12,650 --> 00:04:15,020 And I'm going to change all this stuff after. 66 00:04:16,720 --> 00:04:19,420 And then I believe that's all the pagination limit. 67 00:04:19,450 --> 00:04:20,769 We want to do that as well. 68 00:04:20,769 --> 00:04:21,579 So. 69 00:04:22,630 --> 00:04:24,130 Uh, let's add that. 70 00:04:24,990 --> 00:04:26,130 And I'm going to do eight. 71 00:04:26,130 --> 00:04:31,170 But however many products you want to show on a page, you can you can choose what you want. 72 00:04:31,170 --> 00:04:33,570 So I believe that that should do it. 73 00:04:33,570 --> 00:04:38,670 So now we can come down here and let's see anything else. 74 00:04:39,580 --> 00:04:42,010 If you don't want it to automatically deploy. 75 00:04:42,010 --> 00:04:46,510 When you push to your repository, you can choose no here, but I'm going to keep that at Yes. 76 00:04:47,250 --> 00:04:48,450 And that should do it. 77 00:04:48,450 --> 00:04:50,250 Let's create web service. 78 00:04:51,220 --> 00:04:54,010 And then this is probably going to take a couple of minutes. 79 00:04:55,770 --> 00:04:59,460 But you'll see here that it will run our build script. 80 00:05:01,070 --> 00:05:02,600 At some point I'm probably yeah. 81 00:05:02,600 --> 00:05:03,020 Right here. 82 00:05:03,020 --> 00:05:11,030 So npm install in our root and npm install in the front end and npm run build in the front end. 83 00:05:12,070 --> 00:05:12,310 All right. 84 00:05:12,310 --> 00:05:15,820 So I'm going to pause the video because this is probably going to take a minute or two and I'll be back 85 00:05:15,820 --> 00:05:16,750 when it's done. 86 00:05:17,590 --> 00:05:18,010 Okay. 87 00:05:18,010 --> 00:05:19,120 So it finished. 88 00:05:19,120 --> 00:05:20,950 It looks like MongoDB is connected. 89 00:05:20,950 --> 00:05:22,780 So now we have the moment of truth. 90 00:05:22,780 --> 00:05:25,120 Let's go ahead and open this link right here. 91 00:05:27,080 --> 00:05:28,850 Okay, so it looks like it's working. 92 00:05:28,850 --> 00:05:35,180 Now, the reason we had two spinners is because we have a loader in the carousel and for the products. 93 00:05:35,180 --> 00:05:40,400 So if you don't want to show both, then you can just get rid of the loader in the carousel, which 94 00:05:40,400 --> 00:05:41,920 I'm probably going to do. 95 00:05:41,930 --> 00:05:47,000 So if we go to a single page that shows up, if we go. 96 00:05:47,390 --> 00:05:48,890 Let's see, add to Cart. 97 00:05:49,040 --> 00:05:50,750 So now we have our cart. 98 00:05:50,780 --> 00:05:54,170 Let's try to log in and remember we're using the same database. 99 00:05:54,170 --> 00:05:57,500 So all the same orders, all the same users are going to work. 100 00:05:57,500 --> 00:06:00,380 So if I log in as John at Gmail. 101 00:06:03,440 --> 00:06:03,710 Oops. 102 00:06:08,940 --> 00:06:12,270 All right, so now I'm logged in and I can go to my profile. 103 00:06:12,390 --> 00:06:16,830 So I have a couple orders here and we can go to the order page. 104 00:06:17,160 --> 00:06:19,410 So this hasn't been paid yet. 105 00:06:20,640 --> 00:06:24,390 So let's try to let's try to do that. 106 00:06:24,390 --> 00:06:27,540 So I'm going to actually go to the the PayPal. 107 00:06:28,760 --> 00:06:30,290 Developer dashboard. 108 00:06:30,290 --> 00:06:34,980 And as soon as you're ready to go live, just switch this from sandbox to live. 109 00:06:35,000 --> 00:06:36,800 But I want to. 110 00:06:38,000 --> 00:06:38,900 Let's see. 111 00:06:38,930 --> 00:06:39,830 Testing tools. 112 00:06:39,830 --> 00:06:40,970 Sandbox account. 113 00:06:40,970 --> 00:06:44,480 I want to use one of my fake accounts here. 114 00:06:46,380 --> 00:06:49,280 So we'll pay with this one here. 115 00:06:49,290 --> 00:06:50,160 So let's. 116 00:06:50,940 --> 00:06:52,770 View edit account. 117 00:06:54,000 --> 00:06:56,280 Okay, so I'm going to copy the email. 118 00:06:58,100 --> 00:07:01,160 And let's go ahead and try to pay for this order. 119 00:07:03,900 --> 00:07:06,030 And you can see it says Sandbox in here. 120 00:07:06,030 --> 00:07:12,030 So we're not dealing with real accounts, real money, and then the password is going to be this. 121 00:07:16,760 --> 00:07:17,600 Log in. 122 00:07:20,850 --> 00:07:23,130 Okay, we're going to complete our purchase. 123 00:07:25,160 --> 00:07:25,930 And there we go. 124 00:07:25,940 --> 00:07:26,840 Order is paid. 125 00:07:26,840 --> 00:07:28,310 This gets set to paid. 126 00:07:29,670 --> 00:07:30,240 Cool. 127 00:07:31,350 --> 00:07:34,190 Now let's look at admin functionality. 128 00:07:34,200 --> 00:07:41,010 So I'm going to log out and then we're going to log in as admin at email. 129 00:07:42,180 --> 00:07:45,450 And one, two, three, four, five, six. 130 00:07:48,040 --> 00:07:53,860 Okay, so now I'm logged in as admin and I'm going to go to, let's see products so we can see all of 131 00:07:53,860 --> 00:07:55,030 our products. 132 00:07:55,670 --> 00:07:57,380 Let's go to orders. 133 00:07:58,100 --> 00:08:04,130 And let's see the order that we just made or that John just made, which was. 134 00:08:05,100 --> 00:08:06,360 This one. 135 00:08:06,540 --> 00:08:11,850 If we go to details now, we should be able to mark that as delivered as an admin. 136 00:08:13,550 --> 00:08:14,630 And there we go. 137 00:08:15,080 --> 00:08:18,710 So, yeah, we can mark orders as delivered. 138 00:08:20,070 --> 00:08:22,620 What else we can. 139 00:08:23,780 --> 00:08:24,410 Update. 140 00:08:24,650 --> 00:08:27,680 Let's say we want to change this price to 299. 141 00:08:27,770 --> 00:08:28,700 Update. 142 00:08:29,830 --> 00:08:31,170 Okay, That gets changed. 143 00:08:31,180 --> 00:08:31,690 Good. 144 00:08:33,090 --> 00:08:34,200 Search. 145 00:08:34,350 --> 00:08:35,549 Search for phone. 146 00:08:39,360 --> 00:08:40,350 Or phone. 147 00:08:43,020 --> 00:08:44,550 Yeah, that works. 148 00:08:45,990 --> 00:08:51,990 So everything looks to be the exact same as it is in development, which is what we want. 149 00:08:52,650 --> 00:08:53,040 All right. 150 00:08:53,040 --> 00:08:54,300 So that's that's it, guys. 151 00:08:54,300 --> 00:09:00,810 We now have a full, full featured shopping cart e-commerce platform, whatever you want to call it. 152 00:09:00,810 --> 00:09:04,920 And, you know, you're free to to use this as you see fit. 153 00:09:04,950 --> 00:09:09,210 You free to add on to it, make it better, add more features. 154 00:09:09,660 --> 00:09:13,890 Oh, I wanted to try the comments or the reviews. 155 00:09:13,890 --> 00:09:19,770 So let's say excellent, great submit. 156 00:09:20,890 --> 00:09:21,940 And there we go. 157 00:09:22,930 --> 00:09:27,760 I mean, ideally, you know, admins probably shouldn't be reviewing, but it's fine. 158 00:09:28,760 --> 00:09:29,360 Cool. 159 00:09:29,360 --> 00:09:34,220 So now we have this deployed at this domain. 160 00:09:34,820 --> 00:09:38,750 But obviously you're going to you're not going to want to use an on render domain. 161 00:09:38,750 --> 00:09:44,510 You're going to want to use something like whatever pro shop.com, which I'm sure has taken. 162 00:09:44,510 --> 00:09:50,450 But in the next video, I'm going to show you how we can add a domain to our project. 163 00:09:50,690 --> 00:09:55,520 And I'm using Namecheap, although you could use any, any domain provider that you want. 164 00:09:55,520 --> 00:09:57,110 But let's let's do that next.