In the last chapter we created some web servers using the core http module that ships with Node.js. We learned that we can create servers with this module but it takes a little bit of work. Instead of creating a web server from essentially scratch, npm has a lot of tools that we can use to help us do this.
The first tool that we’re going to look at is something called httpster. I can come down here in my find packages bar and look for httpster, and there it is. Httpster will give us a static file server, so with this node module we can build a web server that will serve static content.
Let’s go ahead and navigate to our exercise files. In our exercise files for Chapter Seven Lesson Four, under the Start folder, you will notice that we have a Public folder, and in the Public folder are the exact same html, css, and a jpeg image of birds that we had in the last chapter when we built a file server.
If I try to open up index.html on its own using the File API, we can see the html page but we don’t see any of the styles and we also don’t see this image and that is because this is being served with the File API instead of over in http server.
So in order to see this page rendered properly, we would need to build a file server, or we could just use httpster. Let’s go into our terminal and install httpster globally. Sudo npm install – g httpster, this will install the httpster file server globally. This means that you can set up a file server from any folder instantly. Let me go ahead and clear this console.
So if I wanted to create a file server for our birds page that we just took a look at, I can run httpster and give it a port flag that says let’s run this file server on port 3000 and give it a directory. So we want to run our file server on the public folder. This means that every file that we find in the public folder will be served. This is creating a file server similar to IIS or Apache, meaning all we have to do put our client website files in the public folder and we would have a website running.
So let’s go ahead and take a look at our browser, and this time instead of viewing the page directly using the File API, let’s go ahead and hit http localhost port 3000, and here you can see that the same page is being served but in addition to this page we are also getting birds. That is being served using httpster and style is also being served using httpster so when I hit the homepage and make a request for all of those resources, they are being served with our file server.
Let’s navigate back to the terminal. So from the terminal we still have httpster running and I’m going to go ahead and stop that with a Control C. Now we’ve installed httpster globally, what happens if we install httpster locally? Npm and install httpster, and now that we have installed httpster locally I can remove my global install of httpster. Npm or sudo npm remove -g httpster. So I have removed httpster globally and I have installed httpster locally, so let me clear the terminal screen.
What will happen when I try to run my site again with httpster? I’m going to try to run httpster on the public directory to create a website that will run on port 3000. And because I do not have it installed globally, we cannot find the httpster command. Let’s go ahead and go into our files and look at where httpster is installed. Under the node modules folder, we have installed httpster and if you look under httpster in the project, you will notice that there is a bin folder.
In the bin folder is where we are going to find the executable for httpster. So if I want to use httpster locally, I have to reference that folder so I’m going to do so now simply by saying I want to run node_modules httpster, and in the bin folder there is an executable called httpster, that is what we previously installed globally. So that’s what i’m going to use to create a website that will run on port 3000 and serve files from the public directory, and here you can see we have used our local install of httpster and now I can navigate to the browser and if I hit refresh, we see that our page is being served.
So httpster is a module that you can use to create file servers rapidly. In this lesson we took a look at how we can install and use httpster globally, as well as how we can install and use httpster locally.