1
00:00:01,180 --> 00:00:07,060
Inside of our local client package, we now have that build folder, so inside that folder are all of

2
00:00:07,060 --> 00:00:08,860
our react production assets.

3
00:00:09,230 --> 00:00:13,810
So we essentially want to take this folder and somehow make it available or really the contents of it

4
00:00:13,810 --> 00:00:15,670
over to our local API package.

5
00:00:15,970 --> 00:00:19,070
That local API can serve up all the contents of that folder.

6
00:00:19,810 --> 00:00:22,490
Now, this entire process is going to be a little bit crazy.

7
00:00:22,540 --> 00:00:25,390
This is probably one of the hardest things inside this entire course.

8
00:00:25,390 --> 00:00:29,560
To wrap your head around what we are about to do here, the first thing I want to do is a very quick

9
00:00:29,560 --> 00:00:33,760
little housekeeping change, just a little bit of administrative work where they are going to take a

10
00:00:33,760 --> 00:00:37,600
look at a couple of diagrams and understand the big solution we're going to use here.

11
00:00:38,140 --> 00:00:43,870
OK, so here, first off, is a little bit of administrative work we need to do inside of local client.

12
00:00:43,880 --> 00:00:47,380
I'm going to find the package JSON file inside there.

13
00:00:47,680 --> 00:00:49,810
We've got this name property with JDBC.

14
00:00:50,320 --> 00:00:53,860
We're going to change that name property to be local client instead.

15
00:00:54,880 --> 00:00:56,720
Like I said, just a little bit of housekeeping.

16
00:00:57,100 --> 00:00:57,940
Why are we doing that?

17
00:00:58,210 --> 00:01:02,500
Well, remember, we've been running commands with Lernout several times at our terminal and we've been

18
00:01:02,500 --> 00:01:04,269
using that SCOP option quite a bit.

19
00:01:05,459 --> 00:01:10,230
Inside of scope, we've been putting in the names of all of our different packages, so, for example,

20
00:01:10,230 --> 00:01:16,470
we did a llena ad of some package and the scope of Seelie or local API.

21
00:01:17,740 --> 00:01:22,300
Those scope names are not coming from the names of the folders inside of our packages directory.

22
00:01:22,510 --> 00:01:27,910
Instead, the scope names are actually coming from the name field of our packages on file.

23
00:01:28,740 --> 00:01:33,660
So the only reason I'm changing this from Chibouk over to local client is to just kind of better reflect

24
00:01:33,660 --> 00:01:38,220
the actual name of the local client package, that we've got a very consistent name here.

25
00:01:38,220 --> 00:01:44,010
And if we ever do a not ad with a scope of local client, it means go and find this directory right

26
00:01:44,010 --> 00:01:44,310
here.

27
00:01:44,550 --> 00:01:48,870
So, again, just a little bit of housekeeping just to make sure all these names line up and are super

28
00:01:48,870 --> 00:01:49,530
clear to you.

29
00:01:50,730 --> 00:01:54,630
OK, so there's our administrative change, so now we're going to take a look at a couple of diagrams

30
00:01:54,630 --> 00:01:59,070
and understand how we're going to get all this stuff working correctly when a user eventually installs

31
00:01:59,070 --> 00:02:01,950
this JDBC application onto their local machine.

32
00:02:05,000 --> 00:02:09,590
So instead of our local client package, now we have a build directory and inside there are a bunch

33
00:02:09,590 --> 00:02:15,140
of built react files, so we want to somehow get access to these files and be able to serve them up

34
00:02:15,320 --> 00:02:19,670
from inside of our local API package or more specifically, the express application.

35
00:02:20,520 --> 00:02:25,470
So one solution we can use to very easily do so is to use a middleware that you might already be familiar

36
00:02:25,470 --> 00:02:25,770
with.

37
00:02:26,070 --> 00:02:27,640
It is called static middleware.

38
00:02:28,110 --> 00:02:31,200
This is a middleware that is included by with express by default.

39
00:02:31,680 --> 00:02:36,390
The static middleware is going to automatically serve up all the different files and folders inside

40
00:02:36,390 --> 00:02:37,340
of some directory.

41
00:02:37,980 --> 00:02:43,380
The static middleware is used in tremendous numbers of express applications, and a great example of

42
00:02:43,380 --> 00:02:50,610
the use of the static middleware might be the public directory inside of react up to remember any ReachOut

43
00:02:50,610 --> 00:02:56,100
project has a public directory and you can very, very easily access all the different files and folders

44
00:02:56,100 --> 00:03:02,490
inside there by just trying to go directly to say, localhost three thousand logo one nine to.

