1
00:00:02,610 --> 00:00:08,690
Where is this error coming from? What does this error even mean? Modules are a relatively new feature and

2
00:00:08,790 --> 00:00:13,760
as you might imagine, since scripts can point at other scripts that should be imported,

3
00:00:14,040 --> 00:00:17,190
we have to be strict regarding security,

4
00:00:17,190 --> 00:00:23,460
we need to make sure that a script can't import a script from another page which might be malicious.

5
00:00:23,460 --> 00:00:26,790
You might think why would I add such code to my own scripts.

6
00:00:26,790 --> 00:00:31,830
Well if you're using third-party libraries, then such a library might be compromised and might try to

7
00:00:31,830 --> 00:00:34,440
download files from other malicious files,

8
00:00:34,440 --> 00:00:42,370
this is why we have a cross origin request policy which basically means cross origin, so cross domain

9
00:00:42,370 --> 00:00:43,600
requests are not allowed,

10
00:00:43,600 --> 00:00:47,310
you're only allowed to download scripts from the same domain

11
00:00:47,350 --> 00:00:48,720
your page is running on.

12
00:00:48,800 --> 00:00:53,560
Now the problem we're facing here is that we're serving this app with the file protocol.

13
00:00:53,560 --> 00:00:59,620
Remember, what we always did thus far is we double clicked index.html in the Windows Explorer or

14
00:00:59,650 --> 00:01:05,650
in the MAC finder and this opens it up in the browser but actually does not open it up as it would be

15
00:01:05,650 --> 00:01:08,230
opened if it is served by a web server,

16
00:01:08,320 --> 00:01:14,260
it just opens it with this file protocol, which simply just means it displays the content of the file

17
00:01:14,380 --> 00:01:20,080
and is able to execute Javascript conveniently. Thus far, this wasn't a problem because a lot of features

18
00:01:20,080 --> 00:01:27,810
worked just fine with the file protocol but web server dependent features, like using this cross origin

19
00:01:27,850 --> 00:01:29,850
policy don't work there,

20
00:01:29,860 --> 00:01:38,110
this policy requires the page to be served from a real web server in order to be validated and therefore

21
00:01:38,110 --> 00:01:39,970
we now need to serve our app here,

22
00:01:39,970 --> 00:01:44,770
our page through a web server and not through the file protocol.

23
00:01:44,770 --> 00:01:45,840
Now that sounds difficult,

24
00:01:45,850 --> 00:01:50,910
it sounds like we need to setup our own server, host it somewhere, maybe pay for it,

25
00:01:50,920 --> 00:01:52,380
the good thing is you don't.

26
00:01:52,780 --> 00:01:58,280
if you google for servejs, you should find this serve package here on npmjs.com,

27
00:01:58,330 --> 00:02:06,510
we had a look at npmjs.com in the third-party library module and here, you get a basic web server

28
00:02:06,540 --> 00:02:09,840
which you can install on your system and run on your system,

29
00:02:09,870 --> 00:02:12,630
you don't need to deploy your page anywhere,

30
00:02:12,630 --> 00:02:18,420
don't need to rent any servers, it spins up a little server on your machine, works on Windows and macOS

31
00:02:18,420 --> 00:02:25,410
and this server will serve your application. Now to install it,

32
00:02:25,440 --> 00:02:30,830
we need to install Node.js though, we haven't used Node.js in this course,

33
00:02:30,840 --> 00:02:36,420
I will have a Node.js section later in the course but we also don't need to write any Node.js code

34
00:02:36,420 --> 00:02:43,050
right now. We just need to install the Node.js runtime on our machine because this serve package requires

35
00:02:43,080 --> 00:02:47,660
Node.js because that little server which it spins up is written in Node.js.

36
00:02:47,700 --> 00:02:53,760
In addition, Node.js will also give us a tool which we can use to install this tool here, this serve

37
00:02:53,760 --> 00:03:00,450
tool on our machine, so we get two benefits at the same time. So visit nodejs.org and download

