1
00:00:01,410 --> 00:00:05,520
All right, let's start knocking these items down one by one, so we're going to go through all three

2
00:00:05,520 --> 00:00:11,010
different packages, update some packages on files and specify exactly what files we want to send off

3
00:00:11,010 --> 00:00:17,250
to 9pm when we publish these things, like we'll first begin inside of my package JSON file for our

4
00:00:17,250 --> 00:00:24,630
Seelie package inside of here, anywhere inside this file, we will add in a new section of files.

5
00:00:27,220 --> 00:00:32,240
And inside of here, the only thing we really want to send off to NPM will be that dist directory so

6
00:00:32,369 --> 00:00:34,060
we can put in dist like so.

7
00:00:35,720 --> 00:00:40,880
OK, let's go over to local API, repeat the same process here is local API.

8
00:00:42,990 --> 00:00:44,250
I will add in philes.

9
00:00:46,440 --> 00:00:49,650
And we will add in once again our director.

10
00:00:52,490 --> 00:00:54,290
And then finally on to local clients.

11
00:00:56,770 --> 00:00:58,120
We will add in philes.

12
00:01:00,220 --> 00:01:02,810
And then in this case, we do not have a direct directory.

13
00:01:02,830 --> 00:01:08,680
Instead, whenever 9pm or whenever ReachOut builds our project, the output is put inside this build

14
00:01:08,680 --> 00:01:09,220
directory.

15
00:01:09,640 --> 00:01:13,270
So we're going to say that we want to publish everything inside the build folder.

16
00:01:15,930 --> 00:01:16,880
OK, so that's it.

17
00:01:18,720 --> 00:01:20,070
So that's another step, Don.

18
00:01:21,130 --> 00:01:25,990
Let's now go through and audit all of our different dependencies and dev dependencies, we've already

19
00:01:25,990 --> 00:01:30,490
set up two of our packages very well for this already, but we do have to make a couple of changes to

20
00:01:30,490 --> 00:01:31,800
our ReachOut project.

21
00:01:31,840 --> 00:01:33,490
So let's just go to this very quickly.

22
00:01:34,570 --> 00:01:37,120
First, inside of my Seelie package, JSON file.

23
00:01:38,460 --> 00:01:42,990
I definitely need, commander, whenever we are running on a user's machine and we definitely need local

24
00:01:42,990 --> 00:01:45,990
API whenever a user is running our application as well.

25
00:01:46,380 --> 00:01:52,020
However, our type file and the type scripts runtime are not skimming, not the runtime, but the typescript

26
00:01:52,020 --> 00:01:52,680
library itself.

27
00:01:53,820 --> 00:01:58,890
Only needed during development when we are trying to develop or build our project, so those are definitely

28
00:01:58,890 --> 00:02:00,780
good candidates for dev dependencies.

29
00:02:01,920 --> 00:02:03,060
But no change is required.

30
00:02:03,630 --> 00:02:05,220
Let's move on to local AP.

31
00:02:07,570 --> 00:02:13,780
OK, inside of local API, I'll first take a look at dependencies we've got course, we did not actually

32
00:02:13,780 --> 00:02:16,420
make use, of course, but we might actually need it at some point in time.

33
00:02:16,690 --> 00:02:18,180
I'm going to leave that inside of your for now.

34
00:02:18,580 --> 00:02:21,460
We definitely need to express and we definitely need local clients.

35
00:02:21,940 --> 00:02:26,160
But do we need HTTP proxy middleware?

36
00:02:26,170 --> 00:02:30,880
And this is where the distinction between dependencies and dev dependencies starts to get really weird.

37
00:02:31,480 --> 00:02:37,300
So HTTP proxy middleware is a package that is technically only used by us during development.

38
00:02:37,480 --> 00:02:39,340
That's the only time that we actually set up a proxy.

39
00:02:39,730 --> 00:02:43,690
However, remember inside of our source index stats file.

40
00:02:44,660 --> 00:02:50,600
Inside of our local project, no matter what, no matter whether we are running this package in a development

41
00:02:50,600 --> 00:02:55,650
or production mode, in all scenarios, we always import this library no matter what.

42
00:02:56,510 --> 00:03:00,350
So because we've written out this import statement in this way, that means that we have to include

43
00:03:00,350 --> 00:03:03,620
it when we start to install all the stuff on the user's machine.

44
00:03:05,040 --> 00:03:09,600
If we mark this as a development only dependency, then as soon as we start to run this code on the

45
00:03:09,600 --> 00:03:15,480
user's machine node is going to see an import statement for approximately where it's not going to find

46
00:03:15,480 --> 00:03:16,470
that package installed.

