Last updated on March 19th, 2022

Node is a runtime environment that allows developers to build servers and server side apps in JavaScript. In this exploration we will build a simple Node-JS server using the express framework.

If you have not already taken the time to get introduced to the command line interface (CLI) in your computer, take a few moments to do so now.

What you need

To build the server you will need to ensure that node and npm are installed on your system.

On your command line — terminal in OSX — type the following commands:

node --version

Your system should return something like:
v14.16.1

Now type:

npm --version

My system returns: 8.3.2

It is ok if your versions do not match mine — but if you got file not found or similar for either program you need to go back and re-try the install.

Find node here :: https://nodejs.org/en/.

Get set up

Working with node is a bit about code and a bit about organizing files and folders.

Project Folders

You will want to build your server in a new empty FOLDER. I suggest creating a folder on your desktop (but anywhere that works for you is fine) — you can move it later.

You will also need a preexisting P5JS project (any simple web project will work).

You can find the one I used on github.

Software tools.

To create the server you will be moving between your command line (CLI), Atom (text editor) and your file manager software.

Clear you workspace and get all three open and pointing to your project folder. The following video and text walk you through the process of setting up a server.

Video :: Building a simple node server

Build your own server

Start a Node project from scratch

We are going to build the server locally in the project folder. Start by navigating to your folder on your command line (cd – drag and drop folder – press enter), drag it into Atom and keep an eye on it in your file manager as you work through these steps.

npm init — package.json

To begin or initialize a new node project in your working folder, use the following on the command line:

npm init

This will launch a process that walks you through a series of questions. Accept the default by pressing enter, overwrite by typing and then pressing enter.

Most answers are self explanatory. If you are not sure, accept the default.

For the project entry point type:

server.js

The entry point is the name of the file that node will look for when launching your project (analogous to index.html in a folder).

When complete type yes.

You will now have a package.json file in your project folder.

Take a moment to check it out.

create the server.js file

Straight forward task — do this from Atom. On left panel, <right-click> and choose New File.

Type

server.js

and press return. (This file name needs to match entry point above — if you got tricky and used a different name for entry point change this file to match.

Install Express

The server we are writing is based on the Express framework. We need to install in your project folder.

Back to the command line to install the required modules. Type ::

npm install express

You will see some files get downloaded and installed. You project project folder will now contain a node modules folder and a package-lock.json file. These changes will be reflected in Atom too.

If you examine your package.json file, you will also see that a dependancy section has been added near the bottom.

"dependencies": {
    "express": "^4.17.3"
 }

Write the server code

Since the express framework is doing all the heavy lifting, we can create a simple node based express server with just 4 lines of code.

First, include, or in JS parlance — require — the library or framework.

let express = require("express");

Create the express application.

let app = express();

Begin the server (app) and have it listen on a specified port (3001).

app.listen(3001, ()=> { console.log('listening on 3001')});

Finally, tell the app where it will find static web files (your p5js project). In this case I am using a folder called public.

app.use(express.static('public'));

Save the file.

That’s it the whole server in 4 just lines:

let express = require("express");
let app = express();
app.listen(3001, ()=> { console.log('listening on 3001')});
app.use(express.static('public'));

Create public folder

In the video I take an intermediate step to make this last part a bit more visible. But for simplicity here, create a subfolder in your project folder called public. This folder is where *express* expects to find servable files.

Copy the simple p5JS project index.html and sketch.js from above — or any of your own p5js projects — into the public folder. ( Do not drag the original project’s enclosing folder — just the files).

Launch your server

Back to the command line — its time to start your server.

We will be using node to run the server file so type the command:

node server.js

You should see a message in your console that says:

listening on 3001

Now open your favourite browser and navigate to

localhost:3001

You should see your node project in the browser window.

Stop the server

You can stop the server with the key combination < CTRL-C> . When you press this you will return to the command line prompt.

Try refreshing the browser after the server is stopped. It should say file not found — or similar because the server is NOT running.

Restart the server, <UP_ARROW> until you see :

node server.js

or type it directly. Hit return.

Refresh browser again — P5JS project is back in the browser.

Summary

This exploration walked through the building of a node.js server using the express framework. This is just one of many ways to build node-based servers. We will use this server as a point of departure for later version that include MQTT hooks and sockets for communication with clients.