Name: 初めてのNode.jsウェブサーバ (Your First Node.js Web Server)
Uploaded: 2021-01-14T10:42:10.000Z
Duration: 8 min 57 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

My name's Kyle with Webb have simplified in this video.

to 不定詞

I'm going to walk you through all the steps that you need to take in order to create your very first Web server using Know Js.

The first thing we need to do is download Know Js from Know Js dot or GE.

There's two options, as you can see, that we can select from There's the long term support version, and there's the current version.

I recommend going for the long term support version because the current version could have potential bugs in it.

That makes learning difficult if you run into these because you won't be sure if it's your problem or the actual codes problem.

So I recommend going with long term support version because this is the most tested version and you know it'll have the least amount of bugs.

So just click on this and choose where you want to download to save it and then fall the different download steps as they come up.

It's extremely straightforward, and after you're done with that and we're going to need a jump into visual studio code in order to get started.

Now that we have no Jess downloaded and installed, it's time to talk about what no Js really is.

No, Jess is just a way for you to run Java script outside of the browser.

It could be used to run best hop abs servers were really anything else that you want to do with Java script, and the thing that we're going to do is actually create a Web server using know Js.

So to get started with that, what we need to do is create a Java script file inside of our project, and we could just call it whatever we want.

In our case, we're just gonna call it ap dot Js and inside of this job script file, we need to create our server and tell it to start listening on a certain port.

So the first thing we need to do is we need to require a certain library called http that is going to be used to start the server so we could just create a variable called http and to require a library in know Js you just type the require keyword followed by the name of the library, which in our case is Http.

This will include the http library into our code inside of this http variable that we created.

The next thing we want to do is we want to create a variable that tells our code what port we're going to be listening to for our server.

And we're going to use this later and then next we can actually create our server.

So to do that will create a server variable here.

And we're gonna use that http library we just imported and call the create server function on this object, and it creates server function.

Takes a single function that has two parameters, which is the request and the response parameters.

So which pass it on a function here with the request and response parameters.

And an inside of this function is we're going to handle all of the different activity on our servers every time someone request a paid show.

Our server, it is going to call this function right here, and we're going to implement dysfunction in a little bit.

The next thing we need to do is actually set up our server.

So it'll listen on the port that we wanted to So now that we have this server object, we could just call server dot Listen passive.

That port variable we created to tell it to listen import 3000 and then this takes a single function.

That little call if there's an air potentially.

So as soon as our server starts listening, it will call this function and not even pass an air or nothing.

It was successful, so we're gonna check to see if that air exist.

And so we're just gonna log out a message saying that something went wrong.

And then we're also going to pass the air along to that mog statement so that when we check our logs, we can see what the air was that happened.

But if there was no air when we want a log.

But our server is listening on port and we're gonna pass in that port variable you created earlier.

So now our servers actually listening and in order to run our server or we need to do is type node followed by the name of the file we want to run.

And since our terminal is open inside of this project, we could just type node app digest it.

We enter, you see, it'll say servers listening on Port 3000 which is perfect.

But our server doesn't actually do anything because we haven't implemented the function inside of the create server function.

So let's end our server by hitting control, See?

And then what's actually in fluent this function here?

So what we want to do is we're gonna return some response to the user and to do that we use the response object.

But it passed into this function so we can say it responds that right?

Hello, Noted every single person that request something from our server.

And then when we want to end our respondents saying that we've written everything we want to write, we just type response that and and never get.

That is everything we need to do in order to get our server actually responding to actual requests.

So if we say that we call note not ab Js inside over council again, and then if we just opened up a browser and we go to a local host 3000 you'll see that we get hello load node being printed out into our browser, which is amazing, but we probably want to actually render HTML from our Web server rather than plain text.

The first thing we need to do is created html file that we want to render.

Create a new file called index dot html and N.

If you just type in exclamation point and enter, it will generate the outline of an HTML document for you and then inside of the body, we can just put this is HTML so that we know that we're actually rendered html here instead of our plain text back in our app dot Js file.

We need to change the function here that we're calling with each request to tell it to send html instead of this plain text of Hello note.

So the first thing we need to do is tell the browser that we're going to be writing html.

To do that, we'll call the right head function, and the first parameter of right head is the status code of this operation, and 200 is a good status code.

So we're going to use 200 which indicates that everything went okay and then the next parameter is going to be the different headers that you want to set.

And one of those letters is called content type with a hyphen in between content and type, and that is going to be the key of our object.

And the value of that object is going to be what value we want to set to that header.

And in our case, we're using text slash html.

And this just tells the browser that the information that's being sent to it is an HTML document so should parse it as HTML.

Then we want to read the file index html that we created earlier.

So we need to import another library into our app dot Js and this is going to be called F s.

We just required that library just like this.

And now we have a variable called F s that has all the file handling that we need to be able to do so down here in the APP Digest, where is going to call the reed file function of F s.

And this function takes the name of the file we want to read, which is index dot html.

And then it's going to take a function which is going to have an Arab property.

If air happened in a data argument, which is going to be all the data from inside of that file and in here, what we want to do is first we want to check if there's an error, because if there's an error, we want to tell the browser that we couldn't find what we're looking for so we can say right head with the status of 404 and four or four.

It just means not found we couldn't find what you're looking for.

So that's how the browser knows that is unable to find this.

And then we can use our right method that we talked about earlier just to write out some text of the screen.

So you just say file not found, for example, and normally you would want to render a specific while not found page.

But in our case, word is going to be writing some text, and in the case that there was no air, we want to actually just right the data from the file so we'll say rez dot Right and data and this data perimeter right here is just all the information inside index dot html so we can remove this right, And we want to move our end inside of this call back here for this function.

So that would be called after are right here.

And now if we save that and refresh, you noticed that nothing actually happens and you're thinking Why is this?

I changed all of my code, but that's because you have to restart your server in no jazz every single time you make a change.

So if we just end our server and restarted and now refresh our page, you'll see that we're doing in our HTML rendered right here that we created in our index dot html file and this is perfect.

We just set up our very first Web server using know Js, and it was incredibly simple.

If you guys have any questions for me, let me know down in the comments below.

And if you're interested in learning more about no jazz, make sure to check on my next video over here, which is going to be about how to set up payments for a shopping cart that I created in my introduction to Web development playlist, which is also going to be linked over here.

Also, don't forget to subscribe if you enjoy this and want more similar content.

And with that, thank you guys very much for watching.