1
00:00:04,930 --> 00:00:10,990
Now, as we are done with creation of Docker files both for front end and API services, let me talk

2
00:00:10,990 --> 00:00:19,300
about importance of presence of such folders as node modules and don't the envy in our application folders.

3
00:00:19,300 --> 00:00:21,190
You are in the Images Gallery project.

4
00:00:22,160 --> 00:00:28,190
You already understand that container file system is completely different from the files that we have

5
00:00:28,190 --> 00:00:28,460
now.

6
00:00:28,640 --> 00:00:30,710
You're inside of the Images Gallery project.

7
00:00:31,250 --> 00:00:34,800
There we have two different subfolders API and front end.

8
00:00:35,630 --> 00:00:41,750
But during build process for the API service, we call all those goldens of this folder to the image.

9
00:00:42,290 --> 00:00:43,580
Similarly, we did.

10
00:00:43,580 --> 00:00:50,060
For front and image, we put all those files to the image and inside of the image.

11
00:00:50,180 --> 00:00:56,750
We installed all necessary dependencies using npm and no inside of the front and container.

12
00:00:56,990 --> 00:01:01,130
There is more modules folder and we just verify that in the previous lecture.

13
00:01:01,790 --> 00:01:08,330
But now inside of the front end folder here in our Project Load Modules folder is absent because I asked

14
00:01:08,330 --> 00:01:09,170
you to remove it.

15
00:01:09,710 --> 00:01:14,840
And no, let me explain to your practice which consequences it might help for heroes of development

16
00:01:14,930 --> 00:01:18,530
if there was no node modules folder inside of the front and folder.

17
00:01:19,550 --> 00:01:25,970
First of all, please notice that, no, I am running out front end application in the web browser because

18
00:01:25,970 --> 00:01:29,060
all necessary dependencies are inside of the container.

19
00:01:29,450 --> 00:01:33,380
And though this container is actually serving this web page.

20
00:01:34,040 --> 00:01:39,950
But what happens if you try to run front and application no directly from the terminal in the Visual

21
00:01:39,950 --> 00:01:42,170
Studio code, not using Docker container?

22
00:01:42,650 --> 00:01:43,610
Let's try to do that.

23
00:01:44,000 --> 00:01:50,330
Let's open up a better terminal here and let me go out from the API folder and let me go to front and

24
00:01:50,330 --> 00:01:55,610
folder like that and he'll let's try to start react application using npm start.

25
00:01:55,730 --> 00:01:57,080
Same as we did before.

26
00:01:58,130 --> 00:02:00,890
And beams start, and I see her error.

27
00:02:01,250 --> 00:02:02,370
Error is falling.

28
00:02:02,450 --> 00:02:03,560
Let me scroll a bit up.

29
00:02:03,770 --> 00:02:06,560
Error is our scripts command not found.

30
00:02:07,220 --> 00:02:14,090
Application was not started due to absence of the React Scripts executable file and previously such

31
00:02:14,090 --> 00:02:21,350
executable as React Scripts was located inside of the Node Modules folder in the front and folder and

32
00:02:21,350 --> 00:02:21,860
there was.

33
00:02:21,860 --> 00:02:26,480
This would be in the folder with all executable files, including React scripts.

34
00:02:27,170 --> 00:02:33,500
And of course, now when node modules folder is absent here, you will be able to run applications like

35
00:02:33,500 --> 00:02:39,920
that like we did before this first issue that you have if there was no node modules folder in the front

36
00:02:39,920 --> 00:02:40,790
and application.

37
00:02:41,740 --> 00:02:43,150
Second problem is, follow me.

38
00:02:43,660 --> 00:02:49,960
Let me go, for instance, to SLC folder and open up of the file and look at that here.

39
00:02:50,110 --> 00:02:57,520
We imported, for instance, your state from the React Library and React module was actually installed

40
00:02:57,520 --> 00:03:02,110
as an dependency and it was available in Sadhus and Load Modules folder.

41
00:03:02,830 --> 00:03:05,080
If I hover, mouse now overreact.

42
00:03:05,500 --> 00:03:12,730
I see that the BioScope recognizes that it is a module, but both for this module is full user Bogden

43
00:03:12,730 --> 00:03:15,490
Library Caches, TypeScript and so on.

44
00:03:16,420 --> 00:03:24,010
It means that now the escort resolved name of this module to the module located in case in the library.

45
00:03:24,790 --> 00:03:31,030
And of course, not always such module will be present in such GIFs, I guess could be deleted or written

46
00:03:31,030 --> 00:03:31,660
and so on.

47
00:03:32,440 --> 00:03:39,730
Same applies, for instance, to React Bootstrap module BioScope has resolved it, but it found it also

48
00:03:39,730 --> 00:03:42,370
in the cache folder and this way?

49
00:03:42,400 --> 00:03:47,950
No, if I try, for instance, to import something from React Bootstrap like we did here, let me add

50
00:03:47,950 --> 00:03:50,110
here comma and try to start typing.

51
00:03:50,110 --> 00:03:53,440
For instance, button, you'll see suggestions from BioScope.

52
00:03:53,680 --> 00:04:00,280
It means that IntelliSense works correctly because this module was found somewhere on the computer.