45
00:03:04,180 --> 00:03:10,090
So that is the express static in in in action, it serves up all the files and folders from a given

46
00:03:10,090 --> 00:03:10,570
directory.

47
00:03:12,090 --> 00:03:17,790
So it seems to me that we could somehow make everything inside that bill directory available to users

48
00:03:18,060 --> 00:03:23,310
who are making requests to our local API Express server, if we can set up the static middleware inside

49
00:03:23,310 --> 00:03:29,220
there and then say, hey, static middleware, go over to the bill directory of our local client package

50
00:03:29,220 --> 00:03:34,200
and serve up all the files and folders inside there, that would probably work as expected.

51
00:03:35,990 --> 00:03:40,430
So we could definitely try wiring this up, let's go back over to our Ed, we're going to put together

52
00:03:40,430 --> 00:03:42,770
kind of somewhat naive solution.

53
00:03:43,010 --> 00:03:46,910
So I say naive here, because this is not going to be a solution that's going to work in the long term,

54
00:03:47,150 --> 00:03:49,330
but it will at least work for a little bit right now.

55
00:03:50,380 --> 00:03:51,550
So back inside, my editor.

56
00:03:53,010 --> 00:03:55,830
I'm going to go to local AP inducts.

57
00:03:57,100 --> 00:03:58,870
Inside of here at the very top.

58
00:03:59,770 --> 00:04:01,750
Or see me at the top of our search function.

59
00:04:02,080 --> 00:04:05,900
I'm going to comment about all this stuff around Proxy where for just a moment.

60
00:04:06,370 --> 00:04:08,540
So right now we're not using the proxy anymore.

61
00:04:08,590 --> 00:04:13,660
And so in theory, if we started up our express application, we would no longer be able to access any

62
00:04:13,660 --> 00:04:15,990
of our Riak stuff, even in the development environment.

63
00:04:16,870 --> 00:04:24,890
So we're going to replace that very temporarily with app use, express static, so there's these static

64
00:04:24,890 --> 00:04:25,320
middleware.

65
00:04:26,030 --> 00:04:30,680
The only argument to the static middleware is going to be a path to the directory that we want to serve

66
00:04:30,680 --> 00:04:30,950
up.

67
00:04:31,790 --> 00:04:33,410
But here's our naive solution.

68
00:04:33,800 --> 00:04:39,470
We're going to put in a directory right here that's going to be essentially walk from our index file.

69
00:04:39,740 --> 00:04:45,500
We're going to go up one folder to local API, will then go into local client and then say that we want

70
00:04:45,500 --> 00:04:47,090
to serve up that build directory.

71
00:04:48,130 --> 00:04:52,330
So as a string right here, I'm going to say go up into local API.

72
00:04:53,630 --> 00:04:55,730
Go up into packages.

73
00:04:56,710 --> 00:04:58,690
Go to local client.

74
00:04:59,620 --> 00:05:00,730
And then build.

75
00:05:02,320 --> 00:05:06,820
So I want to try to serve up all the files and folders from that directory, and again, this is not

76
00:05:06,820 --> 00:05:09,760
a good solution here is just kind of a proof of concept.

77
00:05:10,820 --> 00:05:13,400
So I'm going to save this, go back over to my terminal.

78
00:05:14,910 --> 00:05:19,640
I'm going to stop my running express application, so if you're still running that NPM run or speed

79
00:05:19,650 --> 00:05:23,460
the node index Jessopp command, just go ahead and stop it.

80
00:05:24,930 --> 00:05:28,620
Well, then started back up with another note indexed J.S. Surf.

81
00:05:30,170 --> 00:05:34,580
And then going to go back over to my browser, I'm going to go to localhost four thousand five when

82
00:05:34,580 --> 00:05:38,030
I do so, I'm going to expect to see our REACT application appear.

83
00:05:39,460 --> 00:05:40,660
So back inside my browser.

84
00:05:41,530 --> 00:05:47,200
I'm going to refresh while at localhost four thousand five, and sure enough, I still see our application

85
00:05:47,200 --> 00:05:48,070
up here on the screen.

86
00:05:48,550 --> 00:05:51,070
So that means that we have correctly set up this link.

87
00:05:51,490 --> 00:05:56,680
We have said that we want our local express API, the static middleware, to serve up all the files

88
00:05:56,680 --> 00:06:00,220
and folders from the build directory inside of our local client package.

89
00:06:00,610 --> 00:06:03,520
And the code that we wrote out works one hundred percent.

90
00:06:04,770 --> 00:06:07,950
But like I said, it is a naive solution, it's not a good solution.

