1 00:00:02,200 --> 00:00:03,850 Some applications 2 00:00:03,850 --> 00:00:07,220 or some projects require a build step. 3 00:00:07,220 --> 00:00:11,620 That simply means that we run code in development 4 00:00:11,620 --> 00:00:14,870 which is not to code we're going to deploy later 5 00:00:14,870 --> 00:00:19,200 because it might need to be transformed or optimized. 6 00:00:19,200 --> 00:00:21,060 And this is typically the case 7 00:00:21,060 --> 00:00:24,730 if we build web applications that run in the browser. 8 00:00:24,730 --> 00:00:28,290 So if we are working with code JavaScript code 9 00:00:28,290 --> 00:00:29,790 that runs in the browser, 10 00:00:29,790 --> 00:00:32,493 for example in our React application. 11 00:00:33,330 --> 00:00:36,550 There, we have differences between our development 12 00:00:36,550 --> 00:00:38,330 and our production setup. 13 00:00:38,330 --> 00:00:40,530 They are not equal. 14 00:00:40,530 --> 00:00:45,060 And we won't be able to fix this with Docker alone 15 00:00:45,060 --> 00:00:49,330 because it's inherent to this kind of project. 16 00:00:49,330 --> 00:00:51,320 Let me give you an example. 17 00:00:51,320 --> 00:00:54,620 Our front end here is a React application. 18 00:00:54,620 --> 00:00:58,800 Other popular web frameworks would be Angular or Vue 19 00:00:58,800 --> 00:01:00,590 and they all have in common 20 00:01:00,590 --> 00:01:03,730 that we use them to build websites 21 00:01:03,730 --> 00:01:06,990 where the majority of work is done in the browser 22 00:01:06,990 --> 00:01:10,090 with browser site JavaScript code. 23 00:01:10,090 --> 00:01:13,020 Now for building these front end web applications 24 00:01:13,020 --> 00:01:15,230 we typically use Syntax 25 00:01:15,230 --> 00:01:18,670 which isn't support just like that in the browser. 26 00:01:18,670 --> 00:01:22,080 For example, in React, even if you don't know React 27 00:01:22,080 --> 00:01:25,250 I can tell you that we got JavaScript files 28 00:01:25,250 --> 00:01:28,990 which have some HTML mixed into them. 29 00:01:28,990 --> 00:01:31,870 This syntax is called JSX 30 00:01:31,870 --> 00:01:35,640 and it was basically introduced by React 31 00:01:35,640 --> 00:01:38,390 and it's not running like this in the browser 32 00:01:38,390 --> 00:01:42,920 instead, this is code, which is transformed 33 00:01:42,920 --> 00:01:46,210 compiled you could say, by some script 34 00:01:46,210 --> 00:01:49,290 which runs in the background during development 35 00:01:49,290 --> 00:01:53,200 to code which is executable by the browser. 36 00:01:53,200 --> 00:01:56,450 This is just code, which we write during development 37 00:01:56,450 --> 00:01:58,680 since it's easier for us to write 38 00:01:58,680 --> 00:02:01,690 then the code to which it will be compiled. 39 00:02:01,690 --> 00:02:04,820 Now the browser, again, just to make this really clear 40 00:02:04,820 --> 00:02:07,300 won't run this code, it's transformed. 41 00:02:07,300 --> 00:02:09,280 And this transformation happens 42 00:02:09,280 --> 00:02:11,590 behind the scenes during development 43 00:02:11,590 --> 00:02:16,070 when we run this NPM start script 44 00:02:16,070 --> 00:02:21,030 this start script here, which we do execute locally. 45 00:02:21,030 --> 00:02:23,400 It is defined in our Docker file 46 00:02:23,400 --> 00:02:26,270 that we start this container with NPM start. 47 00:02:26,270 --> 00:02:30,330 This NPM start script uses a third party package 48 00:02:30,330 --> 00:02:32,310 that reacts-scripts package 49 00:02:32,310 --> 00:02:35,200 which then has a start script as it seems, 50 00:02:35,200 --> 00:02:38,520 which in the end will compile, transform 51 00:02:38,520 --> 00:02:42,210 this code to browser friendly code. 52 00:02:42,210 --> 00:02:43,740 And it will not just do that, 53 00:02:43,740 --> 00:02:45,860 it will also transform other code 54 00:02:45,860 --> 00:02:47,600 it will optimize the code, 55 00:02:47,600 --> 00:02:50,800 shrink it to make it as small as possible 56 00:02:50,800 --> 00:02:53,960 and do a bunch of other things. 57 00:02:53,960 --> 00:02:57,950 In addition, this start script here, 58 00:02:57,950 --> 00:02:59,260 whoops, this hear 59 00:02:59,260 --> 00:03:02,630 this start script here also starts 60 00:03:02,630 --> 00:03:05,100 a so-called development server. 61 00:03:05,100 --> 00:03:06,900 Which is a basic web server 62 00:03:06,900 --> 00:03:09,970 that serves this front end application. 63 00:03:09,970 --> 00:03:12,460 Because this front end application 64 00:03:12,460 --> 00:03:15,500 is really just that, it's a web application 65 00:03:15,500 --> 00:03:19,040 which is meant to be executed in the browser. 66 00:03:19,040 --> 00:03:20,750 Now to reach the browser, 67 00:03:20,750 --> 00:03:23,120 it needs to be served by a server 68 00:03:23,120 --> 00:03:25,340 and this front end folder 69 00:03:25,340 --> 00:03:28,370 contains no, server side code. 70 00:03:28,370 --> 00:03:32,490 Therefore it brings its own mini development web server 71 00:03:32,490 --> 00:03:35,420 which in the end just serves this index HTML file 72 00:03:35,420 --> 00:03:37,810 in the public folder, which then in turn 73 00:03:37,810 --> 00:03:41,310 imports, this transform to JavaScript code. 74 00:03:41,310 --> 00:03:43,230 That's how this project works. 75 00:03:43,230 --> 00:03:46,120 And that's how all these front end 76 00:03:46,120 --> 00:03:48,340 web app projects typically work. 77 00:03:48,340 --> 00:03:50,660 No matter if you're building them with React, 78 00:03:50,660 --> 00:03:52,600 Angular or Vue. 79 00:03:52,600 --> 00:03:54,650 And therefore in projects like this, 80 00:03:54,650 --> 00:03:58,810 we can't just take this development container 81 00:03:58,810 --> 00:04:00,780 and move it to production. 82 00:04:00,780 --> 00:04:02,740 Because this development server 83 00:04:02,740 --> 00:04:06,990 started by NPM start is not meant to run in production. 84 00:04:06,990 --> 00:04:08,950 It's not optimized for that 85 00:04:08,950 --> 00:04:12,630 and also this entire file compilation process 86 00:04:12,630 --> 00:04:14,900 would use way too many resources 87 00:04:14,900 --> 00:04:18,040 and would be way too slow to be used in production. 88 00:04:18,040 --> 00:04:21,670 It's really just meant to be used during development. 89 00:04:21,670 --> 00:04:25,600 Now for production, this React project 90 00:04:25,600 --> 00:04:28,560 and all similar projects do that as well 91 00:04:28,560 --> 00:04:31,490 brings its own build script 92 00:04:31,490 --> 00:04:34,130 which we can run instead of start. 93 00:04:34,130 --> 00:04:37,280 Build will not start any server 94 00:04:37,280 --> 00:04:41,680 but it will do this code compilation and optimization 95 00:04:41,680 --> 00:04:45,960 and spit out these transformed and optimized files 96 00:04:45,960 --> 00:04:48,650 so that we can then serve them ourselves 97 00:04:48,650 --> 00:04:52,030 with help of any web server of our choice. 98 00:04:52,030 --> 00:04:55,340 So we then get the files, but not the server. 99 00:04:55,340 --> 00:04:57,370 And that's the issue we'll have here. 100 00:04:57,370 --> 00:05:00,120 This start script gives us a running server 101 00:05:00,120 --> 00:05:02,370 but it's not great for production. 102 00:05:02,370 --> 00:05:03,650 This built script 103 00:05:03,650 --> 00:05:07,200 at least gives us the finished JavaScript code 104 00:05:07,200 --> 00:05:09,170 but it doesn't give us a server. 105 00:05:09,170 --> 00:05:11,750 So just running built in a Docker file 106 00:05:11,750 --> 00:05:14,540 as a final command, won't be the solution 107 00:05:14,540 --> 00:05:17,660 because this will just generate a bunch of files, 108 00:05:17,660 --> 00:05:21,310 but not start any process that would be reachable 109 00:05:21,310 --> 00:05:24,180 by a HTTP request. 110 00:05:24,180 --> 00:05:25,930 And there for we'll have to find a way 111 00:05:25,930 --> 00:05:27,600 of building a Docker file 112 00:05:27,600 --> 00:05:30,570 which actually can be used to build a container 113 00:05:30,570 --> 00:05:33,033 that runs this application in production.