1
00:00:00,000 --> 00:00:04,400
[Intro Music]

2
00:00:04,470 --> 00:00:06,900
Now we're all set. We have Node.js

3
00:00:06,900 --> 00:00:08,430
and Python installed on the

4
00:00:08,430 --> 00:00:11,190
computer. And now let's start our

5
00:00:11,190 --> 00:00:12,930
project which consists of two

6
00:00:12,930 --> 00:00:14,970
different applications - api and

7
00:00:14,970 --> 00:00:18,090
frontend locally without help of

8
00:00:18,090 --> 00:00:20,803
Docker. And let's start with frontend

9
00:00:20,803 --> 00:00:23,280
application. In order to start

10
00:00:23,280 --> 00:00:25,350
this frontend application, first,

11
00:00:25,380 --> 00:00:27,540
what we need to do is to install

12
00:00:27,570 --> 00:00:30,210
NPM dependencies which are listed

13
00:00:30,240 --> 00:00:32,850
in the package.json file here.

14
00:00:33,720 --> 00:00:35,400
After installation, inside of the

15
00:00:35,400 --> 00:00:37,920
'frontend' folder, you'll see 'node_

16
00:00:37,920 --> 00:00:40,260
modules' folder, which will contain

17
00:00:40,410 --> 00:00:42,840
all necessary project dependencies.

18
00:00:43,320 --> 00:00:44,730
We will do that in the terminal

19
00:00:44,730 --> 00:00:46,710
using command line interface. And

20
00:00:46,710 --> 00:00:48,630
you could either use embedded

21
00:00:48,660 --> 00:00:50,400
terminal in the Visual Studio Code,

22
00:00:50,520 --> 00:00:52,620
you could open it up using Ctrl+

23
00:00:52,650 --> 00:00:55,350
backtick, 'CTRL + `' key combination; or you

24
00:00:55,350 --> 00:00:57,360
could use any other terminal

25
00:00:57,390 --> 00:01:00,420
application. I'll use iTerm2 for

26
00:01:00,420 --> 00:01:01,740
that. On Windows, you could use

27
00:01:01,740 --> 00:01:04,379
PowerShell. And here make sure that

28
00:01:04,379 --> 00:01:05,849
you first go to 'docker'

29
00:01:05,849 --> 00:01:07,830
folder; and recap that here

30
00:01:07,830 --> 00:01:10,110
inside there is 'images-gallery'

31
00:01:10,110 --> 00:01:12,900
folder; and please 'cd' to 'images_

32
00:01:12,900 --> 00:01:16,440
gallery' here; and afterwards 'cd' to

33
00:01:16,470 --> 00:01:18,630
'frontend' folder, because now we

34
00:01:18,630 --> 00:01:20,550
have to install NPM dependencies

35
00:01:20,580 --> 00:01:23,340
inside of the 'frontend' folder. So

36
00:01:23,430 --> 00:01:25,470
if I list files and folders here

37
00:01:25,470 --> 00:01:28,020
now, I will not see 'node_modules'

38
00:01:28,020 --> 00:01:30,802
folder, but there is package.json

39
00:01:30,802 --> 00:01:32,130
file with all necessary

40
00:01:32,130 --> 00:01:34,770
instructions for NPM. And now let's

41
00:01:34,770 --> 00:01:36,990
go ahead and install all NPM

42
00:01:36,990 --> 00:01:39,750
dependencies using 'npm install'

43
00:01:39,780 --> 00:01:42,420
command. This will take some time,

44
00:01:42,450 --> 00:01:44,430
approximately 10-20 seconds, let's

45
00:01:44,430 --> 00:01:47,370
wait a bit. And NPM successfully

46
00:01:47,370 --> 00:01:49,500
installed all necessary packages.

47
00:01:49,680 --> 00:01:52,080
And notice that almost 2000

48
00:01:52,080 --> 00:01:53,970
different packages were added to

49
00:01:53,970 --> 00:01:56,610
the frontend application. And if I

50
00:01:56,610 --> 00:01:59,190
list files and folders now, I'll see

51
00:01:59,220 --> 00:02:02,550
'node_modules' folder here. If I list

52
00:02:02,550 --> 00:02:03,780
contents of the node_modules

53
00:02:03,780 --> 00:02:05,520
folder, I'll see a bunch of

54
00:02:05,520 --> 00:02:08,880
different modules like ws, extend,

55
00:02:08,910 --> 00:02:11,940
and so on. Alright, we are all set

56
00:02:11,940 --> 00:02:14,241
now and we are ready to start frontend

57
00:02:14,241 --> 00:02:16,530
application. Inside of the

58
00:02:16,530 --> 00:02:18,540
package.json file, there are

59
00:02:18,540 --> 00:02:21,240
several scripts like start, build,

60
00:02:21,300 --> 00:02:24,090
test, and others. And in order to

61
00:02:24,120 --> 00:02:26,670
start application, you need to enter

62
00:02:26,700 --> 00:02:29,820
'npm start' command; and that command

63
00:02:29,850 --> 00:02:31,770
will essentially run such command