53
00:04:00,850 --> 00:04:06,880
But again, it is not located inside of the front end folder, and you should have all modules that

54
00:04:06,880 --> 00:04:13,200
you are using in your application in order to be able to correctly use all IntelliSense features in

55
00:04:13,210 --> 00:04:15,760
video scored or any other code editor.

56
00:04:16,120 --> 00:04:22,360
This way, if you want to continue development of your project on such computer, you must install node

57
00:04:22,360 --> 00:04:24,940
modules folder using an install command.

58
00:04:25,780 --> 00:04:31,270
And let's not go ahead and do that and see how your module resolution will be changed.

59
00:04:31,990 --> 00:04:35,980
Let's open up time and old back again and in the front end folder.

60
00:04:36,280 --> 00:04:40,390
Make sure that you are in the front and folder type and beam install.

61
00:04:41,020 --> 00:04:46,420
Let's go ahead and install all dependencies, and they will be installed now in our project folder.

62
00:04:46,540 --> 00:04:48,430
Note inside I was a Docker container.

63
00:04:48,610 --> 00:04:48,970
They are.

64
00:04:48,970 --> 00:04:51,070
We already have node modules folder.

65
00:04:52,000 --> 00:04:57,520
All right, all npm modules were installed and the No Node Modules folder or should appear here in the

66
00:04:57,520 --> 00:04:58,480
front and folder.

67
00:04:58,600 --> 00:05:05,890
Let me refresh your files view and yes, now I see here node modules folder with all necessary subfolders.

68
00:05:06,340 --> 00:05:07,120
And also no.

69
00:05:07,120 --> 00:05:12,940
There was again load bin folder with all executables that I'm able to run, though inside of the front

70
00:05:12,940 --> 00:05:14,780
and application rate.

71
00:05:15,160 --> 00:05:19,880
No less Hormel's at the React module and now I see that to be a scored.

72
00:05:19,900 --> 00:05:25,840
As a result, this module pulls a module located in the node modules folder in the front and folder

73
00:05:26,230 --> 00:05:27,970
and this correct behavior.

74
00:05:28,720 --> 00:05:31,840
Same applies, for instance, to React Bootstrap module.

75
00:05:32,100 --> 00:05:38,200
It is also resolved to the React Bootstrap module in the Node Modules folder in the front and application.

76
00:05:39,010 --> 00:05:44,920
And of course, now I'm able to run our applications same as I did before using and start command.

77
00:05:45,310 --> 00:05:50,410
But I will do it now because I'm already running front and application inside of the container.

78
00:05:51,160 --> 00:05:57,040
But I hope you got an idea and now you understand why we need to have a node modules folder both here

79
00:05:57,040 --> 00:05:59,200
in our application and inside.

80
00:05:59,200 --> 00:06:00,040
It was a container.

81
00:06:01,430 --> 00:06:08,900
Please note is that same applies to the API folder there we created both V and the folder, and there

82
00:06:08,900 --> 00:06:16,550
are all necessary files, including all dependencies of our Python project, such as flask and others.

83
00:06:17,030 --> 00:06:18,230
They are listed here.

84
00:06:18,920 --> 00:06:26,570
And this way we were able to run our service locally on our computers inside of the EPA folder due to

85
00:06:26,570 --> 00:06:29,630
presence of these in the environment.

86
00:06:30,560 --> 00:06:37,280
And if I delete this beautiful environment folder now, I will be able to start EPA service any more

87
00:06:37,280 --> 00:06:39,290
locally, not inside of the container.

88
00:06:39,830 --> 00:06:43,430
And the reason is exactly the same as for front and application.

89
00:06:44,150 --> 00:06:50,270
There will be no mystery executable files inside of the EPA folder in correspondence computer environment.

90
00:06:50,570 --> 00:06:53,900
That's why we need to have packages that our API is said.

91
00:06:53,900 --> 00:06:58,940
It was depends on both locally, on our computers and inside all the containers.

92
00:06:59,900 --> 00:07:01,970
Also, same as for no just project.

93
00:07:01,970 --> 00:07:07,640
You need the all packages on your local computer in order to make the escort IntelliSense work correctly.

94
00:07:07,910 --> 00:07:12,410
For instance, on this line from flask module, we import flask and request.

95
00:07:12,860 --> 00:07:18,140
And if you Hormel's over a flask, you see that the escort recognizes such module flask.

96
00:07:18,530 --> 00:07:23,480
And again, it's very important to understand the dependencies on your local computer.

97
00:07:23,720 --> 00:07:28,430
Inside of your project are different from dependencies inside of the Docker containers.

98
00:07:29,240 --> 00:07:34,910
Docker containers must be able to run independently, fully isolated this way.

99
00:07:34,940 --> 00:07:42,440
We installed all necessary dependencies inside of the images, both for API project and front end project.

100
00:07:43,700 --> 00:07:44,110
All right.

101
00:07:44,330 --> 00:07:50,090
That's it for this lecture and the next one, let me explain to you how you are able to run containers

102
00:07:50,240 --> 00:07:56,540
in the detached mode because now we are running API container and front end container in separate depths

103
00:07:56,540 --> 00:07:56,920
here.

104
00:07:57,530 --> 00:07:59,180
I'll see you guys just in a moment.