Victor Queiroz

Node.js — Creating a Simple Web Server with Express 4

nodejs express javascript

Just like me, you’ve probably asked yourself this question:

Can I create a simple web server using Node.js? I just want something to run HTML files and load scripts easily.

Answer: Yes, you can do that with Node.

Keep in mind that you should run all these steps from inside your project folder. Follow along with us step by step and see how simple it is!

Creating the package.json (optional)

It’s just as simple and easy as the next step. Go to the command line and type:

npm init

Fill in all the questions and move on to the next step.

Creating the bower.json (optional)

Just as simple as creating the package.json — still in the command line, type:

bower init

Fill in all the questions once more.

Installing our dependencies with npm

To make the server run, we only need Express and nothing else. So:

npm install --save express

Creating a file to start the server

Now create a file to start the server. In our example, the file is called server.js. Import Express and create the application like this:

var express = require('express');
var app = express();

var path = require('path');

app.use(express.static(path.join(__dirname, 'public')));

app.listen(3000);

Understanding the code

On the first line, we’re requiring the express dependency. On the second line, we’re initializing the application. On the fourth, we’re requiring the path dependency (which is part of Node.js core).

Line 6

First, we need to understand what app.use() and express.static() do:

According to the Express documentation, app.use() is used for mounting middleware. If we don’t define a path (app.use('/someUrlHere', some.Middleware())) before declaring the middleware — which in this case is express.static() — it will default to the root path. So when we set the public folder on line 6, we’re not just saying it’s the public folder that will contain our site. We’re saying that when a user navigates to the root path, they’ll also have access to that folder — meaning all folders and files inside it will be directly accessible from the browser.

As for express.static, it’s based on serve-static and simply provides access to a folder and all its files.

Last line

On this line, we’re simply starting the application’s server.

Starting the server

Back in the command line, type:

node server.js

Tips

You can add other folders to the root path of your web server to make accessing assets easier. For example, the bower_components folder — you can simply add the following line after or before line 6 in our server.js file:

app.use('/lib', express.static(path.join(__dirname, 'bower_components')));

And that’s it — the /lib route will provide access to all folders and files in that directory. Instead of having to copy files into the public folder, you can simply navigate to http://localhost:3000/lib/angular/angular.min.js and voila, you have access to the asset you were looking for without doing anything complicated.

Well, I hope you enjoyed it. Until next time! :)

Comments