1
00:00:02,220 --> 00:00:04,210
At the moment I'm not using the weapon.

2
00:00:04,230 --> 00:00:07,480
Def server now using it is very straightforward though.

3
00:00:07,740 --> 00:00:13,320
We just have to go to the packaged old Jason File and now there instead of light server let's use webpage

4
00:00:13,350 --> 00:00:17,520
dash def server like this.

5
00:00:17,550 --> 00:00:20,040
Now let's start NPM start again.

6
00:00:20,070 --> 00:00:26,700
Now what you'll see is that this now spins up a server running on local host 880 and it spins up the

7
00:00:26,700 --> 00:00:28,380
webpage build workflow.

8
00:00:28,380 --> 00:00:32,060
So if we now visit low those 80 80 we see our project there.

9
00:00:32,070 --> 00:00:38,100
The interesting thing now is if we change something in code for example if just add a console log here

10
00:00:38,610 --> 00:00:43,160
and I saved as you watched the bottom here you see it re compiles.

11
00:00:43,200 --> 00:00:49,170
However if you reload you don't see the log here and all in the sources tab and the webpage source tab

12
00:00:49,170 --> 00:00:50,460
if you go to app.

13
00:00:50,490 --> 00:00:51,920
Yes you don't see the log here.

14
00:00:51,960 --> 00:00:54,860
So it actually did not load the correct code.

15
00:00:54,870 --> 00:01:02,780
This becomes clearer if I delete this bundle js file here for now restart does NPM start process you

16
00:01:02,780 --> 00:01:04,280
will see it still works.

17
00:01:04,280 --> 00:01:08,990
And by the way don't wonder that the dist folder stays empty now in the webpage.

18
00:01:08,990 --> 00:01:15,530
Def server mode the bundle is generated in memory only so it is there and it is loaded by the death

19
00:01:15,530 --> 00:01:21,110
server but it's not actually written to the disk but you will see that if you reload this page novels

20
00:01:21,110 --> 00:01:22,220
of crashes.

21
00:01:22,220 --> 00:01:26,420
Now I set the file would be there but it doesn't seem like it's there.

22
00:01:26,510 --> 00:01:28,390
Right now it's missing on the disk.

23
00:01:28,400 --> 00:01:34,610
As I said and of course we are importing from this bundle J.S. in index HD Himmel but indeed you can

24
00:01:34,610 --> 00:01:36,830
believe me it is generated in memory.

25
00:01:36,830 --> 00:01:43,040
The problem just is things are not wired up correctly at the moment to tweak this we have to go to the

26
00:01:43,040 --> 00:01:51,830
webpage picked conflict J.S. file and there in output actually add a public path key and set this to

27
00:01:52,670 --> 00:01:53,420
dist

28
00:01:56,310 --> 00:01:59,080
if you now safeties and restart.

29
00:01:59,170 --> 00:02:06,370
Now you see it reloads and now you see high here in a source's tab you now also see that correct output

30
00:02:06,370 --> 00:02:10,470
there if you go to the DOT folder source app apt yes you see the console log statement.

31
00:02:11,150 --> 00:02:15,990
And if I now go to app yes and delete that it rebuilds.

32
00:02:16,020 --> 00:02:18,470
And now the console log statement is gone there.

33
00:02:18,510 --> 00:02:22,020
This is just an additional configuration that is needed for the webpage.

34
00:02:22,020 --> 00:02:28,560
Def server to really understand where the output is written to you and where does is relative to the

35
00:02:28,860 --> 00:02:33,980
index H to mail file because by default the webpage def server serves an index each file.

36
00:02:34,080 --> 00:02:40,020
It finds in the same folder as you run this script here which is correct but then it doesn't make the

37
00:02:40,020 --> 00:02:45,570
connection to the deceitful incorrectly which is why we have to inform Westpac def server with public

38
00:02:45,570 --> 00:02:48,080
path where to find our assets.

39
00:02:48,090 --> 00:02:50,980
So our model J has followed this case.

40
00:02:51,000 --> 00:02:55,740
Now if we quit the development server there is one other setting a one apply year in development mode

41
00:02:56,130 --> 00:02:59,280
and I'll do this right at the top of the export exported object.

42
00:02:59,370 --> 00:03:01,800
That mode to development.

43
00:03:01,830 --> 00:03:08,100
This will in the end tell webpage that here we're building for development and that it will do fewer

44
00:03:08,250 --> 00:03:14,220
optimizations to improve our development experience make debugging even easier and give us more meaningful

45
00:03:14,280 --> 00:03:16,420
error messages for example.

46
00:03:16,470 --> 00:03:22,020
So in development we also definitely want to add this key here and with Dad and the webpage deaths to

47
00:03:22,020 --> 00:03:28,320
reconfigured we now get the finished development workflow now for production will need to adjust as

48
00:03:28,320 --> 00:03:31,140
workflow a bit because dear we wanted different output.