91
00:06:08,310 --> 00:06:10,420
Let me tell you first off why it is not a good solution.

92
00:06:10,440 --> 00:06:14,880
When I say not a good solution, what I really mean to say is it is a solution that is not going to

93
00:06:14,880 --> 00:06:16,410
work in the real world.

94
00:06:16,920 --> 00:06:17,610
So here's why.

95
00:06:19,360 --> 00:06:24,250
All right, so we've got our packages folder inside there, we've got our Seelie package, local API

96
00:06:24,400 --> 00:06:26,860
and local client and inside of local client is built.

97
00:06:27,430 --> 00:06:31,840
We're essentially trying to walk directly from inside of our local API package and go directly over

98
00:06:31,840 --> 00:06:32,880
to that build folder.

99
00:06:33,130 --> 00:06:33,970
But here's the problem.

100
00:06:34,240 --> 00:06:40,900
Inside of a learning project, we cannot directly require files or folders or even reference files or

101
00:06:40,900 --> 00:06:45,870
folders or provide even parts, the files or folders between these different packages.

102
00:06:46,570 --> 00:06:51,700
So that whole path that we just wrote out, that long string that would not work as soon as we start

103
00:06:51,700 --> 00:06:53,800
to run our project on the user's machine.

104
00:06:54,520 --> 00:06:56,380
The reason for this is very simple.

105
00:06:57,130 --> 00:07:01,540
Eventually, we're going to deploy all these different packages off to the NPM registry.

106
00:07:03,280 --> 00:07:08,140
So each of these different packages are going to be essentially taken like each folder is going to be

107
00:07:08,140 --> 00:07:08,590
taken.

108
00:07:08,620 --> 00:07:15,160
It's going to be zipped up and then sent over to the NPM registry, zipped up, sent over to the registry.

109
00:07:15,280 --> 00:07:18,160
And each of these little zip files, they're not technically zip files.

110
00:07:18,160 --> 00:07:24,040
Their archives are going to contain just the contents of Seelie, just the contents of local API and

111
00:07:24,040 --> 00:07:25,690
only the contents of local clients.

112
00:07:26,320 --> 00:07:31,930
So there's not going to be any sibling directory when local API tries to go to its sibling folder and

113
00:07:31,930 --> 00:07:33,700
try to find local client.

114
00:07:34,030 --> 00:07:38,940
That is just not going to exist as soon as we start running the application on a user's machine.

115
00:07:39,670 --> 00:07:44,140
So the current path that we have written out is a path that is only going to work for you and I right

116
00:07:44,140 --> 00:07:49,930
now in this development environment, it is not going to work as soon as a user starts to say, install

117
00:07:49,930 --> 00:07:51,850
the Seelie onto their local machine.

118
00:07:53,130 --> 00:07:57,360
Now, this part this is the part where I said when I said at the start, this video, this is a really

119
00:07:57,360 --> 00:07:58,110
confusing topic.

120
00:07:58,260 --> 00:07:59,910
This right here is kind of what I'm talking about.

121
00:08:00,180 --> 00:08:02,490
You might say you might be saying, wait, Stephen, wait.

122
00:08:02,490 --> 00:08:05,700
Like, what is this about a user installing these packages?

123
00:08:05,720 --> 00:08:07,780
How is this all work if this part is unclear?

124
00:08:07,800 --> 00:08:08,850
Don't sweat it too much.

125
00:08:09,250 --> 00:08:15,150
All I mean to say here is that we pretty much cannot do a direct reference to this other folder that

126
00:08:15,150 --> 00:08:16,430
is inside of our packages directory.

127
00:08:16,440 --> 00:08:17,370
That's pretty much the rule.

128
00:08:17,910 --> 00:08:19,890
So if that doesn't make sense, that's OK.

129
00:08:19,920 --> 00:08:21,330
Just kind of accepted as reality.

130
00:08:21,330 --> 00:08:22,260
And let's continue on.

131
00:08:22,950 --> 00:08:26,070
Let's take a look at a solution we're going to use to kind of get around this rule.

132
00:08:28,310 --> 00:08:36,580
OK, so this is what is allowed, we can set up a link between local API and local client, we can set

133
00:08:36,590 --> 00:08:40,250
local client to be a dependency of local API.

134
00:08:40,520 --> 00:08:45,500
And remember, we have technically already done this between our client and local API projects.

135
00:08:45,860 --> 00:08:48,170
Let's go take a look at that really quickly just to get the reminder.

136
00:08:49,100 --> 00:08:54,830
So if we go back over and find our Seelie project inside, there is package, Jason, remember we said

