1
00:00:00,180 --> 00:00:06,120
In this lecture, we're going to start the server for our application, Angular will provide us with

2
00:00:06,120 --> 00:00:10,260
a development server to locally preview our app in the browser.

3
00:00:10,620 --> 00:00:17,070
It's important to note that this server is for development purposes, it's not suitable for production.

4
00:00:17,610 --> 00:00:21,150
You may be questioning why we need a server in the first place.

5
00:00:21,390 --> 00:00:24,630
Ultimately, angular is a front end framework.

6
00:00:24,840 --> 00:00:26,160
A server is optional.

7
00:00:26,370 --> 00:00:30,960
We can open files directly in the browser without a server delivering files.

8
00:00:31,170 --> 00:00:37,260
However, it will be incredibly helpful when we start developing the master project for this course.

9
00:00:37,890 --> 00:00:42,900
Browsers impose limitations on applications open directly in the browser.

10
00:00:43,260 --> 00:00:48,870
We won't be able to make requests, upload files or and progressive web app features.

11
00:00:49,140 --> 00:00:52,320
Therefore, it is better to serve an app with a server.

12
00:00:52,560 --> 00:00:56,880
We don't have time to code a server, nor do we want to pay for one.

13
00:00:57,300 --> 00:00:59,100
Luckily, we don't have to.

14
00:00:59,280 --> 00:01:05,730
Angular provides us with a server that works on our local machines only we have access to this server.

15
00:01:06,090 --> 00:01:11,730
Other developers won't be able to see what we're working on, which is fine during the development stages

16
00:01:11,730 --> 00:01:12,360
of an app.

17
00:01:12,930 --> 00:01:14,730
The server has other features.

18
00:01:14,970 --> 00:01:17,620
It can monitor our files for changes.

19
00:01:17,910 --> 00:01:22,320
If we change a single line of code, the app and the browser will refresh.

20
00:01:22,560 --> 00:01:25,860
It's a time saver from having to do so ourselves.

21
00:01:26,190 --> 00:01:28,680
This process happens lightning fast.

22
00:01:29,010 --> 00:01:32,040
It comes with additional tooling for debugging an app.

23
00:01:32,340 --> 00:01:33,150
The best part?

24
00:01:33,390 --> 00:01:35,370
We don't need to configure the server.

25
00:01:35,640 --> 00:01:37,140
It works out of the box.

26
00:01:37,380 --> 00:01:40,530
This lets us focus on developing the application.

27
00:01:41,160 --> 00:01:43,290
There is one downside to the server.

28
00:01:43,500 --> 00:01:45,150
It's not meant for production.

29
00:01:45,420 --> 00:01:48,600
It can work well for one to a few developers.

30
00:01:48,870 --> 00:01:54,650
Once we start receiving significant traffic, it won't scale as well in a future section.

31
00:01:54,690 --> 00:01:58,110
We will look at our options for servers when deploying our app.

32
00:01:58,440 --> 00:02:02,300
For now, the development server will work for our purposes.

33
00:02:03,450 --> 00:02:05,730
We can start the server with the Seelye.

34
00:02:05,910 --> 00:02:06,900
Let's turn it on.

35
00:02:07,140 --> 00:02:10,110
Be sure that you're inside your project's directory.

36
00:02:10,440 --> 00:02:16,800
The command will search for a valid angular project before turning on the server inside the command

37
00:02:16,800 --> 00:02:17,250
line.

38
00:02:17,310 --> 00:02:20,190
We will type the N.G. Serve Command.

39
00:02:22,700 --> 00:02:29,360
In some tutorials, some developers will recommend starting the server with the 21:00 start command

40
00:02:29,360 --> 00:02:35,060
instead of the N.G. Serve Command, both commands are 100 percent identical.

41
00:02:35,330 --> 00:02:40,820
Behind the scenes, the 21:00 Start Command will run the Nji Serve Command.

42
00:02:41,150 --> 00:02:45,140
Feel free to use either one before running this command.

43
00:02:45,350 --> 00:02:50,060
Let's check out additional information about it and the help option.

44
00:02:52,660 --> 00:02:59,500
Once again, we're presented with an exhaustive list of options we can modify the port, enable SSL

45
00:02:59,500 --> 00:03:01,600
or target a specific browser.

46
00:03:01,990 --> 00:03:05,470
We don't need to provide this command with additional information.

47
00:03:05,680 --> 00:03:07,180
We can run it as is.

48
00:03:07,420 --> 00:03:10,420
Let's run the command without the help option.

49
00:03:13,090 --> 00:03:18,760
After a few moments where presented with information about the server, the most important piece of

50
00:03:18,760 --> 00:03:20,830
info is the URL to the app.

51
00:03:21,040 --> 00:03:23,200
Let's check out the app in the browser.

52
00:03:30,190 --> 00:03:33,190
Congrats, you've got a functioning, angular app.

53
00:03:33,490 --> 00:03:39,400
You may see something slightly different than me, the default start page usually changes in future

54
00:03:39,400 --> 00:03:40,630
versions of Angular.

55
00:03:40,930 --> 00:03:44,180
Regardless, the app should be viewable in the browser.

56
00:03:44,200 --> 00:03:50,630
If everything works, we can view the app via a URL called local host local host.

57
00:03:50,710 --> 00:03:53,230
It's a special domain that points to your machine.

58
00:03:53,620 --> 00:03:56,920
The browser will know to send the request to your machine.

59
00:03:57,130 --> 00:04:03,460
Where Angular Development Server will intercept the request, it'll send back the page we see in the

60
00:04:03,460 --> 00:04:04,060
browser.

61
00:04:04,330 --> 00:04:10,840
Alternatively, the app can be visited with the IP 127.0.0.1.

62
00:04:11,140 --> 00:04:14,490
Either URL works after the domain.

63
00:04:14,500 --> 00:04:15,610
We have a port.

64
00:04:15,910 --> 00:04:19,390
The port is written with a colon, followed by the port number.

65
00:04:19,660 --> 00:04:22,270
You can think of a port as a door to a house.

66
00:04:22,570 --> 00:04:26,070
Homes have multiple entrances in a similar sense.

67
00:04:26,140 --> 00:04:28,420
Computers have numerous entrances.

68
00:04:28,750 --> 00:04:31,780
Programs can be assigned ports for accessing them.

69
00:04:32,050 --> 00:04:36,370
In our case, we're accessing the app via Port 4200.

70
00:04:36,970 --> 00:04:39,190
Let's learn how to turn off the server.

71
00:04:39,430 --> 00:04:42,040
It's simple switch back to the command line.

72
00:04:44,530 --> 00:04:48,910
We can terminate the server by pressing control, see on our keyboards.

73
00:04:49,150 --> 00:04:52,600
If you're on a Mac, you can press Command C instead.

74
00:04:53,020 --> 00:04:55,120
Great for the rest of this course.

75
00:04:55,330 --> 00:04:59,020
You should always have the server running unless I state otherwise.

76
00:04:59,410 --> 00:05:02,230
We've got everything we need to start writing an app.

77
00:05:02,470 --> 00:05:07,540
In the next lecture, we're going to explore the files generated by the Seelye.