1
00:00:02,210 --> 00:00:04,370
So we want to end up with optimized code

2
00:00:04,400 --> 00:00:07,880
and again this is mostly important for frontend projects.

3
00:00:08,060 --> 00:00:14,270
Npm is useful because we can install packages, we can manage this project with our package.json file

4
00:00:14,270 --> 00:00:18,240
and we can of course install packages that run in the browser too.

5
00:00:18,620 --> 00:00:24,410
It's our duty as a developer to ensure that we don't try to install expressjs into this project

6
00:00:24,620 --> 00:00:31,580
because we couldn't use any functionality from expressjs in the browser but we know as a frontend developer

7
00:00:31,760 --> 00:00:36,330
which packages we can use and we want to use, we find that out with research and so on

8
00:00:36,560 --> 00:00:41,600
and then we can install these packages and we can import them in our files with a slightly different

9
00:00:41,600 --> 00:00:46,300
syntax, that just happens to be primarily used frontend development

10
00:00:46,430 --> 00:00:47,990
import export syntax

11
00:00:47,990 --> 00:00:54,200
with that es module style because that is actually the style that is supported in modern browsers too

12
00:00:54,470 --> 00:01:01,700
and then this is done by npm. We install the packages and now we also want to start a script with npm.

13
00:01:02,180 --> 00:01:05,960
Now npm's work is over and nodejs takes over,

14
00:01:05,990 --> 00:01:07,500
the react scripts

15
00:01:07,520 --> 00:01:08,190
package here,

16
00:01:08,210 --> 00:01:09,330
let's look into that.

17
00:01:09,460 --> 00:01:14,990
And for that we can look into our node modules folder, run npm install in case you don't have that

18
00:01:15,050 --> 00:01:20,030
because that will install all dependencies that are listed in your package.json file and

19
00:01:20,030 --> 00:01:21,480
now in node modules,

20
00:01:21,650 --> 00:01:24,260
let's search for that react scripts

21
00:01:24,270 --> 00:01:31,230
package and you can see by the list that is very long, that all packages have a lot of dependencies which

22
00:01:31,230 --> 00:01:35,870
in turn have dependencies which is why we end up with a lot of packages being installed here.

23
00:01:36,240 --> 00:01:42,910
Now I'm in the react area though and there, I find react scripts. Now there we also have a package.json

24
00:01:42,910 --> 00:01:48,600
file because if you share a package you also need that, you need to add some extra information

25
00:01:48,600 --> 00:01:49,350
to the package.json

26
00:01:49,370 --> 00:01:55,380
file then and you can learn all about creating and sharing packages in the official npm docs if you're

27
00:01:55,380 --> 00:01:56,340
interested

28
00:01:56,730 --> 00:02:01,930
and there you will also find like the entry point that is executed which is in the bin folder, the react

29
00:02:01,970 --> 00:02:04,240
scripts js code here.

30
00:02:04,350 --> 00:02:06,230
This is in the end the code that will be executed

31
00:02:06,230 --> 00:02:08,190
and now here's something important,

32
00:02:08,250 --> 00:02:14,790
this code well in the end be executed by nodejs because the idea behind build workflows is of course

33
00:02:14,790 --> 00:02:19,150
that it runs on your computer before you deploy your optimized code,

34
00:02:19,230 --> 00:02:25,380
so before you upload your optimized code to some server. So this code will not run in the browser or

35
00:02:25,380 --> 00:02:32,630
anything like that, this code will run on your local machine and therefore it will be executed by nodejs.

36
00:02:32,700 --> 00:02:40,380
This is also the case because in the end this code will kickstart, other scripts will kickstart other code

37
00:02:40,770 --> 00:02:44,570
and it will kickstart code that will also work with your local file system.

38
00:02:44,640 --> 00:02:51,330
For example in the scripts folder, we find the build.js file and there, we will see what else it does

39
00:02:51,330 --> 00:02:54,450
and now this is actually a very complex build workflow,

40
00:02:54,510 --> 00:03:00,630
in the end this uses a tool called webpack which is used heavily in frontend development to orchestrate your

41
00:03:00,630 --> 00:03:06,690
build workflow and to compile your different files and unlock next gen features and make sure that you

42
00:03:06,690 --> 00:03:13,020
can handle the features correctly, again by using also some other tools like babel but that would

43
00:03:13,020 --> 00:03:14,490
lead too far here.

44
00:03:14,490 --> 00:03:20,580
The idea is here we are using nodejs, we can also tell that we are by the fact that we now have a different

45
00:03:20,640 --> 00:03:24,750
import export syntax and we are loading different packages here,

46
00:03:24,780 --> 00:03:30,020
we're running them and some of these packages will in the end also pick up our files,

47
00:03:30,060 --> 00:03:33,720
so our local source code we have written here in the source folder.

48
00:03:33,900 --> 00:03:38,040
We'll parse them and we'll transform the content in there, pull

49
00:03:38,100 --> 00:03:43,860
all of them together because we don't want to have multiple files in the end but only very few files

50
00:03:43,860 --> 00:03:45,440
with one main file,

51
00:03:45,450 --> 00:03:52,150
we'll pull all that code together and then also rewrite our code in a way that also runs in older browsers

52
00:03:52,320 --> 00:03:57,570
and this is all done by a couple of packages which are used behind the scenes here, which are installed

53
00:03:57,570 --> 00:04:03,650
by npm and then the code in that packages is executed through nodejs.

54
00:04:03,870 --> 00:04:08,790
And that was a lot of talking about that but I really want to get that into your heads because it's

55
00:04:08,790 --> 00:04:16,470
so important that you understand that you can use nodejs to execute any javascript code which uses

56
00:04:16,510 --> 00:04:22,530
nodejs features of course on your machine and that it's therefore also used to run utility scripts

57
00:04:22,650 --> 00:04:28,590
and you could also write your own utility script that like calculates your taxes but here, the utility

58
00:04:28,590 --> 00:04:34,860
scripts actually take our source code and then transform it as defined by the packages we use because

59
00:04:34,860 --> 00:04:38,900
we don't want to write all that build tooling code on our own.

60
00:04:39,090 --> 00:04:45,490
And that is another important area where you can use nodejs and if you want to dive into that area,

61
00:04:45,600 --> 00:04:50,520
actually a lot of the knowledge you learned in this course, like for example when it comes to work with

62
00:04:50,520 --> 00:04:56,310
files will be useful but you will also have to pick up new skills because you need to know all the ins

63
00:04:56,310 --> 00:05:02,470
and outs about working with files, managing large chunks of data efficiently and so on.

64
00:05:02,490 --> 00:05:05,200
You don't need to create a web servers or anything like that,

65
00:05:05,220 --> 00:05:10,400
you don't need to validate user input and that of course was the main topic of this course

66
00:05:10,410 --> 00:05:16,680
but this is a different area of nodejs that you can also dive into if you are interested and especially

67
00:05:16,830 --> 00:05:20,340
npm is something that is worth having a look at,

68
00:05:20,400 --> 00:05:26,370
having a look at the commands you got there so that you throughly understand what you can use npm for and

69
00:05:26,370 --> 00:05:32,370
if you want to learn how to distribute your own packages for example, the getting started guide there

70
00:05:32,550 --> 00:05:36,750
also teaches you that, how to publish and update packages and so on.

71
00:05:36,750 --> 00:05:40,140
So check these resources out if that's interesting to you,

72
00:05:40,140 --> 00:05:47,190
I found it important to mention that this also exists and is important area where nodejs and npm are

73
00:05:47,190 --> 00:05:48,180
being used.