How to Set Up a Node.js Static File Server

Introduction to Building a Static File Server

Building a Static File Server is a very quick and easy way to host your own webpage. Steps 1-9 will help you to do all the background work to help your computer, in layman's terms, talk to the internet and put whatever you would like on it.

Some of the steps may feel really weird, since we are not working in the internet browsers(browsers like Google Chrome or Mozilla Firefox) directly, but trust me you will see how it comes together in the end.

What you put on your server and therefore up on your personal browser is up to you, and I would suggest you learn how

Step 1:

1. Download LTS version of Node.js from the following website: https://nodejs.org/en/.
Double click on the downloaded file and follow the installation instructions.

We will not be doing anything fancy so just click Continue, and Agree to the licence agreement all the way through and watch it install.

Node.js is a framework for programming in JavaScript. A framework is simply a system that someone else created to organize and maintain your programming projects. The Node.js framework comes with a package controller called npm. A package controller lets you access a repository of pre-written code to perform common tasks. We will be using npm to install express.js, one of the most popular packages for JavaScript.

Step 2:

With Node.js installed we can now use the npm command in the terminal. Npm command? Terminal? If you don’t understand don’t worry about these technical terms, by the end of this you will understand exactly what is going on. Open the terminal by pressing the command + spacebar combination, typing in terminal, and pressing enter. Or in Finder navigate to /Applications/Utilities and double click on Terminal.

Your terminal should look something like this, expect if you haven’t worked in the terminal before yours will probably be black and white instead of black and green. Once you learn to use the terminal it is a very powerful computing tool. With it you can tell your computer exactly what to do using commands. You could almost imagine the terminal as a control room for your computer, similar to the control rooms used by TV programs. All of the work is being done in the control room while you enjoy the show. Today you are going to get to use your computer's control room.

Step 3:

Let’s run our first command. Type npm and press enter. If you installed Node.js correctly the terminal should return something like this:

This confirms to us that our package manager npm is working and ready to be used. What is printed are some helpful hints on how we are going to use NPM to build our static file server. If you didn’t get something like this and instead got a bash error or something similar try reinstalling Node.js. If that doesn’t work, consult google with your error because it is out of the scope of this tutorial. Also, leave the terminal open. We will be using it more later.

Step 4:

Now that we know what the terminal is, and that Node.js is installed properly we can get down to the fun coding side of things. Open up finder located on the bottom left hand of your Dock and navigate to your documents folder. Here we want to make a folder which we will be your root directory. You can do this by command clicking or right clicking on the white space in your documents and selecting New Folder. Name it whatever you like and save it. I named mine StaticFileTutorial.

With that folder created, make another folder inside of it called public. Fill this folder with the files that you want your server to serve. If you want to be able to read the file in the browser make sure to make it a text file (with the .txt suffix), otherwise the file will just download. Again, the contents of this folder will be what you will be serving to the interwebs!

Now we want to go to our terminal again and type the command cd Documents/StaticFileTutorial/. You will want to replace where I wrote StaticFileTutorial with the name of the folder that you just created. The cd command stands for change directory, and is a way of navigating in your computer, just like using the finder. The second argument of the command is the path we want to go to, in this case we are navigating to our project directory that we just created.

Step 5:

Now that we created a project directory and navigated to it with the terminal we want to create our project files. The first file we need will be called index.js. This is a common name for the base file of all web development projects. We create this file with the command touch index.js. Touch is the command to make a new file, and index.js is of course our file name. If you go back to your finder window and navigate to your project directory you will see that the newly created index.js file is there! Isn't that neat?

Step 6:

The index.js file is where all the code will be for this project. Before we start working on that though, let’s install the express module with npm as described in the previous steps by executing the npm install express command in the terminal. ( This may take a minute or 2)

Again, express is pre-written code that we will use to create our static file server. We could do it all in JavaScript, but you will quickly learn that coding is all about efficiency, so why take a long time to do something when someone has already done it for us.

NOTE: I already have expressed installed, so your results make look a little different. As long as there are no errors, you are good to go! If there are errors, consult google, he is your friend.

Step 7:

With express installed we are ready to start coding. Open your index.js file in finder with the text editor that comes standard with your computer. You can do this by command clicking the file, navigating to the Open With menu and selecting TextEdit.

This should open our empty index.js file in a window like this

CODING TIME!!!!! Here comes the code, here comes the code, here comes the code....

7. Type the following code into the file and save it. I will explain it line by line below.

// Part 1 var express = require('express');

// Part 2 var app = express();

// Part 3 app.listen(3000, function () { console.log('Example app listening on port 3000!'); });

// Part 4 app.use(express.static('public'));

Isn’t that beautiful. This is literally all the code you need to create your static file server. We are almost there!

Line by line explanation // Part 1 var express = require('express');

This line of code tells the program that we are using the express application we just installed. The framework Node.js we installed in the first step will know what to do with it. If you know a thing or two about programming we are putting express program into a variable, so that we can use it in the rest of our code.

// Part 2 var app = express();

This line starts our express program. So again the first line says we are using express, and the second one starts the program so that we are ready to use it. You can imagine the first line like you were downloading a program to use on the computer, and then the second line actually clicking on it to start running it. We can now use our running express program by referring to the app variable.

// Part 3 app.listen(3000, function () { console.log('Example app listening on port 3000!'); });

This next chunk of code is really cool, but also kind of complex. we are taking our app, which we created and started in the last line of code( part 2) and telling it to listen to something with 3000, and then a function of some sort. It kind of looks crazy right? You know know if we didn’t have express this simple line of code would look about 50 times longer, and 50 time crazier, so thank you express. In technical terms what we are doing here is starting a local server and telling it to listen for things or events on port 3000. I don’t want to confuse you too much, so if you just want to trust me on this one you can skip to the next line of code, but I will try and explain it as simply as possible. So again imagine the program called app that we started, we are telling it to make a server for us so everyone can access the files we specify, just like a website.

// Part 4 app.use(express.static('public'));

This last line of code is where the real magic happens. It actually allows people to access the files we specify. It has crazy cool how much code has been condensed into this little line, but I will just explain its function. Anything that we put in our public directory, can now be seen by the internet when we run this program! WOW, if that doesn’t get you going I don’t know what will.

Step 8:

Now that we have coded our server let’s run it! We do this by going back to the terminal and in our project directory typing the command node index.js. If everything is written correctly the terminal should return what you included in your console.log function, in my case it would say Example app listening on port 3000!. Congratulations! Your server is now running, the files in your public directory are now accessible on the internet!

Step 9:

Try testing out your file server. Put a file in the public directory, then open your browser and type localhost:3000/[YOUR FILE NAME] . You should see this file now displayed in your browser!

EXTRA: Your friends can view your static file server too! Open up a new terminal, your previous one is busy running your server, and physically cannot do that and anything else at the same time. So open up a new terminal, and type ifconfig to determine your machine’s IP address. On a friend’s computer, type [YOUR IP ADDRESS]:3000/[YOUR FILE NAME]