How to Setup a Node / Express Static Web Server in Five Minutes
https://blog.kevinchisholm.com/javasc...
The example code for this video can be cloned here: https://github.com/kevinchisholm/node...
In this video, I’ll show you how to set up a Node / Express static web server in five minutes.
If you’d like to follow along with the code examples, please clone this github repo.
Here in package.json, I have an npm scripts start, and that points to, basically executes the command node web-server/app.js. So what that’s saying is that if you type the npm start in the terminal it will pass this to node, and it’s saying hey node, look in the web server folder and execute app.js. Let’s look at that file.
So app.js recreates three variables. The first variable is a reference to the express node module, the second variable is path, which is a reference to the node path module, which we’ll talk about in a few seconds, and the third variable is an instance of express, so we’re instantiating express.
So next up we’re setting the port. We’re saying app.set port to 3000. I could easily have just created a variable called port name, where port = 3000, but it’s kind of a good practice, because there’s other places in the code we might want to get the value of port.
Next, on this line, we’re saying app.use, calling the use method of app, and we’re passing it, basically a folder name. We’re saying express.static. Express.static is a really important method. This is where, kind of, where all the action happens. It’s telling express, hey, my entire application is going to start here. This is the root of our static web server.
And we’re using the __dirname node keyword to say whatever folder we’re in, and right now we’re in this folder, we’re in the web server folder. We’re going to go up one level and then look in the www folder. So this ../ means go up one level and look in www, so if we go up one level from app.js we wind up in web server and then we go into www.
So this is a really important line. This is kind of what makes express run things, and what makes is so special is this line right here would require dozens of lines of code if you wrote it yourself with node to check for file types, and extensions, and then serve the correct files.
Here we’re you’re just saying to node, to express, hey if somebody makes an http request in a www folder, just satisfy that request, whatever that kind of file is that’s being requested. So it could be an html file, a jpeg, a gif, a JavaScript css, whatever it is, just satisfy that request.
And then we’re saying app, listen, so we’re telling the express app to listen. We’ll import number 3000, we’re saying app.get port, so whatever the value of port is, it goes here. It’s 3000. And this callback, in this case it’s simply is for demonstration purposes, so what we’re saying is once that web server has started, log this message to the console, which we’ll see in a second. And when we start the web server, we’ll see a message that says “server is running on an http:localhost and then we use app.get to import numbers, so this will say it’s running on port 3000.
So let’s fire up the web server. I’ll go to a terminal and I’ll run the command npm start, and as you can see, we get that message “The server is running on http://localhost:3000 and if we look back at the code example again, we see that message is being set here.
So now we know the web server is running. Let’s take a look at simple web page and I’ll look at local host:3000 and we see an example web page. Nothing too special, but if we look in our JavaScript console, and you look at the network tab, and then refresh the page, you’ll see there’s two network requests going out.
The first one is for local host and if we look at the response, we see that we’re getting html back. So that’s the contents of our html page. And the second request is for the node logo, and that’s actually coming from KevinChisholm.com.
Let’s look at why those requests happen. Well, here in the www folder we have index.html, and index.html is a very special name. It says to any web server, hey if the user doesn’t specify a file name, serve up this one. And this, this we can just disregard, it’s just some compressed css that makes the page look a little styled.
But this is what we actually see in the browser. And here is the reference to the image file. So this is another http request. So again, it’s kind of points to what makes the express static web server so powerful is that there are two requests – first for this actual page for the index.html file, and then in the index.html file we make another http request for this image.
So this line right here does all the heavy lifting there. It says whatever http request is made, the www folder just satisfy it.
...very sorry, youtube transcription text limit reached here : - (