This series will introduce newcomers to web programming using a few of the latest tools available. I’ve dabbled in building web sites since Microsoft Frontpage 2003 came out, but always ran into frustrating inconsistiences (casualties of the browser wars) and intimidating combinations of programming languages to start a server and handle user interactions (PHP, AJAX, HTTP POST and GET, yuck).
Part 1 of this tutorial will walk you through installing the bare minimum on a Windows system (linux and MacOS instructions will come later) and serve up a ‘hello world’ HTML page.
Parts 1 and 2 could be switched, you could start with html and then learn how to start the server, as long as you do both before part 3.
Part 5 moves all of this functionality to the Galileo platform, which can run our web server and interface directly with other hardware, via digital I/O and serial communication.
Without further ado:
Install the Basics
Visit the official NodeJS website and download the latest. I’ll be using 4.2.2, hopefully they won’t change too much by the time you read this.
Pick out a good text editor: I’ll use Komodo Edit because it’s open source and lets me use Vi keybindings, but Notepad++ and Sublime Text are popular. Any of these will give you helpful features like syntax highlighting and auto-completion which make programming a million times more pleasant than trying to use notepad.
Go through the Next →Accept →Next →Next →OK →OK →Finish rigamarole of Windows installations to get NodeJS installed.
Type that into your text editor, and save it as something like ‘firsttry.js’ or anything you want as long as it has that .js file extension.
Next, open Powershell (you can hit start and just type ‘powershell’ and hit enter). This is a program you might never have touched, but it comes with Windows and has a lot of powerful features — it’s how we’ll control the webserver. But first, try a few commands, see what ls, cd, and pwd do. They stand for List, Change Directory, and Print Working Directory.
Once you’ve navigated to the folder where you saved your first js file, you can type node followed by the filename. This uses NodeJS to execute firsttry.js, which simply prints “Hello World” to the console — another word for the command line. We’ll use console.log() a lot, it can give status messages from the server running in the command line, and it can also give status messages in the web browser, which has its own console we’ll see later.
So that’s a pretty boring program, but it’s important to make sure that ‘hello world’ works if we expect to run a web server on our machine.
Of course, there are whole books written on and whole careers based off writing and running web servers. For our purposes, I want to provide this working model: a web server is a program that listens for requests, and fulfills certain requests however you tell it to. The ‘listening for requests’ is mostly handled for us, we just have to write code to respond to them.
The NodeJS documentation provides dozens of functions for this purpose, but doesn’t give a simple example. I’ll use a stripped-down example from this awesome instructable to get us started. You could copy paste this example code into your editor, but I recommend typing it in yourself to spend some quality time with each component.
If you haven’t coded much, this is a little crazy, but thankfully we don’t have to come up with this ourselves. This chunk of code actually handles quite a lot: it uses require() to import or include the ‘http’ and ‘fs’ (short for filesystem) features of nodejs. It creates a server object and starts listening on port 80. It answers any request by sending index.html back, and delivers a nice error message if it has any trouble.
<h1> Hello World! </h1>
Make sure “Private networks” is checkmarked before clicking Allow!
I checked Private and Public, since I want to try serving webpages on networks besides my own. Windows will only ask you once! If you don’t allow both networks now, it’s a bit of a pain to change the settings later.
Once you allow NodeJS to communicate, you can open a web browser and try it: just type in ‘localhost’ in the address bar.
If you added that console.log(“Hello Console”), you get to check out the web browser’s console. That line of code executes inside Chrome and writes its message to Chrome’s console, found in the Inspect element menu. We’ll use this a lot later on, so now’s a good time to find it.