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
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.
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) keywords: 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.
remotePowerSwitch | 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)