1
00:00:02,250 --> 00:00:04,130
So now that we finished the MongoDB

2
00:00:04,130 --> 00:00:06,080
and the backend container,

3
00:00:06,080 --> 00:00:08,730
let's also talk about the frontend container again,

4
00:00:08,730 --> 00:00:11,440
the React single-page application here.

5
00:00:11,440 --> 00:00:15,660
Here, we also want to have live source code updates

6
00:00:15,660 --> 00:00:18,050
so that if I change something in my source code,

7
00:00:18,050 --> 00:00:20,963
it's automatically reflected in the running container.

8
00:00:23,590 --> 00:00:25,360
For this, I'll go to the terminal

9
00:00:25,360 --> 00:00:28,340
where my front-end Docker container is running.

10
00:00:28,340 --> 00:00:31,420
And with Control + C, we can exit out of there.

11
00:00:31,420 --> 00:00:32,850
Control + C works here

12
00:00:32,850 --> 00:00:35,100
and not in a Node container, by the way,

13
00:00:35,100 --> 00:00:39,390
because we started this container with the dash it option

14
00:00:39,390 --> 00:00:41,403
for interactive access.

15
00:00:42,260 --> 00:00:45,520
And with that, we now, well, finished that container

16
00:00:45,520 --> 00:00:47,520
and it also was removed.

17
00:00:47,520 --> 00:00:49,460
We only have the node, the backend,

18
00:00:49,460 --> 00:00:52,260
and the MongoDB container running now.

19
00:00:52,260 --> 00:00:55,353
So now I wanna start this container,

20
00:00:55,353 --> 00:00:57,110
this frontend container,

21
00:00:57,110 --> 00:01:01,300
such that my source code is provided in there

22
00:01:01,300 --> 00:01:04,690
and changes are picked up automatically.

23
00:01:04,690 --> 00:01:08,230
And that of course, screams for a bind mount.

24
00:01:08,230 --> 00:01:11,530
I don't need any data persistence or anything like that,

25
00:01:11,530 --> 00:01:14,650
but that bind mount would be nice to have.

26
00:01:14,650 --> 00:01:18,010
So therefore we want to run our container with docker run,

27
00:01:18,010 --> 00:01:22,330
but with dash v, I also wanna bind a volume, a bind mount,

28
00:01:22,330 --> 00:01:26,910
and I wanna bind it to the app folder in the container,

29
00:01:26,910 --> 00:01:28,890
because in this frontend Docker file,

30
00:01:28,890 --> 00:01:31,480
we also have a working directory of app.

31
00:01:31,480 --> 00:01:34,420
But we don't need to bind the entire folder.

32
00:01:34,420 --> 00:01:37,370
We can just bind the source folder

33
00:01:38,270 --> 00:01:41,020
because it actually is the source folder

34
00:01:41,020 --> 00:01:44,633
in which we have our React code on which we typically work.

35
00:01:45,600 --> 00:01:48,660
So I wanna bind to the app source folder

36
00:01:48,660 --> 00:01:52,590
and I wanna bind it to my local host machine path.

37
00:01:52,590 --> 00:01:55,590
So let's get to this path by copying it

38
00:01:55,590 --> 00:01:57,920
from some file in that source folder

39
00:01:57,920 --> 00:02:00,910
in the frontend project folder,

40
00:02:00,910 --> 00:02:02,510
pasting this in here,

41
00:02:02,510 --> 00:02:05,873
adding a colon thereafter, and let's remove that file name.

42
00:02:06,860 --> 00:02:10,430
And now I bind that source folder here

43
00:02:10,430 --> 00:02:13,203
to the source folder in the container.

44
00:02:14,150 --> 00:02:15,710
And that should allow the container

45
00:02:15,710 --> 00:02:18,703
to always be aware of the latest code changes.

46
00:02:19,540 --> 00:02:22,060
Now we don't need node mod here

47
00:02:22,060 --> 00:02:25,470
because the development server this project uses

48
00:02:25,470 --> 00:02:29,620
is already configured to react to file changes

49
00:02:29,620 --> 00:02:32,650
and rebuild the application.

50
00:02:32,650 --> 00:02:35,670
So here we don't need any extra dependency

51
00:02:35,670 --> 00:02:38,690
because this project set up already uses

52
00:02:38,690 --> 00:02:42,453
such a watch the files and reload service.

53
00:02:43,340 --> 00:02:44,900
Hence, if I now hit Enter,

54
00:02:44,900 --> 00:02:48,080
this should start this application,

55
00:02:48,080 --> 00:02:51,230
it should start this development server.

56
00:02:51,230 --> 00:02:55,830
Hence we can reload here, but now if I change something,

57
00:02:55,830 --> 00:03:00,830
for example, in the components folder, goals, CourseGoals,

58
00:03:02,980 --> 00:03:07,420
if I add a h2 tag here above my card

59
00:03:07,420 --> 00:03:11,980
in this course goals section, and I say, your goals.

60
00:03:11,980 --> 00:03:15,610
If I save this, you see, it recompiled down there

61
00:03:16,780 --> 00:03:19,290
and we see your goals here.

62
00:03:19,290 --> 00:03:21,480
Okay, the styling is really off here,

63
00:03:21,480 --> 00:03:23,450
but it's there at least.

64
00:03:23,450 --> 00:03:28,280
We can see it better if I move it into this card component.

65
00:03:28,280 --> 00:03:30,310
By the way, if you don't know React code,

66
00:03:30,310 --> 00:03:31,230
that's no problem,

67
00:03:31,230 --> 00:03:35,580
you can just add this h2 tag in card, save this,

