Node.js Tutorials

Node.js Part 3 – Building a Static Page Server

all right so we have no js' installed and the first script that I want to write or that I want to show you is just a very simple web server and if you've

watched any other node.js videos you may have came across this example here which is on the node the node.js org home page and it's just a couple lines of code and basically it's an h2 it's a it's a

server it's going to create HTTP headers and a request and a response and it's doing this using the HTTP module node has modules that you can use it has what's called NPM or the node package

manager where you can download different modules to do different things in this case we're using the HTTP module and this is how you will we would include it okay create a variable and set it to

require and then whatever the module all right so here we're getting the HTTP HTTP module then we're using the create server method okay and that takes a callback function which takes two

parameters request and response then we are writing the header all right so response dot write head 200 means it's good it's okay we're setting the content type to just text and then

we are ending it but we're also adding in something that we want to print out on the screen which would be hello world and then finally we want to use listen to assign the port to the to the IP

address okay so this is obviously this is the loopback IP same as localhost and port 1 3 3 7 and then we're just simply logging I'm just printing out that the server is running

then the IP address and the port so that's the entire script I'm going to do something very similar to this except I want to use the connect module with this the way it is now it's just going to

print out hello world I want to actually be able to serve static web pages all right so let's close that up and let's see I'm just going to on my C Drive I'm going to create a new folder and just

call it note apps and what I'm going to do is create a javascript file called server Jas and I just want to make sure that extensions are showing let's see alright so by

default this is saying hide empty I mean sorry hide extensions for known file types I want to uncheck that I want to be able to see the extensions or you can see

this is server dot JSP xed we don't want that and I would advise you to do the same if you're using Windows all you need to do is go to organize folder and search options and then view and then

you'll find it here I also want to show hidden files alright and I want to change the default program for JavaScript files I want to change it to notepad plus plus which is in the

Program Files folder obviously you can use any editor you want for just simple stuff I like to use notepad plus plus all right so here's our this is going to be our app this is

going to be deal well actually I should this is going to be the only JavaScript file I want to be able to serve HTML pages all right so the first thing we want to do is say variable connect and

that's going to go to the connect module all right and we want to assign a port so I'm going to create a variable called port and we're going to set that to 3,000 all right now I'm going to use the

create server method so connect dog create server and inside create server um I'm going to say connect what connect that static so what we're doing here is

assigning a directory for our static HTML pages and we want to use the directory we're in so we can use two underscores and then dar name alright and then we want to just remove that and

we want to put a dot listen all right so we want to listen on three thousand which we put in a variable so we can just say listen port and then finally we just want to say console dot log will

say connected the court and then we can just concatenate on port all right so that's our entire server so let's save that in one thing we need to do before we run this we need to install the

connect app the connect module so we want to go to I'm going to go to my C Drive and know what no taps and then to run a script to run

a JavaScript file all we need to do is say node server Jas all right because the the server Jas is in the same directory so we don't need to have any folder names but we could also just say

node server all right so having an issue here unexpected token I'm sorry that needs to come off that semicolon all right so let's try that again

can't find module connect that's because we didn't install it which that's what I was just coming to do so to install a module we want to use NPM all right so all we need to do is say npm install

connect and it goes through this mumbo-jumbo now I think I'll do a video on NPM itself just so we can just so you can understand more about it and how it

works now since we install the module if we go back to no taps you'll see this node modules directory and it automatically creates that when you install a module from NPM all right and

we have our connect and then this is just basically all the files for the connect all right and you can even see the modules that it uses but we're not going to get into

that we don't need to so now let's try to run it again say node server we want to allow access email and it says connected via port 3000 all right so our web server is running I just want to

mention that you don't have to use server as your file name we could just as well name this app das and then said no tap alright so just so you know that all right so now if we go to localhost

3000 all right and we get this cannot get message that's because we have nothing in there all right so let's go ahead and put in an index dot HTML document

and we'll open that up I'm I'm not going to put I'm not going to create a whole HTML document we'll just say this is the index file okay we'll save that and come over here and reload and our index file

loads okay so we have a web server running which we can add static pages to so let's say we want to add in a boat page well I want to do that

so now we should be able to go to localhost 3000 slash about I'm sorry about HTML all right so you can basically just serve static web pages um and it's a very very simple very fast

server now if you're building a large app then you probably want to use something like Express which you can have rep different kinds of routing systems and things like that but we'll

eventually get into that so that's it for this video in the next video I think I just want to go over NPM a little more

We will build a server that serves static html pages from the app directory