1 00:00:02,130 --> 00:00:04,480 We have that unequal setup 2 00:00:04,480 --> 00:00:08,520 at least partially decoded right will be the same one 3 00:00:08,520 --> 00:00:10,680 but the way we run it, differs. 4 00:00:10,680 --> 00:00:13,340 And for example, for this React app 5 00:00:13,340 --> 00:00:16,150 we have this difference between what we have 6 00:00:16,150 --> 00:00:18,610 during development, this development server 7 00:00:18,610 --> 00:00:21,200 which also has life reloading to reload 8 00:00:21,200 --> 00:00:23,170 the page whenever we change the code 9 00:00:23,170 --> 00:00:26,660 which is nice, but not something we need in production. 10 00:00:26,660 --> 00:00:29,450 And then we have what we want in production. 11 00:00:29,450 --> 00:00:33,810 We have our finished code, which is good to have 12 00:00:33,810 --> 00:00:36,620 but which doesn't bring its own server. 13 00:00:36,620 --> 00:00:37,750 And that is generated 14 00:00:37,750 --> 00:00:40,410 with help of a build step, a bill script 15 00:00:40,410 --> 00:00:43,340 which is this build script here, which we can execute 16 00:00:43,340 --> 00:00:45,590 with NPM run build. 17 00:00:45,590 --> 00:00:47,410 So that's what we have. 18 00:00:47,410 --> 00:00:49,690 And that's of course not what you want 19 00:00:49,690 --> 00:00:53,140 because it's dot like this can't be deployed. 20 00:00:53,140 --> 00:00:57,100 So let's now find out how we can still utilize features 21 00:00:57,100 --> 00:00:59,590 Docker gives us to make sure 22 00:00:59,590 --> 00:01:01,700 that we don't just have a container 23 00:01:01,700 --> 00:01:05,850 for development, which allows us to test this application 24 00:01:05,850 --> 00:01:07,260 but also a container 25 00:01:07,260 --> 00:01:12,260 for production, which allows us to deploy this application. 26 00:01:12,360 --> 00:01:16,950 So our React app basically needs to be executed differently 27 00:01:16,950 --> 00:01:20,080 in development and in production. 28 00:01:20,080 --> 00:01:22,220 And therefore we'll have to set 29 00:01:22,220 --> 00:01:24,000 up two different environments 30 00:01:24,000 --> 00:01:27,170 because our reactor forces us to do so. 31 00:01:27,170 --> 00:01:29,500 It's also worth keeping in mind that 32 00:01:29,500 --> 00:01:31,820 we, for example, only need node 33 00:01:31,820 --> 00:01:35,170 in development because that's development server 34 00:01:35,170 --> 00:01:39,250 which has started with NPM start is actually a node server 35 00:01:39,250 --> 00:01:41,050 under the hood. 36 00:01:41,050 --> 00:01:43,810 In production if we won't need node 37 00:01:43,810 --> 00:01:45,490 unless we wanna build our own 38 00:01:45,490 --> 00:01:49,280 node server that serves the finished JavaScript files 39 00:01:49,280 --> 00:01:52,220 and the finished front end web application because 40 00:01:52,220 --> 00:01:53,940 of JavaScript code itself 41 00:01:53,940 --> 00:01:56,810 which we build with react is not dependent 42 00:01:56,810 --> 00:02:01,060 on node is not executed with node JS. 43 00:02:01,060 --> 00:02:03,840 So that's one important difference to keep in mind. 44 00:02:03,840 --> 00:02:06,250 And therefore what I'll do is I will 45 00:02:06,250 --> 00:02:10,293 add a second Dockerfile and I'll name it, Dockerfile.prod. 46 00:02:11,130 --> 00:02:12,440 Now the name is up to you. 47 00:02:12,440 --> 00:02:16,800 I just wanna indicate that this is my production Dockerfile 48 00:02:16,800 --> 00:02:19,910 and this is my development Dockerfile. 49 00:02:20,940 --> 00:02:24,450 Now the Dockerfile.prod file will 50 00:02:24,450 --> 00:02:26,700 have all the instructions we need 51 00:02:26,700 --> 00:02:30,250 to create a web server that serves these built 52 00:02:30,250 --> 00:02:33,340 and optimized Java script files. 53 00:02:33,340 --> 00:02:36,000 And of course the big problem here will be 54 00:02:36,000 --> 00:02:39,730 that we therefore don't just need to run 55 00:02:39,730 --> 00:02:42,990 NPM run build to generate these files 56 00:02:42,990 --> 00:02:46,150 but that we also need to bring our own server 57 00:02:46,150 --> 00:02:47,550 which serves them 58 00:02:47,550 --> 00:02:50,060 because again with just build, 59 00:02:50,060 --> 00:02:52,880 we don't get a server, start brings one 60 00:02:52,880 --> 00:02:56,650 but it's just this unoptimized development server. 61 00:02:56,650 --> 00:03:00,020 Now, nonetheless, let's first of all, build all of that. 62 00:03:00,020 --> 00:03:05,020 And for this, we can generally copy our Dockerfile set up 63 00:03:05,050 --> 00:03:08,370 from the main Dockerfile into the prod file. 64 00:03:08,370 --> 00:03:12,470 Maybe switch to a special node image 65 00:03:12,470 --> 00:03:17,470 the 14-alpine image maybe, to use a smaller one 66 00:03:18,110 --> 00:03:21,830 which has everything we need, but is less to download. 67 00:03:21,830 --> 00:03:24,380 But besides that we set the working directory. 68 00:03:24,380 --> 00:03:29,380 We copy package.json, we install all our dependencies. 69 00:03:29,810 --> 00:03:33,390 We copy over our code into the image 70 00:03:33,390 --> 00:03:37,463 but then here the last two steps that will differ. 71 00:03:38,380 --> 00:03:40,470 We won't expose any port 72 00:03:40,470 --> 00:03:44,640 because here we won't start any service. 73 00:03:44,640 --> 00:03:49,170 Instead here, I wanna run this build script here 74 00:03:50,160 --> 00:03:54,950 and we can do this by calling NPM, run, build here. 75 00:03:54,950 --> 00:03:58,030 So I wanna execute this command and we need to run here. 76 00:03:58,030 --> 00:04:00,790 We can't just do NPM build 77 00:04:00,790 --> 00:04:04,630 because that's how the package.json file and NPM works. 78 00:04:04,630 --> 00:04:07,700 The start script is effectively a special script 79 00:04:07,700 --> 00:04:11,750 which we can execute with just NPN start for other scripts 80 00:04:11,750 --> 00:04:15,450 we need to execute them with the NPM run command. 81 00:04:15,450 --> 00:04:18,800 And therefore we now run the build command here 82 00:04:18,800 --> 00:04:21,300 when this container is created 83 00:04:21,300 --> 00:04:24,063 when this image is instantiated as a container, 84 00:04:25,090 --> 00:04:26,493 but as I mentioned, this 85 00:04:26,493 --> 00:04:31,493 can't be all because this now gives us the optimized files. 86 00:04:31,860 --> 00:04:33,840 But if we wanna use this container 87 00:04:33,840 --> 00:04:37,640 in production, we don't just need the finished files. 88 00:04:37,640 --> 00:04:40,870 We also need a server that serves them. 89 00:04:40,870 --> 00:04:45,263 And for this, let me introduce you to Multi-Stage Builds.