64
00:02:31,800 --> 00:02:34,590
react-scripts-start; and this

65
00:02:34,590 --> 00:02:36,690
command will basically start our

66
00:02:36,690 --> 00:02:39,300
React application. Alright, let's

67
00:02:39,300 --> 00:02:41,040
go back to command line and here

68
00:02:41,040 --> 00:02:44,340
and enter 'npm start'. 'react-scripts

69
00:02:44,340 --> 00:02:46,530
start' command is being executed,

70
00:02:46,800 --> 00:02:48,600
Starting the development server...

71
00:02:48,720 --> 00:02:51,000
Notice that we will run frontend

72
00:02:51,030 --> 00:02:52,980
application in development mode,

73
00:02:53,040 --> 00:02:55,980
not in production. Also here I see

74
00:02:55,980 --> 00:02:58,140
prompt that iTerm wants access to

75
00:02:58,140 --> 00:03:00,090
control Google Chrome. And if I

76
00:03:00,090 --> 00:03:02,490
grant access for that, I will see

77
00:03:02,490 --> 00:03:04,590
that it will automatically open a

78
00:03:04,620 --> 00:03:06,780
new tab in the Google Chrome. And

79
00:03:06,780 --> 00:03:09,120
in the web browser bar, I see such

80
00:03:09,120 --> 00:03:12,090
URL as localhost:3000. It

81
00:03:12,090 --> 00:03:14,550
means that now our application is

82
00:03:14,550 --> 00:03:17,640
running at localhost locally, and

83
00:03:17,760 --> 00:03:21,060
its corresponding port is 3000. And

84
00:03:21,090 --> 00:03:22,410
I see that 'Images Gallery'

85
00:03:22,410 --> 00:03:24,720
application was successfully opened.

86
00:03:24,750 --> 00:03:27,480
Here it is. It consists of this

87
00:03:27,510 --> 00:03:30,720
Search input, Search button. Here

88
00:03:30,720 --> 00:03:32,340
is a very simple description about

89
00:03:32,340 --> 00:03:34,260
this application. And as I told you

90
00:03:34,260 --> 00:03:36,300
before, this frontend application

91
00:03:36,300 --> 00:03:38,880
retrieves the images using Unsplash

92
00:03:38,940 --> 00:03:40,890
API, but it does not do it

93
00:03:40,920 --> 00:03:43,350
directly. Instead, it uses API

94
00:03:43,350 --> 00:03:45,240
service, which is actually proxy

95
00:03:45,240 --> 00:03:47,520
between frontend application and

96
00:03:47,580 --> 00:03:49,890
Unsplash. And if you click 'Learn

97
00:03:49,890 --> 00:03:51,360
more', it will lead you to

98
00:03:51,360 --> 00:03:54,120
unsplash.com URL. Alright, we are

99
00:03:54,120 --> 00:03:56,400
all set, now frontend application

100
00:03:56,430 --> 00:03:59,370
is running. But if I attempt to search

101
00:03:59,370 --> 00:04:01,590
for new images right now, I will

102
00:04:01,590 --> 00:04:04,290
not get any images because now API

103
00:04:04,290 --> 00:04:06,450
service isn't running. But let's

104
00:04:06,450 --> 00:04:07,770
quickly try that. And before

105
00:04:07,770 --> 00:04:09,300
trying, please open up Google

106
00:04:09,300 --> 00:04:10,950
Developer Tools, you could use

107
00:04:10,950 --> 00:04:13,440
either key combination Command or

108
00:04:13,440 --> 00:04:17,940
Control option J or F 12. And here

109
00:04:17,940 --> 00:04:19,680
I see that console was successfully

110
00:04:19,709 --> 00:04:22,110
opened. And let's search for a new

111
00:04:22,140 --> 00:04:25,170
image, for example, 'sun'. And here I

112
00:04:25,170 --> 00:04:27,540
see error - ERR_CONNECTION_REFUSED.

113
00:04:27,810 --> 00:04:29,610
And I see that there was connection

114
00:04:29,640 --> 00:04:31,740
attempt to localhost IP address,

115
00:04:31,770 --> 00:04:34,950
but other port, not 3000. Here I see

116
00:04:34,950 --> 00:04:37,680
Port 5050. And that's that Port

117
00:04:37,800 --> 00:04:39,660
where Frontend application

118
00:04:39,780 --> 00:04:42,480
expects API application to be

119
00:04:42,480 --> 00:04:45,000
running. That gives us clear

120
00:04:45,000 --> 00:04:46,890
understanding that Frontend

121
00:04:46,920 --> 00:04:49,260
application is completely separated

122
00:04:49,260 --> 00:04:52,140
from the API backend application

123
00:04:52,410 --> 00:04:54,150
because they actually communicate

124
00:04:54,180 --> 00:04:56,520
via network. And next after the

125
00:04:56,520 --> 00:04:58,650
small pause, let's start api

126
00:04:58,650 --> 00:05:00,840
service as well, and afterwards we

127
00:05:00,840 --> 00:05:02,940
will try how they work together.

128
00:05:02,940 --> 00:05:05,344
[no audio]