1 00:00:00,440 --> 00:00:06,360 Okay, so now that we have built our application, we would like to deploy this for free right. 2 00:00:06,400 --> 00:00:10,360 And for this we're going to be using a platform called Render Comm. 3 00:00:10,640 --> 00:00:12,400 Go ahead and create an account. 4 00:00:12,440 --> 00:00:15,000 Then you will be in the maybe dashboard. 5 00:00:15,080 --> 00:00:19,640 So if you clicked it you'll be able to go ahead and see your past projects. 6 00:00:19,640 --> 00:00:22,760 So this is the demo application that I have deployed. 7 00:00:22,760 --> 00:00:23,880 But just ignore this. 8 00:00:23,880 --> 00:00:26,360 Probably you're not going to have anything here. 9 00:00:26,400 --> 00:00:29,960 We'll just go ahead and create a new web service. 10 00:00:29,960 --> 00:00:32,120 But more on this later in the video. 11 00:00:32,440 --> 00:00:34,600 First, let's take a look at the terminal. 12 00:00:34,920 --> 00:00:37,400 So when we run the app.py file. 13 00:00:37,400 --> 00:00:42,960 So if we just go very above we can see here it says this is a development server. 14 00:00:43,120 --> 00:00:45,640 Do not use it in a production deployment. 15 00:00:45,680 --> 00:00:49,440 Use a production VC server instead. 16 00:00:49,600 --> 00:00:50,600 So what does that mean. 17 00:00:50,640 --> 00:00:58,480 So that means basically you need a VC dot pi for the deployment, uh, to make the deployment happen. 18 00:00:58,480 --> 00:00:58,960 Really. 19 00:00:59,240 --> 00:01:03,880 And in this file we'll take to just run our app dot pi file. 20 00:01:04,000 --> 00:01:12,700 So we'll go ahead and just from, let's say from app import app and Socket.io. 21 00:01:12,740 --> 00:01:13,220 Okay. 22 00:01:13,260 --> 00:01:20,020 So since we have these variables we can go ahead, grab it from the app Dot Pi and just their names. 23 00:01:20,180 --> 00:01:23,900 And we'll just run this uh, file basically. 24 00:01:24,060 --> 00:01:29,780 So we'll say if name and just make sure you put double underscores if it is equal to main. 25 00:01:29,780 --> 00:01:35,180 In this case we would like to, uh, initialize Socket.io and run our application. 26 00:01:35,180 --> 00:01:40,660 And since this is in the production, we don't really need to get this, uh, debugging logs right. 27 00:01:40,700 --> 00:01:45,220 When you put debug to be equal to true, you get all these, but if you don't put, you're not going 28 00:01:45,220 --> 00:01:48,980 to get anything, uh, which is fine for the production. 29 00:01:49,300 --> 00:01:49,660 Okay. 30 00:01:49,660 --> 00:01:52,340 So this is the first file that we would need. 31 00:01:52,460 --> 00:01:57,460 And we also need, uh, I think two different, um, like, packages. 32 00:01:57,500 --> 00:01:58,420 Let's go ahead. 33 00:01:58,460 --> 00:02:06,940 Kill this with Ctrl C, and we will say pip install, uh, unicorn which stands for Green Unicorn. 34 00:02:06,940 --> 00:02:08,700 And we're going to see what that means. 35 00:02:08,740 --> 00:02:11,330 And we also want to get the event. 36 00:02:11,370 --> 00:02:13,610 Let let's install these packages. 37 00:02:15,210 --> 00:02:20,250 And here I can maybe put a comment so that you can really see it in the source code. 38 00:02:20,570 --> 00:02:28,850 So green Unicorn and Vsti which stands for Web Server Gateway Interface, are both components used to 39 00:02:28,850 --> 00:02:35,130 deploy your Python web applications and specifically in Flask or Django applications. 40 00:02:35,130 --> 00:02:38,130 And since we are using flask, uh, we're using them. 41 00:02:38,130 --> 00:02:38,570 Right. 42 00:02:38,810 --> 00:02:43,090 So this is going to be needed in the render.com when we try to deploy it. 43 00:02:43,530 --> 00:02:47,890 So the other thing we need is to get the requirements file. 44 00:02:47,890 --> 00:02:53,970 So let's see uh how it's going to look like first I'll just say CLS to clear up my console. 45 00:02:53,970 --> 00:02:56,530 And I will say pip freeze. 46 00:02:56,930 --> 00:03:08,250 And I'll say like greater than uh Rico mints dot txt I think I have a typo here, let's say requirements. 47 00:03:08,610 --> 00:03:10,970 Okay, so I just had a typo, I fixed it. 48 00:03:10,970 --> 00:03:15,680 And if you are on macOS or Linux this is going to be Pip three, right. 49 00:03:15,960 --> 00:03:17,000 But I'm on windows. 50 00:03:17,000 --> 00:03:18,120 That's what I'll be doing. 51 00:03:18,360 --> 00:03:21,920 So once you run this it's going to create the requirements file. 52 00:03:21,920 --> 00:03:26,480 And it's going to show you which packages you're using in this project. 53 00:03:26,480 --> 00:03:28,760 And we're going to need this when we deploy it. 54 00:03:28,800 --> 00:03:36,080 Because the render need needs to install all these packages to be able to run this virtual environment, 55 00:03:36,080 --> 00:03:38,840 right, so that it can run the application. 56 00:03:39,200 --> 00:03:41,040 So I think with this that's going to be it. 57 00:03:41,080 --> 00:03:49,720 We can deactivate it now and we're going to go ahead and create a git ignore git ignore file so that 58 00:03:49,720 --> 00:03:55,760 we don't really push our uh, virtual environment files into the GitHub, which is not really needed. 59 00:03:55,800 --> 00:03:58,600 So I'll just, uh, copy this and paste it. 60 00:03:58,600 --> 00:04:04,720 You can get it from the GitHub repo from this file where we just, uh, ignore the virtual environment, 61 00:04:04,760 --> 00:04:07,720 ID files, environment variables, things like that. 62 00:04:07,720 --> 00:04:08,160 Okay. 63 00:04:08,840 --> 00:04:10,880 Once you save this we're going to go ahead. 64 00:04:10,920 --> 00:04:19,340 Just say git init and let's say git commit m Initial commit. 65 00:04:21,500 --> 00:04:21,900 Okay. 66 00:04:21,940 --> 00:04:24,380 Obviously we first need to add all of them right. 67 00:04:24,460 --> 00:04:25,820 Git add all. 68 00:04:25,860 --> 00:04:28,660 And let me just grab this so that you can see it. 69 00:04:28,700 --> 00:04:29,140 Okay. 70 00:04:29,500 --> 00:04:31,060 Git commit m. 71 00:04:31,100 --> 00:04:32,780 Now we can say initial commit. 72 00:04:33,940 --> 00:04:34,220 Okay. 73 00:04:34,260 --> 00:04:37,780 Now we'd like to deploy this uh to the GitHub. 74 00:04:37,780 --> 00:04:39,860 So I'll go ahead and create a GitHub repo. 75 00:04:39,900 --> 00:04:40,220 Okay. 76 00:04:40,220 --> 00:04:41,940 So I'll just go ahead and give it a name. 77 00:04:41,940 --> 00:04:43,900 Let's say Python chat. 78 00:04:44,180 --> 00:04:45,540 I will make this private. 79 00:04:45,540 --> 00:04:48,740 But while you're watching this video it's going to be public for now. 80 00:04:48,740 --> 00:04:50,060 I'll just go with private. 81 00:04:50,060 --> 00:04:54,020 And if you are following following along you can go with the public option. 82 00:04:54,180 --> 00:04:54,420 Okay. 83 00:04:54,420 --> 00:04:55,980 Let's say create the repo. 84 00:04:56,180 --> 00:05:01,020 We're going to go ahead grab this thing and just paste it into our terminal. 85 00:05:01,660 --> 00:05:06,260 So that is going to go ahead push this code to the GitHub. 86 00:05:07,860 --> 00:05:08,220 Okay. 87 00:05:08,260 --> 00:05:11,820 Now that we got our files right it is working as expected. 88 00:05:11,860 --> 00:05:16,780 We can go into the render dashboard I'll say create new web service. 89 00:05:16,780 --> 00:05:19,500 And we will pull this GitHub repo right. 90 00:05:19,540 --> 00:05:21,620 Which is this one that I have just created. 91 00:05:22,080 --> 00:05:22,960 Python chat. 92 00:05:23,000 --> 00:05:29,160 Let's say connect and we need to have the build command as well as the start command. 93 00:05:29,400 --> 00:05:32,640 Now basically it's going to first run this command. 94 00:05:32,680 --> 00:05:33,720 Let me just zoom in. 95 00:05:34,200 --> 00:05:41,920 It will say hey just take a look at the requirements.txt file and install all these packages into the 96 00:05:41,960 --> 00:05:43,080 render server. 97 00:05:43,120 --> 00:05:43,480 Right. 98 00:05:43,520 --> 00:05:46,120 So that it can run our application. 99 00:05:46,120 --> 00:05:48,920 So it would go ahead install the Socket.io flask. 100 00:05:49,280 --> 00:05:53,520 Uh, green unicorn greenlet like all these packages that we need. 101 00:05:53,760 --> 00:06:00,600 And then for the start command, we need to run a command so that we can run this that is compatible 102 00:06:00,600 --> 00:06:01,960 with the scikit I o. 103 00:06:02,120 --> 00:06:06,520 So instead of leaving this as default we will say green unicorn. 104 00:06:06,520 --> 00:06:12,920 Just put one space dash dash worker class and we'll say event let. 105 00:06:12,920 --> 00:06:19,960 So this is why we installed that package dash w one vs gi and app. 106 00:06:20,040 --> 00:06:25,360 So we call this as vs GI is because this is what we call the file name right. 107 00:06:26,510 --> 00:06:27,590 now we're going to go ahead. 108 00:06:27,590 --> 00:06:32,470 Select the free plan which is completely fine for the side projects. 109 00:06:32,470 --> 00:06:37,350 It just goes inactive when you don't really visit it more than 15 minutes. 110 00:06:37,350 --> 00:06:44,190 And when you visit that it's going to take about maybe 30s to one minute, then it's going to, uh, 111 00:06:44,310 --> 00:06:45,030 connect to it. 112 00:06:45,030 --> 00:06:45,550 Okay. 113 00:06:45,590 --> 00:06:48,070 Let's just say deploy this web service. 114 00:06:48,270 --> 00:06:52,670 Hopefully it should be live without any issues. 115 00:06:53,550 --> 00:06:55,550 So this is going to take a little bit of time. 116 00:06:55,550 --> 00:06:57,270 We got a URL right. 117 00:06:57,470 --> 00:06:59,910 So once this is live I'll just be right back. 118 00:07:00,350 --> 00:07:02,910 So here I just got a new notification here. 119 00:07:02,910 --> 00:07:04,310 It says in progress. 120 00:07:04,510 --> 00:07:12,630 Successfully installed all these packages by taking a look at the requirements file and build was successful. 121 00:07:12,670 --> 00:07:17,030 Hopefully it should be alive just in a second, but this takes a little bit time. 122 00:07:17,910 --> 00:07:19,350 So let's just wait for this. 123 00:07:19,670 --> 00:07:20,670 And there we go. 124 00:07:20,710 --> 00:07:21,830 It just says live. 125 00:07:21,870 --> 00:07:23,070 Your service is live. 126 00:07:23,110 --> 00:07:27,470 Let's click to it and just visit it okay I'll just copy this. 127 00:07:27,470 --> 00:07:31,690 And here we can see here it says you just joined to the chat, right? 128 00:07:32,010 --> 00:07:38,650 Um, let me just copy this, paste it, and just put them side by side. 129 00:07:38,650 --> 00:07:41,770 So here it says like this user joined the chat. 130 00:07:41,810 --> 00:07:44,930 Let me just put them side by side and let's just test this out. 131 00:07:44,970 --> 00:07:51,930 I'll just say hey here we can see it is just working as we had in the development server, right. 132 00:07:53,330 --> 00:07:57,970 And if we leave it it's just going to say this user left the chat. 133 00:07:58,010 --> 00:08:00,330 We can update our name let's say John Doe. 134 00:08:00,850 --> 00:08:02,570 It's going to notify everyone. 135 00:08:02,570 --> 00:08:05,450 And we can even have multiple different sessions. 136 00:08:05,570 --> 00:08:08,250 So let me just create more than one right. 137 00:08:08,290 --> 00:08:10,130 So this is the second one. 138 00:08:10,170 --> 00:08:12,170 Let's open up another tab. 139 00:08:12,210 --> 00:08:12,930 Paste it. 140 00:08:13,330 --> 00:08:15,730 And I'll just put all of them side by side. 141 00:08:15,970 --> 00:08:23,650 So here let's say hey everyone sent a message and it is just live in every single tab right. 142 00:08:23,690 --> 00:08:29,610 And if we just leave this it's going to say this user just left the chat and it is working in real time. 143 00:08:29,650 --> 00:08:32,650 So with that that's going to be it for this entire application. 144 00:08:32,650 --> 00:08:34,890 I hope you liked it and I'll see you in the next one.