38
00:03:00,450 --> 00:03:05,550
the latest version of Node.js, at the point of time I'm recording this, it's 12 but it doesn't really

39
00:03:05,550 --> 00:03:07,650
matter, simply pick the latest one.

40
00:03:07,650 --> 00:03:10,340
It should automatically preselect your operating system,

41
00:03:10,350 --> 00:03:15,600
it is available for all operating systems, if it doesn't, simply go to other downloads and manually pick

42
00:03:15,600 --> 00:03:17,250
your system there.

43
00:03:17,280 --> 00:03:21,540
So once you downloaded it and walked through the installer, it's a normal installer,

44
00:03:21,540 --> 00:03:29,090
nothing fancy about that, you can run a special command to install this serve tool, not this command

45
00:03:29,120 --> 00:03:31,640
but a slightly different one. For that,

46
00:03:31,640 --> 00:03:35,680
open up your terminal or command prompt which you have on your system,

47
00:03:35,810 --> 00:03:42,980
the path where you navigate to does not matter and run npm install -g which stands for global

48
00:03:43,130 --> 00:03:45,090
serve. On Linux and Mac,

49
00:03:45,110 --> 00:03:48,920
you might need to add as sudo in front of this to get the right permissions, on Windows

50
00:03:48,920 --> 00:03:50,690
this is not required.

51
00:03:50,760 --> 00:03:54,320
Hit enter thereafter and you might be prompted for a password,

52
00:03:54,380 --> 00:04:02,280
if you are simply, enter it and now what this will do is it will install this serve tool globally, Node.js

53
00:04:02,280 --> 00:04:07,450
ships with its own package management system which we'll have a close look at in the tooling module

54
00:04:07,790 --> 00:04:12,950
and this manages packages on a per project basis but also on a global basis

55
00:04:12,980 --> 00:04:18,450
and here we installed a global package which is now available on our entire machine.

56
00:04:18,490 --> 00:04:24,340
So with that installed, back in our project you can open up a terminal which is navigated into this project,

57
00:04:24,580 --> 00:04:31,720
so you can either navigate into your project with the cd command here or in Visual Studio Code,

58
00:04:31,720 --> 00:04:38,980
if you go to view, you can also click on terminal here and this opens up a terminal, your default system

59
00:04:38,980 --> 00:04:45,130
terminal or command prompt but built into Visual Studio Code and already navigated into your project

60
00:04:45,130 --> 00:04:47,590
folder which is very convenient of course

61
00:04:47,740 --> 00:04:52,840
and now here with serve installed, you can simply type serve and it will automatically search for the

62
00:04:52,840 --> 00:04:59,870
index.html file and serve that through this dummy web server.

63
00:04:59,900 --> 00:05:04,850
So now this gives you the address you have to enter in the browser to view your project,

64
00:05:04,850 --> 00:05:10,790
in my case it's localhost:5000 and if I do enter this here, I load the same page as before

65
00:05:10,850 --> 00:05:16,310
and we get some errors because we haven't fixed all errors but we're not getting this course error anymore

66
00:05:16,340 --> 00:05:23,650
because now, we can use modules and this course setting which they managed for us behind the scenes.

67
00:05:23,750 --> 00:05:25,480
You can ignore that favicon error here,

68
00:05:25,490 --> 00:05:27,790
we don't have a favicon hence we can't load it,

69
00:05:27,980 --> 00:05:34,060
we now just need to fix our modules and make sure we utilize this exported component.

70
00:05:34,100 --> 00:05:37,550
Important note, you should keep this serve process running,

71
00:05:37,580 --> 00:05:44,240
you can always quit it with control C or control D but if you quit it, you can't visit your page here

72
00:05:44,240 --> 00:05:44,740
anymore,

73
00:05:44,780 --> 00:05:49,100
so you will always need to restart it with the serve command whenever you want to continue working on

74
00:05:49,100 --> 00:05:50,410
the project.

75
00:05:50,480 --> 00:05:54,150
You can only visit this page here on this localhost:5000 address

76
00:05:54,200 --> 00:05:55,850
as long as this process is running.