1
00:00:02,160 --> 00:00:05,860
The last thing we really have to do is update the path that we are providing to express that static

2
00:00:05,860 --> 00:00:10,510
right here now, unfortunately, there's not a very simple and straightforward solution to this.

3
00:00:10,690 --> 00:00:12,870
You might think that there is a very easy solution.

4
00:00:12,880 --> 00:00:14,710
Unfortunately, it's not going to work as expected.

5
00:00:15,040 --> 00:00:17,410
It's going to first show you what you think we need to do here.

6
00:00:17,590 --> 00:00:19,240
And I'm going to show you why it doesn't work.

7
00:00:19,240 --> 00:00:21,760
And we'll take a look at how we're going to actually fix up this problem.

8
00:00:22,420 --> 00:00:27,070
OK, so as we have established several times now, express not static is going to take a reference to

9
00:00:27,070 --> 00:00:30,790
a folder that we want to somehow serve up files and folders from.

10
00:00:31,760 --> 00:00:38,540
So we have now said that we want to serve up from the node modules directory, the local client folder,

11
00:00:38,540 --> 00:00:43,400
and inside there, specifically the build directory, you might think that to do this would be really

12
00:00:43,400 --> 00:00:44,420
easy and straightforward.

13
00:00:44,420 --> 00:00:46,930
You might say, OK, let's just update this path right here.

14
00:00:47,360 --> 00:00:49,150
We're currently inside the Sarsae directory.

15
00:00:49,160 --> 00:00:57,050
So we would go up one folder into our local API directory, then into node modules, then into the local

16
00:00:57,050 --> 00:00:59,420
client slash build directory.

17
00:00:59,630 --> 00:01:04,190
And that is a relative path of where we want to serve up all of our files and folders from.

18
00:01:05,120 --> 00:01:07,430
Well, unfortunately, not going to work as expected.

19
00:01:07,730 --> 00:01:09,310
Let me just prove this to you very quickly.

20
00:01:09,320 --> 00:01:12,170
So I'm going to save the file, go back over to my terminal.

21
00:01:12,950 --> 00:01:14,390
I'm going to restart my Seelie.

22
00:01:15,110 --> 00:01:19,340
So again, inside my destructo, I'm going to rerun node index, just serve.

23
00:01:19,700 --> 00:01:24,410
And if I go back over to my browser and refresh the page, I'll get a nasty error message that just

24
00:01:24,410 --> 00:01:25,640
says cannot get.

25
00:01:26,900 --> 00:01:30,440
So it's pretty clear that the path we just put in is not working as expected.

26
00:01:30,710 --> 00:01:31,910
But why is that?

27
00:01:32,540 --> 00:01:36,570
Well, it all comes down to some inner workings of what express, not static, does.

28
00:01:36,920 --> 00:01:41,540
Remember, when we go into the node modules directory and find the local client folder inside there,

29
00:01:41,780 --> 00:01:43,900
that is called a symbolic link.

30
00:01:44,270 --> 00:01:50,660
This is a shortcut of sorts on your file system that is pointing to some other directory on your machine.

31
00:01:52,030 --> 00:01:57,250
Unfortunately, express, not static, does not work nicely with symbolic links, so we've essentially

32
00:01:57,250 --> 00:02:01,980
got this kind of shortcut that is not at all compatible with express static.

33
00:02:02,490 --> 00:02:04,540
So how are we going to fix this?

34
00:02:04,780 --> 00:02:08,889
We've kind of got these two different systems that are just not behaving as expected at all.

35
00:02:09,729 --> 00:02:14,770
Well, we're going to take this symbolic link right here and we're going to kind of resolve it into

36
00:02:14,770 --> 00:02:16,120
an absolute half.

37
00:02:17,430 --> 00:02:21,720
This is where things get just a little bit crazy, so as usual, let's just write out a little bit of

38
00:02:21,720 --> 00:02:22,130
code.

39
00:02:22,170 --> 00:02:25,770
We're going to kind of get a complete solution here and we'll discuss exactly what it does.

40
00:02:26,460 --> 00:02:29,090
OK, so here's our solution at the very top.

41
00:02:29,640 --> 00:02:33,810
I'm going to first begin by importing half from path.

42
00:02:35,630 --> 00:02:44,300
Then above our use, we're going to add in a package half is required to resolve.

43
00:02:45,180 --> 00:02:51,180
And we're going to look for our local client package, build index HTML.

44
00:02:53,690 --> 00:03:01,490
And then finally, or express static, we're going to pass in half dot da name of package at.

45
00:03:03,210 --> 00:03:04,500
OK, so what's going on here?

46
00:03:05,190 --> 00:03:09,990
Well, first off, this requires resolve, function requires resolve is not going to attempt to actually

