1 00:00:04,530 --> 00:00:07,920 Let us know, Darius, our front and react application. 2 00:00:08,160 --> 00:00:14,340 And we will do that in a similar way as we have done that for a service, we will create Docker file 3 00:00:14,340 --> 00:00:14,750 and put. 4 00:00:14,820 --> 00:00:20,240 There are several instructions as a ways in which we will use more the GC image. 5 00:00:20,520 --> 00:00:24,030 Please go to have the Docker dot com and source here for Node. 6 00:00:24,660 --> 00:00:30,750 Click on Source Search Result and you'll find Docker official image gold note. 7 00:00:31,230 --> 00:00:35,040 If you scroll down here, you'll find which tags are supported. 8 00:00:35,220 --> 00:00:41,670 And here was a long, long list of text, and I'll choose last Node.js version available at this moment 9 00:00:41,670 --> 00:00:46,020 of time and the IS 15. 14.0 you could choose as well. 10 00:00:46,230 --> 00:00:51,330 Or you could go ahead with newer version and notice that for the same version, there are different 11 00:00:51,480 --> 00:00:57,180 suffixes like Alpine Master Bastos, Slim Ostrich and Low Lay. 12 00:00:57,180 --> 00:01:03,960 The stack points actually to the stretch version, but we will actually utilize Alpine version because 13 00:01:03,960 --> 00:01:10,200 Alpine is the smallest Norges image oil Docker hub and it will be enough for our purposes. 14 00:01:10,590 --> 00:01:12,780 So I'll go ahead with this stack. 15 00:01:12,780 --> 00:01:17,460 15. fought in this alpine and it will be our base image. 16 00:01:18,090 --> 00:01:21,870 So let's go to gold and the go to all front end application. 17 00:01:22,020 --> 00:01:25,520 Let me actually close this Docker file and close minded player file. 18 00:01:25,530 --> 00:01:26,640 I don't need them now. 19 00:01:26,820 --> 00:01:30,570 And let's modify it folder and expand front and folder. 20 00:01:30,900 --> 00:01:36,660 And here in the root of the front and folder, let's create a Docker file Docker file. 21 00:01:37,350 --> 00:01:42,870 And similarly, as we did in Docker file for API service, Thorson's fraction here will be from. 22 00:01:43,410 --> 00:01:48,540 And here we specify ways in which we want to build our custom image on. 23 00:01:49,110 --> 00:01:52,520 So let's hear Edenfield colon and deck. 24 00:01:52,530 --> 00:02:02,640 We'll be 15. Fraud in this Alpine 15. for this Alpine like did this first step in our Docker build process 25 00:02:03,360 --> 00:02:07,890 on the next step, let's set a working directory similarly, as we did for API service. 26 00:02:08,100 --> 00:02:12,000 And let's set here same folder less op like that. 27 00:02:12,480 --> 00:02:14,970 It is internal folder inside of the image. 28 00:02:15,210 --> 00:02:19,590 And here in this folder, Docker will place all our application files. 29 00:02:20,100 --> 00:02:27,000 All right, let's afterwords expose fraud using exposed instruction, and our front end application 30 00:02:27,000 --> 00:02:28,950 is run at Port three thousand. 31 00:02:29,130 --> 00:02:33,140 This way, let's expose this brought here three thousand like that. 32 00:02:33,720 --> 00:02:39,870 After world, we need to install all project dependencies using npm, as we did in front end application. 33 00:02:40,020 --> 00:02:46,710 For that, we used command npm install, and it created such folder as node modules folder with all 34 00:02:46,710 --> 00:02:51,690 dependencies of the front and application in order to install all dependencies. 35 00:02:51,840 --> 00:02:58,350 First, we need to copy it to files, namely package, but Jason and Package this logged the Jason to 36 00:02:58,350 --> 00:02:59,040 the image. 37 00:02:59,460 --> 00:03:06,870 This way, first, let's use here copy instruction copy and on the single line, let's go to files package 38 00:03:06,870 --> 00:03:14,640 to JSON and package this look the JSON, and let's copy them to destination working directory inside 39 00:03:14,640 --> 00:03:17,580 of the image using DOT for what's less syntax. 40 00:03:18,300 --> 00:03:18,720 All right. 41 00:03:18,990 --> 00:03:24,780 After the step two files will be inside of the image and we are able to run npm install a command. 42 00:03:25,110 --> 00:03:29,580 That's why let's use Orion instruction and run npm install. 43 00:03:29,970 --> 00:03:36,390 And also, let's add here option for npm gold does the silent because usually npm generates a lot of 44 00:03:36,390 --> 00:03:41,940 output during installation of the packages and during the build process, you could simply omit all 45 00:03:41,940 --> 00:03:45,260 those logs using this option, this desk silent. 46 00:03:45,930 --> 00:03:54,120 So after this around step, all dependencies will be installed inside of the image node modules folder. 47 00:03:54,120 --> 00:04:01,400 Inside of the image will be created and npm will install all dependencies listed here in the package. 48 00:04:01,410 --> 00:04:06,810 Look, Jason, the file we own the copy package, this logo, the Jason the file, because it lists 49 00:04:06,810 --> 00:04:10,560 exact versions of all dependencies that need to be installed. 50 00:04:10,980 --> 00:04:16,350 And this way, npm will install inside of the Docker image exactly the same packages as we've installed 51 00:04:16,350 --> 00:04:20,970 locally in our front end application here in this node modules folder. 52 00:04:21,420 --> 00:04:24,330 So dependencies will be installed on this step. 53 00:04:24,570 --> 00:04:31,380 And afterwards, let's copy all remaining application files using syntax Scorpion Dorte from current 54 00:04:31,380 --> 00:04:34,080 folder to destination working directory. 55 00:04:34,740 --> 00:04:39,110 And after this step, all files from all front end folder. 56 00:04:39,270 --> 00:04:46,380 Both files will be copied to Destination Up folder inside of the image, and there we will have afterwords 57 00:04:46,380 --> 00:04:49,780 such folder as our Aussie public and others. 58 00:04:50,580 --> 00:04:56,280 All right, this are all steps that we need to build image and of course, afterwards, at the end of 59 00:04:56,280 --> 00:05:02,670 this Docker file, we need to add some deconstruction and tell which brought us needs to be started. 60 00:05:02,760 --> 00:05:04,020 When a container is. 61 00:05:04,140 --> 00:05:11,670 We it based on this custom image, and we started our React application using npm start command. 62 00:05:12,000 --> 00:05:17,410 And basically, I have front and application up and running now in this step in the terminal, and it 63 00:05:17,410 --> 00:05:22,650 does run at Port three thousand and I could quickly go to web browser and verify whether it works or 64 00:05:22,650 --> 00:05:22,920 not. 65 00:05:23,190 --> 00:05:24,060 Yes, it works. 66 00:05:24,420 --> 00:05:26,340 And now let me actually stop. 67 00:05:26,340 --> 00:05:27,520 This brought us here. 68 00:05:27,580 --> 00:05:34,170 Control see and to gain command that was used in order to start this application was npm start and this 69 00:05:34,170 --> 00:05:37,140 comment or react application in development mode. 70 00:05:37,320 --> 00:05:40,050 And that's actually what we need Docker containers for. 71 00:05:40,230 --> 00:05:43,980 We want to continue for the development using Docker containers. 72 00:05:44,310 --> 00:05:50,970 That's why we will use npm struct as command instruction and the Docker file for our React application. 73 00:05:51,480 --> 00:06:00,300 Let's go back to Docker file here and add here instruction npm karma start and VM is executable. 74 00:06:00,300 --> 00:06:03,870 Name and start is parameter for this executable. 75 00:06:04,260 --> 00:06:11,400 And of course, such executable as npm is available here in this image because we use node as a base 76 00:06:11,400 --> 00:06:11,880 image. 77 00:06:12,720 --> 00:06:13,170 All right. 78 00:06:13,440 --> 00:06:17,220 This ID fraud Docker file for our front end React application. 79 00:06:17,550 --> 00:06:19,210 And next up to the small balls. 80 00:06:19,230 --> 00:06:24,180 Let's go ahead and build our custom front and react Docker image. 81 00:06:24,360 --> 00:06:25,920 I'll see you guys just in a moment.