1
00:00:00,840 --> 00:00:04,500
In this section we're going to start working on the no J.S. web application.

2
00:00:04,590 --> 00:00:09,630
If you're not familiar no J.S. or you don't know any javascript and you don't want to know any javascript

3
00:00:09,840 --> 00:00:10,820
that is totally fine.

4
00:00:10,830 --> 00:00:15,690
You can pause the video right now skip to the next section where I will have a text link for you to

5
00:00:15,690 --> 00:00:20,460
download the two files that you're going to need so totally fine if you don't want to write any javascript

6
00:00:20,490 --> 00:00:21,400
at all.

7
00:00:21,540 --> 00:00:26,970
Otherwise stick around and we'll get started on this tiny web application so to get started I'm going

8
00:00:26,970 --> 00:00:28,920
to first flip back over to my terminal.

9
00:00:28,950 --> 00:00:32,670
You'll notice that I'm still inside of that read this image directory.

10
00:00:32,850 --> 00:00:38,040
I'm going to go up one directory and then I'll make a new project folder and Louis will call this how

11
00:00:38,040 --> 00:00:44,650
about simple web because it's going to be a rather simple straightforward web application.

12
00:00:44,650 --> 00:00:50,180
I'll then change into that directory and then I'm going to again start up my code editor inside there.

13
00:00:51,830 --> 00:00:57,170
Now a quick reminder I was able to use the code command right here because I've set up Visual Studio

14
00:00:57,170 --> 00:00:59,360
code to be executed for my command line.

15
00:00:59,360 --> 00:01:01,510
So if you don't have that set up totally fine.

16
00:01:01,520 --> 00:01:04,550
All you really need to do right now is open up your code editor.

17
00:01:04,580 --> 00:01:10,670
Based on that simple web directory that we just created then inside of here we're gonna create first

18
00:01:10,760 --> 00:01:17,180
a file called package dot Jason inside this file.

19
00:01:17,200 --> 00:01:22,030
We're gonna put together a little bit of configuration to describe how our node application is going

20
00:01:22,030 --> 00:01:24,160
to work exactly.

21
00:01:24,320 --> 00:01:30,710
I'm going to first begin by placing a set of curly braces and then inside there I'm going to place a

22
00:01:30,710 --> 00:01:37,200
key wrapped in double quotes and the first section we're going to put together is gonna list out all

23
00:01:37,200 --> 00:01:42,270
of the different dependencies that our application needs to run correctly.

24
00:01:42,290 --> 00:01:46,590
Notice how I'm rapping the word dependencies inside of a set of double quotes.

25
00:01:46,790 --> 00:01:53,830
I've got a colon afterwards and then I open up a cruelly brace object then inside that set of curly

26
00:01:53,830 --> 00:01:54,660
braces.

27
00:01:54,880 --> 00:02:00,100
I will put down another set of double quotes and I'm going to say that in order for application to work

28
00:02:00,100 --> 00:02:03,260
correctly we need a copy of Express.

29
00:02:03,340 --> 00:02:08,680
I'll then put down a colon and then for the version I'm just gonna put a star to say we can use any

30
00:02:08,680 --> 00:02:10,250
version of express out there.

31
00:02:10,270 --> 00:02:13,740
We don't care after that.

32
00:02:13,830 --> 00:02:18,690
I'm then going to put a comma on this line right here and then I'll add in one more section.

33
00:02:18,720 --> 00:02:23,070
This is going to be a section that we will call scripts and this will contain some of the different

34
00:02:23,070 --> 00:02:26,600
scripts that you can run it to get our application up and running.

35
00:02:26,670 --> 00:02:30,500
I'm going to open up another set of curly braces just like we did a second ago.

36
00:02:30,510 --> 00:02:36,180
I'll put a set double quotes and we're gonna create a script called start anytime that someone runs

37
00:02:36,180 --> 00:02:37,420
the start script.

38
00:02:37,440 --> 00:02:44,640
We are going to execute node index dot J.S. like so this right here is going to be what ultimately starts

39
00:02:44,640 --> 00:02:47,110
up our server and gets it running.

40
00:02:47,370 --> 00:02:47,600
All right.

41
00:02:47,610 --> 00:02:49,250
So that's it inside of the package Dot.

42
00:02:49,250 --> 00:02:54,630
J some file so you have specified dependency and we've created a single script.

43
00:02:54,750 --> 00:03:01,340
I'm not gonna make sure that I save the file and then I'm going to close it and create a second file

44
00:03:01,340 --> 00:03:03,380
inside the same directory.

45
00:03:03,710 --> 00:03:11,690
And the second file I will call index dot J.S. so inside of here we're gonna first begin by requiring

46
00:03:11,690 --> 00:03:15,620
in the Express library that we just marked as a dependency

47
00:03:19,960 --> 00:03:25,740
or then use the Express library to create a new app like so.

48
00:03:25,750 --> 00:03:29,160
And then we're we are going to set up one single root handler.

49
00:03:29,200 --> 00:03:37,500
We're gonna say app dot get I'll pass in a string with a forward slash as a second argument I'll pass

50
00:03:37,500 --> 00:03:43,660
in an arrow function that gets called with a request in response object and open up a function body

51
00:03:43,720 --> 00:03:49,990
after placing a function arrow then inside of here we'll do resort sent and we're gonna send back a

52
00:03:49,990 --> 00:03:53,000
message of Hi there.

53
00:03:53,020 --> 00:03:58,240
So now anytime someone visits the root root of our application we are going to immediately send back

54
00:03:58,240 --> 00:04:00,420
a string that says simply Hi there.

55
00:04:00,430 --> 00:04:05,680
And so ultimately when we run our application my expectation is that in the browser we should be able

56
00:04:05,680 --> 00:04:08,710
to visit this running web application and see Hi there.

57
00:04:08,710 --> 00:04:15,510
Up here on the screen now the last thing we have to do is set up our application to listen on a port

58
00:04:15,870 --> 00:04:17,550
Sudan at the bottom of the file.

59
00:04:17,580 --> 00:04:25,590
I'll say app dot listen and I'll specify the port that we are going to be listening to as 80 80 as a

60
00:04:25,590 --> 00:04:29,850
second argument I'll pass in an arrow function like so.

61
00:04:29,850 --> 00:04:35,280
And then finally after the app starts listening to this port correctly we will print out a little message

62
00:04:35,280 --> 00:04:44,200
that says listening on port 80 80 like so and then I'm going to make sure that I save this file.

63
00:04:44,200 --> 00:04:45,270
All right so that's pretty much it.

64
00:04:45,280 --> 00:04:50,800
We've got our package dot Chase on file that defined some configuration around our project and we've

65
00:04:50,800 --> 00:04:54,520
got the index dot J file that contains the actual server logic.

66
00:04:54,520 --> 00:04:56,270
So we're gonna take a quick pause right here.

67
00:04:56,290 --> 00:04:59,680
When we come back the next section we're going to start talking about how we're going to put together

68
00:04:59,710 --> 00:05:00,800
our darker file.

69
00:05:01,030 --> 00:05:02,770
So quick break and I'll see you in just a minute.