Display a Node.js Static Web Page

This article is part of a series with the name IoT Remote Power Switch – Project Part 4.

It shows how I program a local Node.js web server to display the (for now) static front page. This page will later become the user interface and display dynamic content. It will allow a user to turn the remote power switch on or off and see its status. On any browser, from anywhere in the world.

Download the Source Code from GitHub

It’s time to download the HTML5, CSS3 and JavaScript code and then publish the front-end part locally using Node.js.
For this purpose I open GitHub, navigate to the remotePowerSwitch repository and copy its link to the clipboard.
In a console window, I create and/or navigate to the directory where I want this source code to be located:

$> cd; mkdir -p devl/git; cd devl/git

Then I type

$> git clone https://github.com/bitcontrol/remotePowerSwitch.git

This clones the remote repository in the local sub-directory remotePowerSwitch.

Display the Web Page in a Browser

If I now open a file browser (like Nautilus on Linux) and click on the file remotePowerSwitch/client/index.html, the default web browser opens and displays the web page. How does that work? Web browsers can not only receive data streams via HTTP (and other) network sockets, but they can also read files from file systems.
Nevertheless, my goal is that the browser opens the web page via HTTP. Therefore I have to publish it using a web server, for now a local one. In the previous post I’ve shown how to install Node.js et al for this purpose. Now I’m going to write a JavaScript application for Node.js that responds to HTTP requests from a web browser (or any other HTTP client application).

Node.js Server for a Static Page

Before I start programming, I run the npm init command in the directory that shall become the top-level directory of the web server. Let this be the remotePowerSwitch directory.
Note: If you intend to work with the code you’ve just downloaded, you don’t have to execute the next two commands. I’ve done this for you and the resulting files are already part of the downloaded git repository.

$> cd; cd devl/git/remotePowerSwitch
$> npm init

npm asks me a few questions, which I answer as follows:

name: (remotePowerSwitch) rps
version: (1.0.0) 0.1.0
description: IoT Remote Power Switch
entry point: (index.js) server/app.js
test command: 
git repository: (https://github.com/bitcontrol/remotePowerSwitch.git) 
author: Andreas Isenegger
license: (ISC) MIT

Note that npm detected the git repository automatically, since the .git folder is a sub-directory of the current folder.

I don’t like repeating information that is already available in the web. I’d exactly do that if I’d describe how I came to the presented solution. If you’d like to read or watch some tutorials, just Google for node.js static files or node.js REST API. You can ignore the results that use express.js. I don’t use it here.

|   client/
|   |   css/
|   |   |   bootstrap.css
|   |   |   :
|   |   |    styles.css
|   |   images/
|   |   |   logoBitcontrol.png
|   |   js/
|   |   |   bootstrap.js
|   |   |   bootstrap.min.js
|   |   |   jquery-1.11.3.js
|   |   config.json             # Got created by installation of bootstrap
|   |   index.html              # The currently static page
|   |   README.md               # Documentation with markup for GitHub
|   server/
|   |   app.js                  # Entry point for the application
|   |   httpMsgs.js
|   |   server.js               # Contains the web server code
|   |   settings.js             # Server configuration
|   .git/                       # Don't touch, private to git
|   LICENSE                     # License file created by npm based on my input
|   package.json                # Package file created by npm based on my input
|   README.md                   # Documentation with markup for GitHub

Then I add the directory server/ and its files. The key code is inside server.js.

Summary and Outlook

That’s all to get a Node.js static web page. Should you encounter major problems, you might wanna drop me a comment.

I’m in the middle of the project by now, and I am not progressing as fast as I had expected. Nevertheless, I’ve made progress every week. What’s functionally missing on the server side is its connection to the database and the HTTP service for the embedded computer. On the user interface side (browser), the support for the buttons and the status feedback are missing.

Plenty of interesting work ahead!

“Right as diverse pathes leden the folk the righte wey to Rome.”
(from Treatise on the Astrolabe)