47
00:03:09,990 --> 00:03:10,980
load up a file.

48
00:03:11,100 --> 00:03:16,530
Instead, it's going to apply node's HARTH resolution algorithm to figure out the.

49
00:03:17,490 --> 00:03:23,340
Directory or essentially the file location of that indexed HTML file, so package path right here is

50
00:03:23,340 --> 00:03:28,140
going to be the absolute path on your machine to get to that index file.

51
00:03:29,890 --> 00:03:34,730
Then we don't want the entire path because the entire path would include indexed on the very end.

52
00:03:34,750 --> 00:03:36,970
Instead, we just want everything up to the bill directory.

53
00:03:37,270 --> 00:03:41,530
So we call her name, which will give us just everything up to that build folder.

54
00:03:41,680 --> 00:03:45,460
And we're saying, let's specifically serve up that folder.

55
00:03:46,340 --> 00:03:50,240
Now, the important thing here to understand is that we are now working with an absolute path, so this

56
00:03:50,240 --> 00:03:56,060
will be the absolute path to the actual local client directory on your machine, like the other one

57
00:03:56,060 --> 00:03:58,800
inside of our or the other folder inside of our packages directory.

58
00:03:59,090 --> 00:04:01,370
It's going to be the path to local client right there.

59
00:04:02,060 --> 00:04:06,140
Now, you might say, well, doesn't this kind of break what we were saying we wanted to do earlier,

60
00:04:06,140 --> 00:04:10,790
where we wanted to make sure that we were not trying to walk across module lines and go to that other

61
00:04:10,790 --> 00:04:11,280
directory?

62
00:04:11,810 --> 00:04:16,430
Well, this required that result function is going to work slightly differently when user actually installs

63
00:04:16,430 --> 00:04:17,750
all the stuff on their local machine.

64
00:04:18,079 --> 00:04:23,090
Remember, when a user installs RCL on their machine, there is going to be no more symbolic link.

65
00:04:23,270 --> 00:04:27,630
That symbolic link was only set up to make our development a little bit easier and more straightforward.

66
00:04:28,070 --> 00:04:34,190
So as soon as a user installs all the stuff on their local machine, required, Result is going to find

67
00:04:34,520 --> 00:04:38,570
the local client bill directory correctly inside of our node modules folder.

68
00:04:38,570 --> 00:04:44,300
Instead, rather than giving us the local client folder that's inside of packages, we only see a local

69
00:04:44,300 --> 00:04:48,710
client and packages with this line right here when we are running our code in this sort of development

70
00:04:48,710 --> 00:04:49,280
environment.

71
00:04:50,090 --> 00:04:53,450
Now, I just want to I know this stuff is really nasty, really crazy.

72
00:04:54,170 --> 00:04:59,300
If my explanation here does not do this justice and if you're saying, wait, why is this not working

73
00:04:59,300 --> 00:05:02,090
as expected or why is this going to fix the problem?

74
00:05:02,240 --> 00:05:06,590
I would encourage you to just pause video here, make a couple of changes, maybe go back to trying

75
00:05:06,590 --> 00:05:11,810
to do a relative path into our node modules directory and adding some console logs and take a look at

76
00:05:11,810 --> 00:05:13,640
what this package path variable is.

77
00:05:13,850 --> 00:05:16,280
And I think you'll get a good understanding of what's going on pretty quickly.

78
00:05:17,500 --> 00:05:22,240
OK, so enough of that, let's save this file and do a quick test back inside my terminal.

79
00:05:22,540 --> 00:05:23,730
I'm going to restart my Seelie.

80
00:05:24,250 --> 00:05:29,110
I'll then go back over to my browser, do a refresh, and sure enough, the application loads up as

81
00:05:29,110 --> 00:05:29,650
expected.

82
00:05:30,280 --> 00:05:34,180
So, yeah, kind of a nasty solution here, but it does work.

83
00:05:35,260 --> 00:05:40,750
OK, so that's that's so the very last thing we have to do now, remember, we have two different ways

84
00:05:40,750 --> 00:05:43,300
of serving up our REACT assets.

85
00:05:43,600 --> 00:05:48,000
One is intended for when a user has installed our Seelie onto their local machine.

86
00:05:48,160 --> 00:05:52,990
The other is intended for whenever we are running our application in this kind of development mode and

87
00:05:52,990 --> 00:05:55,270
we've got an actual ReachOut server running.

88
00:05:55,780 --> 00:06:00,340
So the last thing we really have to add in here is some kind of check to decide which of these two methods

89
00:06:00,340 --> 00:06:03,070
we want to use to load up our react assets.

90
00:06:03,460 --> 00:06:05,580
So let's add in that final piece in just a moment.