1 00:00:02,150 --> 00:00:04,220 So let's dive into some theory first, 2 00:00:04,230 --> 00:00:09,750 it's important to understand that there are two main kinds of web applications web sites you could be 3 00:00:09,750 --> 00:00:10,790 building. 4 00:00:10,800 --> 00:00:17,980 One is a web site that only consists of a bunch of HTML files, some Javascript and some CSS, 5 00:00:18,030 --> 00:00:21,620 this is what we actually worked on for the majority of the course. 6 00:00:21,690 --> 00:00:27,990 We didn't have any server side code there, any code that needs to be executed outside of the browser 7 00:00:27,990 --> 00:00:29,090 of the user 8 00:00:29,250 --> 00:00:35,190 but in the Node.js module we did have a look at that because Node.js is a Javascript runtime which 9 00:00:35,190 --> 00:00:39,600 allows us to run Javascript anywhere including on a server, 10 00:00:39,600 --> 00:00:45,630 so on a computer which runs somewhere in the web, which users can send request to but where they don't 11 00:00:45,750 --> 00:00:46,700 see the code, 12 00:00:46,740 --> 00:00:52,080 so not code that runs in the browser and therefore on the machines of our end users but code that runs 13 00:00:52,200 --> 00:00:56,350 on a server we rent, we pay and we put our code on. 14 00:00:56,460 --> 00:01:01,530 Now for server side code, Node.js is not our only solution or our only alternative, 15 00:01:01,590 --> 00:01:04,170 we could write this code with PHP and so on 16 00:01:04,170 --> 00:01:08,670 but since this course is about Javascript and Node.js is a runtime for Javascript, 17 00:01:08,670 --> 00:01:11,080 I of course picked Node.js here. 18 00:01:11,190 --> 00:01:16,410 So these are the two kinds of applications we have - one which only has client side code and one which 19 00:01:16,500 --> 00:01:22,350 might also have client side code but which also has code that needs to run on a server, like in this Node.js 20 00:01:22,350 --> 00:01:24,100 example. 21 00:01:24,270 --> 00:01:30,960 Now in the client side code in the left case here, all we need to serve this web site to our users is 22 00:01:30,960 --> 00:01:33,040 a so-called static host 23 00:01:33,090 --> 00:01:41,400 This is a host, this is a web server, a computer configured such that for incoming HttpRequests, it returns 24 00:01:41,400 --> 00:01:47,580 the HTML files and the Javascript and the CSS files and maybe any images you're using but that it 25 00:01:47,580 --> 00:01:53,610 does not run any Javascript code or any server side code on itself, 26 00:01:53,640 --> 00:01:59,280 so put in other words, it's a machine, it's a computer somewhere in the Internet with its own IP address 27 00:01:59,280 --> 00:02:05,180 attached to it and connected to a domain maybe which simply does not have Node.js installed on it, 28 00:02:05,190 --> 00:02:11,970 instead you just put your files onto that server, configure it briefly to return these files for the 29 00:02:11,970 --> 00:02:14,200 incoming requests and you're done. 30 00:02:14,220 --> 00:02:18,750 Now you could configure such a computer all on your own but typically you would use certain services 31 00:02:18,750 --> 00:02:23,070 for that which makes this configuration and so on way easier and more secure 32 00:02:23,130 --> 00:02:24,860 and you simply pay for these services then 33 00:02:25,020 --> 00:02:30,030 and I will show you examples for both deployment scenarios, static and non-static 34 00:02:30,030 --> 00:02:36,330 in this module. Speaking about non-static, you could also call this dynamic, you need a dynamic host. You 35 00:02:36,330 --> 00:02:41,760 need a computer somewhere in the Internet connected to the Internet in both directions so that it also 36 00:02:41,760 --> 00:02:47,580 is able to handle incoming requests which has, in our case here, Node.js installed on it 37 00:02:47,670 --> 00:02:53,160 so that on this computer, you can execute Javascript code which is not possible in the left scenario 38 00:02:53,340 --> 00:03:00,390 but in the right scenario, the server side code scenario, we have a web server which does not just return 39 00:03:00,420 --> 00:03:07,320 HTML, CSS and Javascript files to the users, so that the files are then handled locally on these user's 40 00:03:07,320 --> 00:03:13,870 machines but which in addition to that, also is capable of running, in our case Javascript code, on the 41 00:03:13,870 --> 00:03:17,940 server itself by simply installing Node.js there in the end 42 00:03:17,960 --> 00:03:20,160 and by of course configuring it correctly. 43 00:03:20,160 --> 00:03:25,980 Now just like in the static scenario, you could theoretically setup such a machine all from scratch on 44 00:03:25,980 --> 00:03:33,180 your own but you need advanced server administration knowledge for that to do that in a secure and scalable 45 00:03:33,180 --> 00:03:33,830 way, 46 00:03:33,840 --> 00:03:39,810 therefore in both scenarios, you would typically use certain services for that - paid services which do 47 00:03:39,810 --> 00:03:45,750 the heavy lifting for you and allow you to simply put your files there, write some basic configuration 48 00:03:45,750 --> 00:03:46,680 and be done for it. 49 00:03:47,880 --> 00:03:54,360 So these are the two options - a server that just needs to host and provide these static assets, there example 50 00:03:54,360 --> 00:04:01,980 hosting services would be S3 by AWS, so by Amazon Web Services, Firebase hosting and many more. 51 00:04:01,980 --> 00:04:07,730 If you google for static web hosting and so on, you will find plenty of results, in the right scenario 52 00:04:07,730 --> 00:04:13,770 we need a server which is able to execute our files or our scripts on the server, our server side scripts 53 00:04:13,770 --> 00:04:14,560 at least 54 00:04:14,700 --> 00:04:21,170 and there example services would be AWS Elastic Beanstalk which is a service by Amazon Web Services, 55 00:04:21,240 --> 00:04:25,310 Heroku and again other services as well. 56 00:04:25,310 --> 00:04:26,450 Now this is the overview, 57 00:04:26,460 --> 00:04:34,170 we'll have a look at both approaches in this module. Before we move on to the concrete deployment with 58 00:04:34,170 --> 00:04:40,530 the example services I picked for this module, I have first of all want to walk through the general deployment 59 00:04:40,530 --> 00:04:41,780 steps though. 60 00:04:41,910 --> 00:04:44,060 So what's the deployment process? 61 00:04:44,070 --> 00:04:48,250 Of course it all starts with us developing, with us writing our code, 62 00:04:48,270 --> 00:04:51,170 that's what we did so far throughout the course. 63 00:04:51,210 --> 00:04:52,740 We also want to test our code, 64 00:04:52,740 --> 00:04:54,720 we want to make sure it's error free, 65 00:04:54,750 --> 00:04:55,620 it's secure, 66 00:04:55,620 --> 00:04:56,810 it has no bugs, 67 00:04:56,850 --> 00:05:02,160 that's also what we did throughout this course, we continuously went back into the browser and tested 68 00:05:02,160 --> 00:05:03,210 our code there. 69 00:05:03,210 --> 00:05:05,710 So this is also an iterative process here, 70 00:05:05,730 --> 00:05:07,260 we write code, we test it, 71 00:05:07,260 --> 00:05:09,870 we go back, fix bugs and so on. 72 00:05:09,890 --> 00:05:13,040 Now once we're done with all of that, we can do some optimizations, 73 00:05:13,170 --> 00:05:16,900 we can write fallbacks to offer a good browser support, 74 00:05:16,920 --> 00:05:19,650 we want to look up the browser support we need. 75 00:05:19,650 --> 00:05:26,460 We also use build tools like Babel together with webpack to optimize and shrink our code and add potential 76 00:05:26,460 --> 00:05:30,870 polyfills which we need. Then we can build for production, typically 77 00:05:30,870 --> 00:05:37,800 also with the help of webpack which then shrinks our code even more, which shortens the function names 78 00:05:37,830 --> 00:05:39,240 in the code it outputs 79 00:05:39,240 --> 00:05:45,720 so that we ship and deploy as small of a code package as possible. For the code that runs in the browsers 80 00:05:45,720 --> 00:05:46,530 of our users, 81 00:05:46,530 --> 00:05:51,780 that's important so that the application there is able to start up as quick as possible, so that the 82 00:05:51,780 --> 00:05:57,650 code there is loaded as quick as possible and we're not causing any unnecessary delays and therefore 83 00:05:57,670 --> 00:05:59,490 a bad user experience. 84 00:05:59,490 --> 00:06:05,160 Now this is also an iterative process you could say because you might want to optimize your code, optimize 85 00:06:05,160 --> 00:06:10,680 performance, something we'll have a look at the performance optimization module and then you want to 86 00:06:10,710 --> 00:06:17,130 test it again in production, so build your code for production, test it locally on a server and so on 87 00:06:17,130 --> 00:06:21,670 and once you're fully happy with the result, you deploy the output, 88 00:06:21,690 --> 00:06:26,480 so the built and optimized code, you now take that and put it onto a server. 89 00:06:26,640 --> 00:06:32,970 Now important, this here all applies to the scenario where we have client side Javascript code, 90 00:06:33,030 --> 00:06:38,340 so code that runs in the browser. For our server side, our Node.js code, 91 00:06:38,520 --> 00:06:43,890 you could actually say that the optimization and build for production part is not that important because 92 00:06:43,890 --> 00:06:50,010 since you ship it on your server and users never will download this code, it doesn't need to be as small 93 00:06:50,010 --> 00:06:51,060 as possible, 94 00:06:51,090 --> 00:06:56,510 it can be bigger, it doesn't have to be optimized because it's just running on your server which is super 95 00:06:56,510 --> 00:07:01,300 fast typically and you save the time where the code would need to be downloaded. 96 00:07:01,320 --> 00:07:07,560 So this all applies to the code which runs on a client, not all of that, specifically not the optimization 97 00:07:07,560 --> 00:07:13,100 and build for production part applies to server side code, at least not to the same extent. 98 00:07:13,110 --> 00:07:19,170 So now with that, let's have a look at that process in practice by having a look at both deployment scenarios - 99 00:07:19,920 --> 00:07:21,320 deploying a static app, 100 00:07:21,330 --> 00:07:27,090 so this left case and deploying app with server side code, this right scenario here.