137
00:08:54,830 --> 00:09:03,260
that a dependency of Seelie was local API that set up a link between Seelie and local API inside of

138
00:09:03,260 --> 00:09:03,680
Seelie.

139
00:09:03,700 --> 00:09:08,480
If we open up the node modules directory, we can see a reference to our local API package right there.

140
00:09:09,200 --> 00:09:16,010
So we're going to use this exact same technique to get a reference to local client inside of local API.

141
00:09:18,200 --> 00:09:22,700
So we're going to use Launa to link these two packages together, and when we set up that link, we

142
00:09:22,700 --> 00:09:28,820
can imagine that inside of local APIs node modules directory, we're going to get kind of a shortcut

143
00:09:29,060 --> 00:09:32,570
over to the local client folder, like the actual four folder.

144
00:09:32,940 --> 00:09:39,170
This is kind of a shortcut right here over to the real local client, all the files and folders that

145
00:09:39,170 --> 00:09:40,960
are inside of local client right here.

146
00:09:41,240 --> 00:09:44,480
We will see inside the node modules directory of local API.

147
00:09:46,360 --> 00:09:53,380
So because local client is now kind of technically kind of inside of local API, we can safely write

148
00:09:53,380 --> 00:09:59,440
out a path that looks into this local client folder right here and finds the directory inside of it.

149
00:09:59,650 --> 00:10:01,780
And again, that is a link that is allowed.

150
00:10:03,010 --> 00:10:07,330
So we're going to go back over to our static middleware and we're going to say whenever a user makes

151
00:10:07,330 --> 00:10:14,020
a request, try to serve up all the files and folders from our node modules, local client build directory.

152
00:10:14,110 --> 00:10:16,450
And again, that is a link that is allowed.

153
00:10:17,890 --> 00:10:21,940
OK, so let's first begin all this stuff by going back over to our terminal, we're going to set up

154
00:10:21,940 --> 00:10:22,720
the link.

155
00:10:23,930 --> 00:10:24,620
Between.

156
00:10:26,430 --> 00:10:30,270
Local AP and local client, they're going to go back over to my terminal.

157
00:10:31,800 --> 00:10:42,030
I'm going to stop are running serve process and I'll do a llena ad, I want to add local client to local

158
00:10:42,060 --> 00:10:42,720
API.

159
00:10:45,540 --> 00:10:46,320
It's going to run that.

160
00:10:47,490 --> 00:10:51,510
I get a little warning here, you're probably not going to see this warning because I've recorded this

161
00:10:51,510 --> 00:10:53,420
video several times now to get it just right.

162
00:10:53,940 --> 00:10:55,110
I've already added the two.

163
00:10:55,140 --> 00:10:57,180
So, again, you're going to see a slightly different message right there.

164
00:10:58,670 --> 00:11:05,660
Then back inside of our code editor, we should be able to go into our local AP packages on file and

165
00:11:05,660 --> 00:11:06,390
see inside there.

166
00:11:06,410 --> 00:11:09,020
We now have local client listed as a dependency.

167
00:11:10,960 --> 00:11:16,770
And inside of our Noad Modules directory, if I open that up, I should be able to scroll down and find

168
00:11:17,650 --> 00:11:18,640
local client.

169
00:11:18,730 --> 00:11:19,690
There it is right there.

170
00:11:19,940 --> 00:11:26,020
If you do not see local client inside of your local API node modules directory, just restart your editor.

171
00:11:27,190 --> 00:11:28,580
So that is a shortcut.

172
00:11:29,230 --> 00:11:32,610
It's not a copy of local client, we didn't copy these files over.

173
00:11:32,650 --> 00:11:35,650
It is a shortcut over to the local client folder.

174
00:11:36,250 --> 00:11:40,690
So now we can get direct access to that build folder and serve up all the different files inside.

175
00:11:40,690 --> 00:11:43,760
They're using the express static middleware.

176
00:11:44,500 --> 00:11:45,030
So that's it.

177
00:11:45,040 --> 00:11:45,880
That's the solution.

178
00:11:47,010 --> 00:11:52,720
The last thing we have to do is go back into our source index file and update this path right here.

179
00:11:53,160 --> 00:11:57,270
Now, updating that path, there's going to be just one last very small challenge around it.

180
00:11:57,540 --> 00:11:59,130
So we're going to just pause for one second.

181
00:11:59,140 --> 00:12:00,600
We're going to come back next video.

182
00:12:00,600 --> 00:12:04,350
We're going to understand what this last little challenge is and then write out the last bit of code.

183
00:12:04,680 --> 00:12:07,790
So quick pause and finish this stuff up in just a moment.