47
00:03:16,920 --> 00:03:18,750
Air will be thrown very quickly.

48
00:03:19,590 --> 00:03:25,470
So it's not always a question strictly of am I using this package during development or not sometimes

49
00:03:25,470 --> 00:03:26,880
because of the way we have written code out.

50
00:03:27,030 --> 00:03:33,600
We still have to include packages as a dependency, even if technically we're only using them effectively

51
00:03:33,630 --> 00:03:35,040
during the development process.

52
00:03:35,940 --> 00:03:37,860
So, again, no changes are needed here.

53
00:03:40,160 --> 00:03:42,230
OK, so now onto local client.

54
00:03:43,520 --> 00:03:48,080
So I'm going to find the package, some file inside of my local client directory now inside of you.

55
00:03:48,110 --> 00:03:52,100
If we take a look at dependencies right away, we're going to see that there are a tremendous number

56
00:03:52,100 --> 00:03:58,220
of dependencies that probably are development dependencies such as all these type definition files and

57
00:03:58,220 --> 00:04:00,450
all these different testing library things as well.

58
00:04:01,040 --> 00:04:04,640
But here's the real tricky thing about our REACT application.

59
00:04:05,010 --> 00:04:10,390
Remember that whenever a user installs are Seelie, they're not going to be running react up at all.

60
00:04:10,730 --> 00:04:14,320
They're not going to be bundling our local client or anything like that.

61
00:04:14,480 --> 00:04:19,940
The only purpose of local client, once it has been installed on the user's machine is to serve out

62
00:04:19,940 --> 00:04:22,940
some of the different files and folders inside of our build directory.

63
00:04:23,240 --> 00:04:23,890
That is it.

64
00:04:24,470 --> 00:04:30,980
So we don't actually need any dependencies at all when we install a local client onto a user's machine.

65
00:04:32,130 --> 00:04:39,680
We can actually take this entire dependency section and just relabel it to all be the dependencies instead.

66
00:04:42,280 --> 00:04:45,970
Now, this might be a little bit tricky if you're looking at this and saying there's no way that's going

67
00:04:45,970 --> 00:04:50,290
to work, hey, of course, let's actually do that deploy eventually run it on our machine.

68
00:04:50,290 --> 00:04:54,310
And I think it will come back and say, yeah, it turns out we actually don't need any of these at all

69
00:04:54,520 --> 00:04:57,430
because all we really care about are the built projectiles.

70
00:04:58,320 --> 00:05:03,060
And the same is not true of these other projects, just to be clear, because, remember, ReachOut

71
00:05:03,060 --> 00:05:04,890
is doing a bundling process.

72
00:05:05,130 --> 00:05:10,860
It is taking all these dependencies, such as react, react, redux and so on, and including them inside

73
00:05:10,860 --> 00:05:12,390
of the built project files.

74
00:05:12,930 --> 00:05:18,780
Whereas whenever we do a build of, say, our Arkley, we are only putting inside of the transport all

75
00:05:18,780 --> 00:05:19,320
the files.

76
00:05:19,500 --> 00:05:24,510
And we are still relying upon going into our node modules directory and finding the relevant dependencies

77
00:05:24,510 --> 00:05:27,090
whenever we require them into those JavaScript files.

78
00:05:27,510 --> 00:05:28,650
That is the big difference here.

79
00:05:30,680 --> 00:05:34,760
OK, so this video is running just a little bit long, but I do want to take care of the next step because

80
00:05:34,760 --> 00:05:36,020
it's very fast and easy.

81
00:05:36,470 --> 00:05:40,500
We have to go through all of our different packages and just get them to be publicly accessible.

82
00:05:41,090 --> 00:05:44,630
So for that, we're going to start off first with our Seelie.

83
00:05:46,500 --> 00:05:49,990
Here's a Seelie packages on file and anywhere inside of here.

84
00:05:50,040 --> 00:05:52,560
We're going to add in that published config.

85
00:05:59,200 --> 00:06:00,370
I'm going to copy that block.

86
00:06:01,460 --> 00:06:06,890
I'll go over to my local AP package, JSON file and paste the same thing in.

87
00:06:10,230 --> 00:06:15,390
And then finally, inside of my local client package, Jason File, I'm going to find the existing private

88
00:06:15,390 --> 00:06:16,470
true inside there.

89
00:06:16,500 --> 00:06:20,730
I'm going to delete that and replace it with the published config access public.

90
00:06:21,730 --> 00:06:22,560
OK, so that's it.

91
00:06:23,550 --> 00:06:26,570
Let's take a pause right here and then continue on in just a moment.