68
00:03:35,580 --> 00:03:36,960
and here we go.

69
00:03:36,960 --> 00:03:40,380
Now I got another note for Windows users,

70
00:03:40,380 --> 00:03:43,630
a note which I also had earlier in the course.

71
00:03:43,630 --> 00:03:45,770
You might see that when you change a file

72
00:03:45,770 --> 00:03:47,740
in your Docker container,

73
00:03:47,740 --> 00:03:50,000
the development server does not reload

74
00:03:50,000 --> 00:03:53,610
and does not pick up these file changes.

75
00:03:53,610 --> 00:03:58,460
This happens if you are using Windows with wsl 2

76
00:03:58,460 --> 00:03:59,860
to run Docker.

77
00:03:59,860 --> 00:04:02,190
Now I attached to find a link to an article

78
00:04:02,190 --> 00:04:06,030
where you learn how to use the Linux file system

79
00:04:06,030 --> 00:04:07,660
on your Windows machine

80
00:04:07,660 --> 00:04:10,720
instead of the regular Windows file system.

81
00:04:10,720 --> 00:04:14,620
And you should create your project and your project files

82
00:04:14,620 --> 00:04:16,820
in that Linux file system

83
00:04:16,820 --> 00:04:19,060
instead of the Windows file system,

84
00:04:19,060 --> 00:04:22,089
because then these changes will be picked up

85
00:04:22,089 --> 00:04:23,900
by the Docker container.

86
00:04:23,900 --> 00:04:26,170
So follow the steps in the article,

87
00:04:26,170 --> 00:04:27,550
which you find attached,

88
00:04:27,550 --> 00:04:30,540
create your project in that Linux file system

89
00:04:30,540 --> 00:04:32,320
and use Docker there.

90
00:04:32,320 --> 00:04:36,330
And then everything should work as shown in the lectures.

91
00:04:36,330 --> 00:04:38,400
So, this now works,

92
00:04:38,400 --> 00:04:40,870
and now we got this live reload

93
00:04:40,870 --> 00:04:43,240
and live source code reflection

94
00:04:43,240 --> 00:04:45,793
in our frontend application as well.

95
00:04:47,070 --> 00:04:48,810
The last thing I wanna do here

96
00:04:48,810 --> 00:04:52,720
is something related to our image building process.

97
00:04:52,720 --> 00:04:55,280
I already mentioned that it takes quite long

98
00:04:55,280 --> 00:04:57,400
for this frontend application.

99
00:04:57,400 --> 00:05:00,760
Part of the reason is that we have more dependencies here

100
00:05:00,760 --> 00:05:04,240
and therefore NPM install simply takes longer.

101
00:05:04,240 --> 00:05:06,910
But another reason for that taking longer

102
00:05:06,910 --> 00:05:11,780
is that we copy everything in our folder into the container

103
00:05:11,780 --> 00:05:13,730
after NPM install.

104
00:05:13,730 --> 00:05:16,830
And here I still have Node modules lying around

105
00:05:16,830 --> 00:05:18,870
locally on my host machine.

106
00:05:18,870 --> 00:05:22,600
So therefore this also gets copied into the container again,

107
00:05:22,600 --> 00:05:24,500
and that takes very long.

108
00:05:24,500 --> 00:05:27,557
It's unnecessary because we already created it

109
00:05:27,557 --> 00:05:30,040
in the container with NPM install.

110
00:05:30,040 --> 00:05:32,160
And it even has the danger

111
00:05:32,160 --> 00:05:35,670
of copying in an outdated Node modules folder,

112
00:05:35,670 --> 00:05:37,970
not using the latest dependencies,

113
00:05:37,970 --> 00:05:40,713
which might've been installed by NPM install.

114
00:05:41,640 --> 00:05:44,190
Of course we can delete Node modules here,

115
00:05:44,190 --> 00:05:46,260
but maybe we're also sometimes working

116
00:05:46,260 --> 00:05:47,820
on this project locally,

117
00:05:47,820 --> 00:05:50,120
and therefore we need it here as well.

118
00:05:50,120 --> 00:05:54,240
The solution then again is a Docker ignore file.

119
00:05:54,240 --> 00:05:57,260
In there, we can, again, specify Node modules

120
00:05:57,260 --> 00:05:59,430
as a to be ignored folder,

121
00:05:59,430 --> 00:06:03,523
maybe also dot git and also the Docker file itself.

122
00:06:04,570 --> 00:06:07,650
And if we do that, if we add this file,

123
00:06:07,650 --> 00:06:10,310
image creation should be faster.

124
00:06:10,310 --> 00:06:13,370
And we can test this by quitting this server

125
00:06:13,370 --> 00:06:16,220
with Control + C, this container.

126
00:06:16,220 --> 00:06:18,720
And then let's rebuild this image,

127
00:06:18,720 --> 00:06:21,920
with Docker build dash t goals-react.

128
00:06:21,920 --> 00:06:26,080
If I hit Enter, this now was way faster than before,

129
00:06:26,080 --> 00:06:28,060
because we did not copy in

130
00:06:28,060 --> 00:06:30,623
this unnecessary Node modules folder.

131
00:06:32,140 --> 00:06:35,230
And now if I start this, it of course also still works,

132
00:06:35,230 --> 00:06:37,283
so that does not change.

133
00:06:38,840 --> 00:06:42,053
Here it is up and running, and everything works.

134
00:06:43,610 --> 00:06:46,360
And that is how we can also optimize

135
00:06:46,360 --> 00:06:48,593
this frontend Docker container a bit.