1
00:00:01,260 --> 00:00:06,570
We've now seen that if we could somehow download that source code or that raw archive into the browser

2
00:00:06,570 --> 00:00:10,350
when we were doing this bundling, we could then get all the source code required for react.

3
00:00:10,590 --> 00:00:15,090
We could then in theory, somehow provide that source code off to us build and it could use it during

4
00:00:15,090 --> 00:00:16,190
the bundling process.

5
00:00:16,530 --> 00:00:20,970
But as I mentioned twice now, unfortunately, we're not going to build a reach out directly to NPM

6
00:00:20,970 --> 00:00:24,390
to download those archives, all for a very simple reason.

7
00:00:24,940 --> 00:00:27,570
I'm back inside my browser at localhost three thousand.

8
00:00:28,140 --> 00:00:30,770
I'm going to open up my console while on the network tab.

9
00:00:30,780 --> 00:00:35,790
Remember, you can press escape to open up that console and I'm going to try to directly download that

10
00:00:35,790 --> 00:00:40,170
same archive that we downloaded in the last video by using some JavaScript code inside of here.

11
00:00:40,770 --> 00:00:46,180
So to do so, I'm going to put in fetch paste in that link like so and run it.

12
00:00:46,680 --> 00:00:48,990
So in theory, that should download that archive.

13
00:00:49,410 --> 00:00:50,400
We are going to have an archive.

14
00:00:50,400 --> 00:00:54,330
So we then have to figure out how to extract the contents, but at least we would have all the source

15
00:00:54,330 --> 00:00:55,520
code required for react.

16
00:00:56,040 --> 00:00:58,500
But when I run that, I get back in air very quickly.

17
00:00:58,860 --> 00:01:04,860
And this area here is exactly why we cannot reach out directly to NPM when trying to fetch these dependencies.

18
00:01:05,580 --> 00:01:12,180
Whenever you are inside the browser at some URL, such as localhost three thousand, if you make any

19
00:01:12,180 --> 00:01:17,580
JavaScript based request with something like fetch or axios or anything similar, your browser is going

20
00:01:17,580 --> 00:01:22,980
to send along some information in that request describing what the current URL of the browser is in

21
00:01:22,980 --> 00:01:23,400
this case.

22
00:01:23,400 --> 00:01:24,480
Localhost three thousand.

23
00:01:25,920 --> 00:01:32,580
Unfortunately, the NPM registry is configured to reject any download request if a user is at some URL,

24
00:01:32,790 --> 00:01:37,170
probably besides NPM, JAG Registry JAG.

25
00:01:37,590 --> 00:01:43,740
So long story short, due to a cause error, we cannot reach directly out to the registry to download

26
00:01:43,740 --> 00:01:45,570
the source code for all these different packages.

27
00:01:45,920 --> 00:01:48,210
So we're going to try to figure out some other solution.

28
00:01:48,720 --> 00:01:52,560
We could, in theory, set up a kind of proxy to handle downloading these things, if you're familiar

29
00:01:52,560 --> 00:01:53,100
with that at all.

30
00:01:53,320 --> 00:01:55,290
But we're going to take just a little bit easier solution.

31
00:01:55,950 --> 00:02:01,860
Instead of a new browser tab, I'm going to do a Google search for u n g.

32
00:02:03,520 --> 00:02:09,940
Well, then find the first link right here, unpackaged dotcom, this is a public CDN that we can use

33
00:02:09,940 --> 00:02:14,470
for free, but it contains all the source code that is hosted on NPM.

34
00:02:15,070 --> 00:02:20,650
So we can use this website to essentially get direct access to that exact same NPM registry.

35
00:02:21,200 --> 00:02:25,090
Are we're going to do it by going through unpackaged rather than trying to reach out to that registry

36
00:02:25,210 --> 00:02:26,230
registry directly?

37
00:02:27,100 --> 00:02:31,480
In order to download something like react or get the source good for react, here's what we would do.

38
00:02:31,910 --> 00:02:36,030
We would try to make a request to unpackaged dotcom react.

39
00:02:36,550 --> 00:02:37,080
That's it.

40
00:02:37,960 --> 00:02:43,240
If we make a request to this URL or react, then we're going to be automatically directed to the current

41
00:02:43,240 --> 00:02:44,290
version of REACT.

42
00:02:44,500 --> 00:02:49,960
And more importantly, we're going to be directed to the file that is listed inside of that packages

43
00:02:50,470 --> 00:02:51,970
package, JSON file.

44
00:02:53,150 --> 00:02:58,100
So look at that is the exact same source code that we just saw when we downloaded react manually onto

45
00:02:58,100 --> 00:02:58,760
our machines.

46
00:02:59,760 --> 00:03:03,450
So now things are starting to come together, hopefully now.

47
00:03:04,520 --> 00:03:10,160
We're starting to understand that whenever Eskild sees an import statement like import react from react,

48
00:03:10,580 --> 00:03:16,430
we're going to intercept that request to figure out what the path is on the local filesystem.

49
00:03:16,430 --> 00:03:21,080
To find that dependency dependancy, we're going to jump in, intercept Eskild and say we're going to

50
00:03:21,080 --> 00:03:25,310
figure out what that path is then rather than reaching out to the NPM registry.

51
00:03:25,580 --> 00:03:32,360
All we have to do is make a request to unpackaged dotcom, the name of the package we're looking for,

52
00:03:32,360 --> 00:03:39,230
which in this case is react unpackaged, is not only going to redirect us to the current version of

53
00:03:39,230 --> 00:03:45,530
this package, whatever the latest version is, but it's also going to redirect us to whatever the main

54
00:03:45,530 --> 00:03:48,170
file or the entry point of that package is as well.

55
00:03:48,770 --> 00:03:50,690
So we could take this link right here.

56
00:03:51,800 --> 00:03:56,870
And hand that link as though we're going to get back from Unpackaged, can have that link directly off

57
00:03:56,870 --> 00:04:01,310
to build and say that's it, that's where you can find the source code for react.

58
00:04:02,630 --> 00:04:06,290
Now, there are a couple of little steps inside of here that I'm kind of skipping over that will run

59
00:04:06,290 --> 00:04:09,130
into in due time, but this is the general idea.

60
00:04:09,170 --> 00:04:12,290
This is how we're going to generally do some bundling inside the browser.

61
00:04:12,680 --> 00:04:16,760
You and I are going to write a plug in to intercept all the different path resolutions.

62
00:04:17,240 --> 00:04:22,160
We're going to make use of Unpackaged to figure out what the current version is and what the main file

63
00:04:22,160 --> 00:04:23,030
of that packages.

64
00:04:23,510 --> 00:04:25,930
And we're going to pass that part back into build.

65
00:04:26,800 --> 00:04:28,040
So a lot of code for us to write.

66
00:04:28,220 --> 00:04:29,390
A lot of stuff going on here.

67
00:04:29,690 --> 00:04:31,990
Let's take a pause and get started in just a moment.