1 00:00:00,870 --> 00:00:06,750 I lead off almost every video for reli coding by saying something like Oh I get asked all the time about 2 00:00:06,780 --> 00:00:12,750 X Y Z and I know I say that almost every single video but I will say that this particular topic the 3 00:00:12,750 --> 00:00:17,430 topic that we're getting covered in this video definitely the most common question I get all the time 4 00:00:17,460 --> 00:00:20,880 how do I do a deployment of a web pack application. 5 00:00:20,940 --> 00:00:21,620 How do we deploy it. 6 00:00:21,630 --> 00:00:27,280 How do I let my friends co-workers boss whoever see the application I'm working on. 7 00:00:27,390 --> 00:00:31,170 And how do we do that deployment in some kind of recently scalable fashion. 8 00:00:31,200 --> 00:00:31,500 Right. 9 00:00:31,500 --> 00:00:36,270 Not just like push it off to get pages but how do we make something that can scale in the future if 10 00:00:36,270 --> 00:00:37,540 I actually want to. 11 00:00:37,890 --> 00:00:43,130 So in this video we're going to outline steps on how we might tackle a web pack deployment. 12 00:00:43,150 --> 00:00:46,220 This gives me a well-packed deployment off to Heroku. 13 00:00:46,740 --> 00:00:49,510 So let's talk a little bit about it. 14 00:00:49,530 --> 00:00:52,960 I love my diagrams so we're going to start off with a little bit of a diagram here. 15 00:00:52,980 --> 00:00:55,260 We're going to come back to the diagram several times. 16 00:00:55,260 --> 00:01:00,090 So the entire point of this entire video that I really want to impress upon me I really want you to 17 00:01:00,090 --> 00:01:03,900 just understand this one piece and if you understand this one piece you're going to be in like good 18 00:01:03,900 --> 00:01:10,260 shape for you to plunge into the future for a pack based application and that one fact is to understand 19 00:01:10,260 --> 00:01:14,760 that when we are deploying our application or ROOM we are writing our application. 20 00:01:14,760 --> 00:01:17,160 We have two separate pipelines. 21 00:01:17,160 --> 00:01:23,300 We've got this kind of development pipeline of how we write our code test our code in the browser. 22 00:01:23,370 --> 00:01:28,590 It is kind of like your work and do our development and then we have a completely separate process for 23 00:01:28,590 --> 00:01:31,160 doing our production deployment. 24 00:01:31,170 --> 00:01:34,290 Now this isn't you know there's a billion ways to do deployment. 25 00:01:34,290 --> 00:01:35,090 At the end of the day. 26 00:01:35,100 --> 00:01:37,210 And so this is one possible interpretation right. 27 00:01:37,220 --> 00:01:41,430 You're not going to claim this is like the end all be all pro-trade you're bound to say that had great 28 00:01:41,430 --> 00:01:47,610 success with following this kind of two pipeline methodology of saying here is some process I have for 29 00:01:47,610 --> 00:01:54,070 developing my code and then here is some process I have for deploy my code to a production server. 30 00:01:54,250 --> 00:02:00,450 So we'll do one very quick run through these these two diagrams here are these two flows and then we're 31 00:02:00,450 --> 00:02:03,840 going to go off change a project that I've already installed. 32 00:02:03,990 --> 00:02:07,800 And well again we're going to try to install Idda or soon be deployed off to procure and just kind of 33 00:02:07,800 --> 00:02:08,820 see how it goes. 34 00:02:08,850 --> 00:02:09,590 OK. 35 00:02:10,410 --> 00:02:12,420 So let's go through the development pipeline first. 36 00:02:12,420 --> 00:02:16,700 This is likely the pipeline or kind of the practices that you're very much use to. 37 00:02:16,890 --> 00:02:21,090 So we start off with kind of our code at the top in our repository. 38 00:02:21,780 --> 00:02:28,620 We run something like NPM start or well-packed dead server whatever that might be when we run that command 39 00:02:28,630 --> 00:02:28,720 . 40 00:02:28,800 --> 00:02:35,250 All of our code gets processed by web pack where PAC is responsible for maintaining or linking together 41 00:02:35,250 --> 00:02:36,570 all of our different files. 42 00:02:36,570 --> 00:02:37,220 Right. 43 00:02:37,290 --> 00:02:40,740 Like all those import statements all those require statements whatever you got. 44 00:02:40,810 --> 00:02:46,980 Westpac is all about linking those files together in producing some final bills like bundled G-S or 45 00:02:46,980 --> 00:02:49,550 main JSA or something like that. 46 00:02:49,830 --> 00:02:56,100 Well-packed then hands off that built file to well-packed dead server which is responsible for like 47 00:02:56,100 --> 00:03:02,130 giving you something to visit like localhost 1880 or 3000 or 8000 or whatever it is just something that 48 00:03:02,130 --> 00:03:06,950 we can visit in our browser to check out our application as we're developing it. 49 00:03:07,230 --> 00:03:11,480 And so is flown on the left hand side is probably something that you can be reasonably familiar with 50 00:03:11,490 --> 00:03:16,620 even if you don't really recognize it you know if you've worked on any web based application you're 51 00:03:16,620 --> 00:03:23,940 probably doing something like Scuse me off on the left hand side over here so we can juxtapose this 52 00:03:23,940 --> 00:03:29,670 process or this pipeline right here with how our production pipeline works or how we actually deploy 53 00:03:29,670 --> 00:03:31,150 our application. 54 00:03:31,170 --> 00:03:34,900 And so obviously you know on the left hand side this is kind of like a running process right. 55 00:03:34,940 --> 00:03:40,830 We've got our code here and whenever we make a change well-packed we'll rebuild some particular files 56 00:03:40,870 --> 00:03:43,100 and then them off to the dead server again. 57 00:03:43,110 --> 00:03:47,850 And so this is kind of a left on the left hand side it's a continuous rerunning process that happens 58 00:03:47,850 --> 00:03:50,490 over and over and over again as we're doing our development. 59 00:03:50,790 --> 00:03:55,630 Whereas on the right hand side our production pipeline is more like a one shot deal right. 60 00:03:55,650 --> 00:04:02,370 We do our deployment one time it builds deploys and we can walk away for a couple of days or couple 61 00:04:02,400 --> 00:04:04,540 hours until we decide to deploy it again. 62 00:04:04,710 --> 00:04:05,610 So just to be clear. 63 00:04:05,610 --> 00:04:10,670 Left hand side as can be continuous running process whereas the deployment on the right hand side is 64 00:04:10,950 --> 00:04:12,910 going to be a one shot deal. 65 00:04:13,770 --> 00:04:18,330 So let's do a run through on the production pipeline because this is you know the the real point of 66 00:04:18,420 --> 00:04:23,760 this video that we're talking about and after we talk do you know kind of a brief run through on this 67 00:04:23,820 --> 00:04:28,570 we'll go through a little bit more details and we'll do an actual deployment of an application. 68 00:04:29,070 --> 00:04:30,870 So it all starts off with our code. 69 00:04:30,930 --> 00:04:35,850 Right of course we've got our code base like some working application that we want to make available 70 00:04:35,850 --> 00:04:37,560 to other people online. 71 00:04:37,980 --> 00:04:41,620 And I was saying here specifically that we want to work with Heroku. 72 00:04:41,670 --> 00:04:41,880 OK. 73 00:04:41,910 --> 00:04:50,020 So if I go into Digital Ocean or AWOS these directions might change slightly but everything I have is 74 00:04:50,050 --> 00:04:54,340 very well set up for working with pro-people which is definitely one of the easiest hosting providers 75 00:04:54,340 --> 00:04:54,980 out there. 76 00:04:55,140 --> 00:05:01,120 And then also at the end the day ends up being pretty darn cheap as well compared to some other competitors 77 00:05:01,320 --> 00:05:01,650 . 78 00:05:01,750 --> 00:05:04,060 Your Digital Ocean is just the cheapest you can find. 79 00:05:04,060 --> 00:05:08,000 But Heroku has a little bit more easier to work with. 80 00:05:08,090 --> 00:05:13,140 It was getting a bit off topic there so let's go back up to the top so we start off with our code. 81 00:05:13,140 --> 00:05:19,150 We're going to push our project to Heroku and by push I mean basically kind of copy paste our entire 82 00:05:19,140 --> 00:05:21,760 repository over to our Heroku server. 83 00:05:21,910 --> 00:05:27,940 And so from that point on Heroku is like basically responsible for building our project in Serbia out 84 00:05:27,940 --> 00:05:29,110 to the world. 85 00:05:29,470 --> 00:05:34,230 So we don't really get to do a lot of you know hands on configuration after it goes to Heroku. 86 00:05:34,320 --> 00:05:40,020 We have to set up some configuration script to run it so that once our code shows up on Heroku it knows 87 00:05:40,020 --> 00:05:42,740 how to build and run our project. 88 00:05:42,750 --> 00:05:44,800 So that's the really key factor here. 89 00:05:44,890 --> 00:05:50,770 Heroku we have to give it directions on how to build and serve our project now by default. 90 00:05:50,760 --> 00:05:57,240 Heroku will understand that we are pushing it a node package and so it will install any of modules for 91 00:05:57,250 --> 00:06:02,940 us which is fantastic definitely what we want but besides installing some NPM modules it doesn't really 92 00:06:02,940 --> 00:06:04,920 do a whole lot for us. 93 00:06:05,250 --> 00:06:09,940 So to make sure that Protea actually builds and runs their application by the way we'll talk exactly 94 00:06:09,940 --> 00:06:16,980 what I mean by build's we're going to implement some additional scripts notably one called post install 95 00:06:17,380 --> 00:06:25,450 and one called You know I put server Jay last year but it's really just the start and only after these 96 00:06:25,440 --> 00:06:27,840 two scripts get ran or executed. 97 00:06:27,850 --> 00:06:33,330 Should I be able to visit an address like you know X Y Z at Heroku app dot com and see my application 98 00:06:33,340 --> 00:06:34,210 actually running. 99 00:06:34,380 --> 00:06:34,990 OK. 100 00:06:35,440 --> 00:06:39,500 So the again the idea here is that we're going to push our code off to Roku. 101 00:06:39,520 --> 00:06:45,730 Roku will install our NPM modules for us which all of our dependencies like react redox whatever else 102 00:06:46,160 --> 00:06:52,840 and then we have to manually specify some amount of configuration to say hey Heroku This is how you 103 00:06:52,840 --> 00:06:55,480 should build and run my project. 104 00:06:55,660 --> 00:07:01,450 So that's where we spend a lot of time doing setting up the post install thing and is starting whatever 105 00:07:01,450 --> 00:07:02,600 those are. 106 00:07:03,190 --> 00:07:04,890 OK let's give this a shot. 107 00:07:04,930 --> 00:07:09,030 The first thing I'm going to do is I'm over at Heroku dot com. 108 00:07:09,060 --> 00:07:10,700 I've already got an account here. 109 00:07:10,780 --> 00:07:12,140 Am I going to create a brand new app. 110 00:07:12,150 --> 00:07:15,980 So we get to choose from this like whole scratch right something you could follow through from from 111 00:07:16,240 --> 00:07:17,220 scratch. 112 00:07:17,520 --> 00:07:22,300 So I mean you don't have to provide an app name if you leave the blank it will generate one for us. 113 00:07:22,310 --> 00:07:23,540 It's totally fine. 114 00:07:23,870 --> 00:07:25,290 So I'm going to create my application 115 00:07:27,880 --> 00:07:29,360 and there we go. 116 00:07:29,380 --> 00:07:30,620 Everything is deployed. 117 00:07:30,750 --> 00:07:36,860 And if I scroll down a little bit I get some directions on how I might create a get repository and on 118 00:07:36,870 --> 00:07:42,610 my project you know we'll walk through all this stuff in just a moment saying go over to my application 119 00:07:42,620 --> 00:07:42,720 . 120 00:07:42,810 --> 00:07:50,290 So this is my project directory right here just to show you what my project looks like once it should 121 00:07:50,280 --> 00:07:51,840 actually be deployed. 122 00:07:52,240 --> 00:07:55,680 You know pull it open in the browser on a local server. 123 00:07:56,740 --> 00:07:59,120 So this would be using well-packed dead server in this case 124 00:08:02,810 --> 00:08:11,220 and it can take just a second to get the thing started up which seems like it takes slightly too long 125 00:08:11,230 --> 00:08:13,180 . 126 00:08:13,180 --> 00:08:13,540 All right. 127 00:08:13,560 --> 00:08:14,480 Almost there there you go. 128 00:08:14,520 --> 00:08:14,820 All right. 129 00:08:14,830 --> 00:08:16,120 Let's check this out. 130 00:08:17,110 --> 00:08:17,680 And OK. 131 00:08:17,710 --> 00:08:24,100 So here's my youtube application that I've got I can search for videos of the top I can click on videos 132 00:08:24,560 --> 00:08:26,250 you know whatever is that I don't want to do. 133 00:08:26,250 --> 00:08:29,650 But basically what the app does is completely decoupled from deployment. 134 00:08:29,640 --> 00:08:31,750 So this you know this is what it looks like. 135 00:08:31,840 --> 00:08:34,430 This is where we're going to try to get up to a Roku server. 136 00:08:34,880 --> 00:08:35,140 All right. 137 00:08:35,130 --> 00:08:39,480 So I don't really need to have the app running at all so I'll stop the process. 138 00:08:39,480 --> 00:08:41,900 I'm going to open up my code editor. 139 00:08:42,610 --> 00:08:48,450 So remember the two tasks we need to make sure that actually occur is I need to set up this kind of 140 00:08:48,460 --> 00:08:51,420 like post install thing and this start thing over here. 141 00:08:51,420 --> 00:08:55,370 So let's figure out what these two scripts are like what are we actually doing where we have to do on 142 00:08:55,370 --> 00:08:57,120 the Heroku side. 143 00:08:58,020 --> 00:08:58,490 OK. 144 00:08:58,600 --> 00:09:04,770 So these two scripts are used to configuration little pieces of configuration are actually scripts that 145 00:09:04,780 --> 00:09:07,970 we're going to place inside of our package not just on file. 146 00:09:08,190 --> 00:09:13,180 So these are going to be scripts that Marocco is going to run automatically for us. 147 00:09:13,300 --> 00:09:21,220 Heroku is set up to automatically call a script called post install in a script called Start. 148 00:09:21,220 --> 00:09:27,010 Now the purpose of both of these scripts are absolutely key post install is a script that is intended 149 00:09:27,000 --> 00:09:29,810 to build our project in some fashion. 150 00:09:29,830 --> 00:09:33,940 I know I've been saying build all the time so just to be clear when I say build I specifically mean 151 00:09:34,440 --> 00:09:41,970 take all of our development code like in all these separate files and run web pack to produce a single 152 00:09:41,980 --> 00:09:44,780 javascript file that we use for applications. 153 00:09:44,760 --> 00:09:46,210 So it's going to be like our bundle. 154 00:09:46,250 --> 00:09:46,950 Yes. 155 00:09:47,080 --> 00:09:53,380 This step right here is where we build or produce our bundle JS or like single production version of 156 00:09:53,380 --> 00:09:57,700 our application where I say single I mean like single javascript file. 157 00:09:58,090 --> 00:10:04,080 This script will be ran automatically after installing all of our Antium modules and it's executed exactly 158 00:10:04,090 --> 00:10:04,930 once. 159 00:10:05,080 --> 00:10:11,040 So this post and sculp post install script right here is the ideal spot for us to tell well-packed please 160 00:10:11,050 --> 00:10:15,540 go and build our application because we're about to deploy it and serve it to the rest of the world 161 00:10:15,560 --> 00:10:15,930 . 162 00:10:16,880 --> 00:10:24,050 After that script runs Heroku is then going to execute a second script automatically called start and 163 00:10:24,080 --> 00:10:28,110 remember it's up to us entirely to make sure that these scripts are defined. 164 00:10:28,360 --> 00:10:31,750 So Heroku is going to try to run them if they are not available. 165 00:10:31,780 --> 00:10:35,890 That's fine but it's going to just kind of say like God or know what you want me to do then write in 166 00:10:35,890 --> 00:10:37,750 or fail to actually deploy. 167 00:10:38,260 --> 00:10:43,380 So this stern script right here is responsible for actually starting and maintaining the servers. 168 00:10:43,390 --> 00:10:49,640 This is where we actually say OK I've built my application I've got like my index HTL file I've got 169 00:10:49,630 --> 00:10:53,150 my Bunnell JS I want to serve this out to the world. 170 00:10:53,470 --> 00:10:58,900 And so this start script right here we need to make sure that start is actually makes like our server 171 00:10:58,900 --> 00:11:03,060 available to the world in response to HTP requests. 172 00:11:03,070 --> 00:11:08,320 So as long as we implement these two scripts right here inside of our package sheets on file that's 173 00:11:08,470 --> 00:11:09,580 basically all we got to do. 174 00:11:09,580 --> 00:11:13,720 That's the whole shebang right there we just got to implement these scripts in Heroku we'll take it 175 00:11:13,720 --> 00:11:15,510 from there. 176 00:11:15,520 --> 00:11:17,640 So let's start off with our post install script. 177 00:11:17,650 --> 00:11:20,430 We will create our post-soul script. 178 00:11:20,590 --> 00:11:25,810 Our goal there is to make sure that it actually builds our application as we want to do. 179 00:11:26,620 --> 00:11:33,930 So I can open up my project back up and I can open up my package not just on file in my package it's 180 00:11:33,940 --> 00:11:38,800 on file I've got my script section and I've already got a script called Start in here. 181 00:11:38,870 --> 00:11:44,360 And so it just so happens that the boilerplate package that I'm using here already has a script called 182 00:11:44,350 --> 00:11:45,960 Star. 183 00:11:45,970 --> 00:11:48,780 We will you know make a couple of changes to this thing in just a minute. 184 00:11:48,790 --> 00:11:55,390 But right now again we're going to be creating the post install script so I can add another script I 185 00:11:55,390 --> 00:12:01,880 need to first put a comma at the end of this one line and I'll say Posten stall. 186 00:12:02,440 --> 00:12:06,970 And this is where you know it's kind of hard to naturally lead into what I'm doing here at this post 187 00:12:06,970 --> 00:12:10,390 and so install scripting on the nursery build my package. 188 00:12:10,660 --> 00:12:12,550 Basically this is just a bit of trivia. 189 00:12:12,580 --> 00:12:14,500 You just got to know how web pack works. 190 00:12:14,640 --> 00:12:19,930 To tell well-packed that we want to build a production version of our entire application we can run 191 00:12:19,930 --> 00:12:22,460 the command well-packed Mashpee and that's it. 192 00:12:22,480 --> 00:12:28,090 If we run well-packed ASC-P we will generate a complete bundle G-S that contains all the code for our 193 00:12:28,090 --> 00:12:29,120 application. 194 00:12:29,380 --> 00:12:32,720 And I can actually prove that to you right now inside my project directory. 195 00:12:32,980 --> 00:12:38,260 I can run well-packed ASC-P and after a couple of seconds it's going to build my bundle that js file 196 00:12:38,360 --> 00:12:44,950 that has my entire application in case I need to save this file and then I'm going to create my second 197 00:12:44,950 --> 00:12:51,520 script which is responsible for starting running maintaining my entire server like so people can visit 198 00:12:51,520 --> 00:12:58,360 it get back some index each HTML file and also get my you know bundle JS file of that kind of good stuff 199 00:12:58,370 --> 00:12:58,940 . 200 00:12:59,000 --> 00:13:01,750 And so remember that one's called Start. 201 00:13:01,750 --> 00:13:03,290 I've already got a naming collision here. 202 00:13:03,310 --> 00:13:05,350 You know we've already got a script filled store. 203 00:13:05,580 --> 00:13:10,720 So just because of the boilerplate package I'm using already defined the script so it is going to change 204 00:13:10,720 --> 00:13:16,510 this existing one to Dev because it's really all about starting up my web pack dead or for development 205 00:13:16,530 --> 00:13:17,310 . 206 00:13:18,070 --> 00:13:18,560 OK. 207 00:13:18,620 --> 00:13:24,960 So in the case of my start script again this is what's actually running some useful server for me. 208 00:13:25,240 --> 00:13:27,660 And so for my server I want to run. 209 00:13:27,700 --> 00:13:32,730 I'm going to create a server file here in just a second called server. 210 00:13:32,880 --> 00:13:36,640 Yes Songlian do is going to run the file server. 211 00:13:36,700 --> 00:13:38,100 Yes. 212 00:13:39,110 --> 00:13:44,770 OK so I'm going to save this by the way you can see I know it's really small but up here I've now got 213 00:13:44,800 --> 00:13:51,490 a bundle that just file inside my project because that web pack dash P file or a command that it ran 214 00:13:51,490 --> 00:13:58,570 just finished actually kind of compiling all my stuff into a single bundled g file right here just to 215 00:13:58,570 --> 00:14:00,110 see how it actually finished. 216 00:14:00,490 --> 00:14:07,060 Ok so I need to now create my server G-S file which is going to be responsible for serving my application 217 00:14:07,060 --> 00:14:08,210 out to the world. 218 00:14:08,560 --> 00:14:17,670 So I'll create a new file called Server JS decode that we're going to place in here is going to be ah 219 00:14:18,870 --> 00:14:23,980 I want what I'm trying to say here is the video that I did last week on really coding or two weeks ago 220 00:14:23,980 --> 00:14:31,830 was all about creating a simple issue Hedy's server and serving up a web application. 221 00:14:31,960 --> 00:14:34,210 I need a kind of speed through the implementation here. 222 00:14:34,230 --> 00:14:38,980 I if you want to figure out the kind of intricacies of what I'm doing I recommend going back two weeks 223 00:14:38,980 --> 00:14:43,270 checking out that video and I go through a super in-depth explanation of everything I'm about to put 224 00:14:43,270 --> 00:14:44,970 in this file right here. 225 00:14:45,630 --> 00:14:45,920 OK. 226 00:14:45,910 --> 00:14:48,220 So I'm going to just go through the implementation. 227 00:14:48,220 --> 00:14:58,930 First we're going to create an express application and then will import Express and imports the path 228 00:14:58,930 --> 00:15:00,220 module. 229 00:15:00,790 --> 00:15:02,390 I'll declare my port 230 00:15:10,200 --> 00:15:13,170 and then I will create my actual express application. 231 00:15:13,380 --> 00:15:20,130 Notice that on my port declaration right here I've got this first line says Process environment port 232 00:15:20,700 --> 00:15:26,040 and so Heroku when it executes the server farm right here Heroku provides a support that expects us 233 00:15:26,040 --> 00:15:29,810 to listen to Traficon and we get that variable. 234 00:15:29,820 --> 00:15:33,490 You know from Heroku as a environment variable. 235 00:15:33,540 --> 00:15:39,060 And so if a variable is provided if a port is provided we need to make sure that we buy into that port 236 00:15:39,120 --> 00:15:43,230 and not just to like you arbitrarily ADHD or wherever we want to do. 237 00:15:43,230 --> 00:15:44,550 And that's why I've got this. 238 00:15:44,640 --> 00:15:46,130 Okay try to use port. 239 00:15:46,170 --> 00:15:49,350 If it's not to be able to just default back to 1880. 240 00:15:50,220 --> 00:15:58,300 OK now here really comes the part where I encourage you to go back to my video from two weeks ago and 241 00:15:58,290 --> 00:16:05,560 check out all the stuff in there on why I'm doing these different statements. 242 00:16:08,760 --> 00:16:14,370 But basically we're just saying if anyone tries to get any file out of here give them like you know 243 00:16:14,380 --> 00:16:15,660 bundle J us. 244 00:16:15,670 --> 00:16:24,120 Otherwise if we don't know what route they're trying to get to just send them back our index on HD and 245 00:16:24,120 --> 00:16:24,570 I'll file 246 00:16:31,380 --> 00:16:37,060 name and listen on port and just console log server started. 247 00:16:38,190 --> 00:16:38,480 OK. 248 00:16:38,490 --> 00:16:42,800 Now before I actually try to deploys to Roku I'm going to run it locally just to make sure I don't hear 249 00:16:42,810 --> 00:16:44,280 typos or anything in there. 250 00:16:44,490 --> 00:16:52,080 So I got server started after I ran node Sergius and I should now be able to go to local host ADHD and 251 00:16:52,100 --> 00:16:55,480 yeah looks good go. 252 00:16:56,130 --> 00:16:56,380 OK. 253 00:16:56,400 --> 00:17:03,360 So I've now implemented my post install script and my start script. 254 00:17:03,400 --> 00:17:06,300 Remember Posten soul is all about building her application. 255 00:17:06,300 --> 00:17:08,710 It gets executed one time on a Roku. 256 00:17:08,910 --> 00:17:14,580 And inside the script I need to make sure I do everything required for generating like a deployable 257 00:17:14,590 --> 00:17:18,270 version of my application like my actual javascript file. 258 00:17:18,630 --> 00:17:24,360 And then I also just implemented a start script which is responsible for saying OK here is my actual 259 00:17:24,370 --> 00:17:29,700 server like my express server that is responsible for sending people an index each e-mail file a bundled 260 00:17:29,690 --> 00:17:33,030 Jay ass or whatever other API endpoints I might have. 261 00:17:33,300 --> 00:17:36,940 So the last step we need to do is actually deployed off to her Roku. 262 00:17:37,360 --> 00:17:44,020 So I already generated my Heroku server and now we're going to kind of get into the realm of you know 263 00:17:44,050 --> 00:17:51,210 exactly how I Heroku works if this for a year is not that bad. 264 00:17:51,220 --> 00:17:53,790 You know we've got some very clear directions right here. 265 00:17:53,800 --> 00:17:58,320 I've already installed this Droguet command line tool and logged into it. 266 00:17:58,470 --> 00:18:02,080 And so all I have to do is start up a good repository. 267 00:18:02,460 --> 00:18:10,290 I will add my Heroku end point or microcode server that just generated as a good hook or a remote origin 268 00:18:11,760 --> 00:18:14,210 and then I can actually deploy the application. 269 00:18:14,430 --> 00:18:17,800 So I will first get in it. 270 00:18:18,070 --> 00:18:21,280 I will add all the files I have in here. 271 00:18:23,880 --> 00:18:26,130 I can then add my Heroku endpoint. 272 00:18:26,220 --> 00:18:33,530 So Heroku I mean adding and point of this randomly generated name baroque chocolatier. 273 00:18:33,550 --> 00:18:38,110 OK this is a crazy town name but OK I'll buy it. 274 00:18:38,110 --> 00:18:41,990 And then the very last step I have do is I already committed all my code. 275 00:18:42,100 --> 00:18:44,690 I'll have to do is push it all off to Roco. 276 00:18:44,700 --> 00:18:50,040 And so this is one of the big promises of Roekel and the reasons I got so popular in my opinion years 277 00:18:50,050 --> 00:18:53,980 ago was that it had this fantastic good integration. 278 00:18:54,070 --> 00:19:00,330 And so if I want to push or deploy something to Heroku all I do is treat it like a good endpoint so 279 00:19:00,340 --> 00:19:03,590 I can get push Heroku master. 280 00:19:03,590 --> 00:19:07,040 And so normally you might be used to writing like you know get push Orjan master. 281 00:19:07,230 --> 00:19:12,430 And if you're using good hub or get lab or bitbucket that would post it or shuffle your code off to 282 00:19:12,420 --> 00:19:14,370 your remote repository. 283 00:19:14,590 --> 00:19:20,640 But in this case by pushing to Heroku we are actually pushing to our Heroku server like our actual server 284 00:19:20,650 --> 00:19:21,100 . 285 00:19:21,550 --> 00:19:22,650 Ok so we're going run this. 286 00:19:22,680 --> 00:19:26,080 And let's see what happens. 287 00:19:26,250 --> 00:19:29,150 So we get some really nice output here. 288 00:19:29,250 --> 00:19:36,170 You'll notice that Procul automatically detected that we are deploying a node application. 289 00:19:36,380 --> 00:19:43,410 It installs some you know whatever stuff cast well I don't know stuff stuff stuff. 290 00:19:43,800 --> 00:19:48,000 And then here's the important part installing node modules so these are all the modules we've got list 291 00:19:48,000 --> 00:19:50,680 inside of our package States on file by default. 292 00:19:50,680 --> 00:19:54,380 It's only going to install modules that are underneath the dev section. 293 00:19:54,380 --> 00:20:00,780 And so if you've got like some dev dependencies modules and depends in debt or just dependency modules 294 00:20:01,030 --> 00:20:04,080 you'll just to get your dependencies. 295 00:20:04,120 --> 00:20:06,880 Notice that we just saw. 296 00:20:07,030 --> 00:20:07,650 OK. 297 00:20:07,820 --> 00:20:09,980 Well it's really up there. 298 00:20:10,030 --> 00:20:12,730 It was on screen for just half a second but here it is. 299 00:20:12,730 --> 00:20:15,740 This is our post install script well-packed ASC-P. 300 00:20:15,750 --> 00:20:19,330 And so this is what's responsible for building our bundled up js file. 301 00:20:19,360 --> 00:20:25,230 So after well-packed ASC-P executed we ended up with this bundled G-S which is our complete application 302 00:20:25,800 --> 00:20:29,690 and you can see these are all the install Antium modules that we've got. 303 00:20:29,700 --> 00:20:35,530 And then finally at the very end something something something very fine deployed done. 304 00:20:35,760 --> 00:20:41,470 So let's check out our server now. 305 00:20:41,730 --> 00:20:43,720 That's where it is right here. 306 00:20:43,740 --> 00:20:46,820 So this is where our application should be deployed. 307 00:20:47,460 --> 00:20:50,490 So broke chocolatier dot Brochu at dot com. 308 00:20:50,490 --> 00:20:52,790 So let's give this a shot. 309 00:20:55,200 --> 00:20:57,420 And boom there's our application. 310 00:20:57,420 --> 00:20:59,340 Exactly as we saw it before. 311 00:20:59,430 --> 00:21:05,020 If you ever tried going to your Heroku app you are Elop here and nothing pops up or just kind of hangs 312 00:21:05,030 --> 00:21:05,170 . 313 00:21:05,280 --> 00:21:13,440 One of the most valuable troubleshooting features of Roku is the command line tool Heroku logs and this 314 00:21:13,440 --> 00:21:18,890 will reach out to your server and we'll say OK are there any any logs available from the server. 315 00:21:18,960 --> 00:21:20,430 Did anything go wrong. 316 00:21:20,760 --> 00:21:26,560 And so when I grab that you can see that we've got like basically everything that's how that happened 317 00:21:26,550 --> 00:21:34,010 on server starting process with command and start which executed node server gave us. 318 00:21:34,050 --> 00:21:35,100 That's the command we write. 319 00:21:35,110 --> 00:21:37,650 We added here's server started. 320 00:21:37,650 --> 00:21:42,760 That's the console log we added on side of the server dodgiest file and then blah blah blah a bunch 321 00:21:42,750 --> 00:21:43,270 of stuff. 322 00:21:43,300 --> 00:21:46,010 And eventually I made a request to our server. 323 00:21:46,130 --> 00:21:48,390 You know the path forward slash. 324 00:21:48,630 --> 00:21:51,350 And then we loaded up the style CSSA. 325 00:21:51,370 --> 00:21:55,820 Here's the bundle J us and all the other stuff. 326 00:21:55,820 --> 00:21:57,720 And boom there's our application. 327 00:21:57,840 --> 00:21:58,530 So that's pretty much it. 328 00:21:58,530 --> 00:22:03,600 That is Heroku deployment of a web well-packed based application in nutshell. 329 00:22:03,630 --> 00:22:08,920 The big thing to keep in mind here again is to keep in mind that we've got a development pipeline and 330 00:22:08,910 --> 00:22:11,880 we've got a production pipeline on the production pipeline. 331 00:22:11,880 --> 00:22:17,610 We are responsible for making sure that Heroku knows how to build our application and then actually 332 00:22:17,620 --> 00:22:23,190 run something to run something to stuff files off to anyone who asks for something like Bunnell J us 333 00:22:23,190 --> 00:22:25,560 or index it's smell or whatever it is. 334 00:22:25,650 --> 00:22:30,480 And so normally this will this start command right here what gets executed with something like an express 335 00:22:30,480 --> 00:22:33,060 server. 336 00:22:33,070 --> 00:22:40,890 All we really have to do is make sure that we implemented the post install and start commands so that 337 00:22:40,920 --> 00:22:45,610 whenever we deployed our application Heroku Heroku had some reasonable idea of what it had to do to 338 00:22:45,610 --> 00:22:48,210 get our server running. 339 00:22:48,210 --> 00:22:48,510 All right. 340 00:22:48,510 --> 00:22:50,300 So that is deployment in a nutshell. 341 00:22:50,300 --> 00:22:52,870 Again there's just a billion away from deployments. 342 00:22:52,870 --> 00:22:54,820 This is one of the simplest ways out there. 343 00:22:54,820 --> 00:22:59,310 Definitely the fastest to get started to actually push your stuff out and be able to test it in the 344 00:22:59,320 --> 00:23:00,540 wild. 345 00:23:01,320 --> 00:23:02,640 I hope you've enjoyed this video. 346 00:23:02,640 --> 00:23:06,800 I do weekly videos on everything re-act redux javascript. 347 00:23:06,800 --> 00:23:08,640 You know all topics. 348 00:23:08,860 --> 00:23:10,080 Check in again next week. 349 00:23:10,120 --> 00:23:14,570 And I don't know you know we'll see what new topic we have at that point in time.