05: Introduction to Node.JS

Welcome

Welcome to Workshop 5 of Web Architecture. Today you're going to learn how to install Node.js and develop applications on a remote server, in this case our PiCloud. We will start by logging into your PiCloud machine, learning essential commands to interact with a remote environment, and getting Node.js set up. Then, you will build your first Node application by installing necessary NPM libraries and using ExpressJS to get your very first webserver up and running.

Connecting to the Server using SSH

We are going to develop our Node.JS application on the server, as that's where our database and web application is going to be installed and ran from. Users will visit the website and their browser will then connect to our Node.JS Application. To connect to the server we will run a program called PuTTY (on Windows) or Terminal (on MacOS) that allows developers to connect to the server via the command line. The commnad line allows developers to run applications (in our case Node.JS applications) on the server (PiCloud Node).

First put your name into the PiCloud Device Allocation spreadsheet and claim your Raspberry Pi on the PiCloud.

Take a note of your IP Address to the Raspberry Pi - The default username is pi and the default password is raspberry

Use the following instructions to connect to your node:

Windows Users: Open PuTTY https://www.chiark.greenend.org.uk/~sgtatham/putty/download.html type in the following into Hostname (make sure you change the IP Address based on the Node you've claimed in the spreadsheet):

pi@10.129.111.1 # If you've selected PiCloud-1

Make sure ssh is selected and that the port number is 22. Then press Open. To disconnect from the server just close the putty window that appears. It will then ask you to type the password which is raspberry:

Mac Users: Use the Terminal App (Macintosh HD ▸ Applications ▸ Utilities ▸ Terminal.app) which is pre installed on all Macs. To connect to your PiCloud server use the default username pi and type the following to connect via ssh:

pi@10.129.111.32 # If you've selected PiCloud-32

The server will ask for your password (which is raspberry). Note that as you type, your password will not be displayed but the text is being sent to the server. Press Enter to submit your password and if correct you'll be connected to the server. To disconnect from the server just close the window.

Interact with the Unix Shell

You may or may not be used to using a command line driven interface to edit and interact with files so I have included a basic guide on how to navigate around the server using the command line. It is important to note that in the UNIX command line everything is either a file or a folder and everything you can do with a GUI driven interface (such as Windows or Mac Finder) can be done with the command line.

Here is a list of common commands you'll need to interact with the server:

touch foo  # Creates a file called foo
rm foo     # Deletes a file called foo
mkdir bar  # Creates a folder called bar
rmdir foo  # Removes a folder called foo
cd bar     # Change to directory bar
cd ..      # Go back 1 directory
ls .       # Prints all files in current directory

nano bar.js    # Opens (or creates if it doesn't exist) a file called bar.txt in a text editor
ctrl-w         # Inside nano will write out the file (in this case bar.js)
ctrl-x         # Inside nano will save and exit nano

Node Specific

node bar.js           # Runs a NodeJS script called bar.js

# The following command need Forever installed which we will do in a future lecture.

forever start bar.js  # Runs a NodeJS script called bar.js forever
                      # (if script crashes forever will restart the app automatically.)
forever stop bar.js   # Stops bar.js if running through forever command
forever list          # List all forever jobs

ctrl-c                # Stops a running script

We expect you to use the command line to run your node programs rather than running them locally due to configuration issues. Also this will allow you learn more about the process of remotely debugging applications. To edit files on a remote server you can use the command line or either WinSCP or CyberDuck (Mac). This will give you a Graphical User Interface to drag and drop files. We recommend you use nano to edit the files on the web server just to get some exposure to developing on a remote machine.

Introduction

We need to install Node.JS on our PiCloud server. Open up the following website and run these commands on your Raspberry Pi (PiCloud). This will install Node.JS on your Raspberry Pi (PiCloud Node) - the link is also on Moodle:

https://gist.github.com/sjg/9dafd3d9de4411b885567e1944e138d0

Download Node.JS

Download the installer for your local system for the following page: https://nodejs.org/en/download/.

Follow the prompts on your system to install NodeJS and NPM on your local system.

Verify Installation (Windows)

Open a command prompt (or PowerShell), and enter the following:

node –-version

The system should display the Node.js version installed on your system. You can do the same for NPM:

npm –-version

Your now ready to go to the next step.

Verify Installation (Mac)

Open the Terminal App ((Macintosh HD ▸ Applications ▸ Utilities ▸ Terminal.app)), and enter the following:

node –v

The system should display the Node.js version installed on your system. You can do the same for NPM:

npm –v

Your now ready to go to the next step.

Extras (for Mac and Unix users)

I sometimes use NVM (Node Version Manager) on my systems and servers so that I can dynamically change the version of NodeJS as required. Some modules will only work with older versions of NodeJS. If you want to use this is in the future or just want to play then instructions are available here:

https://github.com/nvm-sh/nvm

Running your first script

As you have learned in the lecture, Node.JS allows developers to write fast and scalable network applications using JavaScript. Unlike JavaScript code running inside the browser, Node.JS is not sandboxed which means that your JavaScript program, which is running with Node, can access all parts of your system. Care should be taken when running code that you've copied from the web. Understand what the code does before running, as any malicious code will have full access to your system.

When you have connected to the server, create a folder in your groups account for you to put all your files in. My username is ucfnsjg (please change the following command for your username)

mkdir ~/my_username
cd ~/my_username

Now create a folder, create another folder called firstProgram and open that folder using the following commands

mkdir firstProgram
cd firstProgram

Type in the following code into a file called first.js and save the file:

// First Node.JS Program // Author: Your Name
var colors = require("colors");
var title = "My First Node.JS Program";

console.log(("*********** " + title + " ***********").red);
console.log("Welcome to your first node program".green);

(Note: All Node.JS programs must have the extension .js)

Run this program by navigating to the folder using the command list in Section 2 and type:

node first.js

You'll notice that the code will not run, as we need install an external library called colors.
packages are stored in a single repository called npm (https://www.npmjs.com) and you can install any of these packages by typing:

npm install [package]

When you install a package with npm it will create a folder in your current directory called node_modules. This makes node applications very portable as all the libraries or packages you want to use can be installed in the users local folder rather than system wide. Also it allows developers to distribute their code to other developers or different machines extremely easily.

Install colors by typing:

npm install colors

Introducing Express.js

While Node.JS is incredibly powerful on its own, building complete web servers from scratch using only built-in modules can be repetitive and complex. This is where Express comes in. Express is a fast, efficient and minimalist web framework for Node.JS. It provides a set of features for web and mobile applications and makes handling things like URLs, requests, and responses incredibly simple.

Let's create a new folder for our server project. Navigate back to your main user directory and create a new folder called expressServer:

cd ~/my_username
mkdir expressServer
cd expressServer

Just like we did with the colors package in the previous step, we need to install Express using npm. Type the following command to download the Express library into your project's node_modules folder:

npm install express

Writing the Server Code

Now, create a new file called server.js and open it in your editor. Type in the following code and save the file:

// First Express Web Server // Author: Your Name
const express = require('express');
const app = express();
const port = 3000;

// This sets up a "route" for the homepage
app.get('/', (req, res) => {
  res.send('Hello World! This is my first Express server.');
});

// This sets up another route to show how URLs work
app.get('/api/student', (req, res) => {
  res.json({ name: 'Your Name', status: 'Learning Express!' });
});

// This starts the server and tells it to listen for requests
app.listen(port, () => {
  console.log(`Server is running and listening on port ${port}`);
});

(Note: We are using port 3000. A port is simply a communication endpoint on your machine. Web servers traditionally run on port 80 or 443, but for development, developers commonly use ports like 3000 or 8080 to avoid conflicts with other services or applications running on the system.)

Running and Testing the Server

Run this program by typing:

node server.js

You should see the message Server is running and listening on port 3000 appear in your terminal. Unlike your previous script, this program doesn't immediately exit. It stays open, continuously listening for incoming web requests!

To test your new server, open a web browser and type the following address into the URL bar: (Replace [YOUR_PICLOUD_IP] with the IP address from the Device Signup Spreadsheet)

http://[YOUR_PICLOUD_IP]:3000

You will see the text "Hello World! This is my first Express server." appear on the page.

Next, try navigating to the second route we created by changing the URL to:

http://[YOUR_PICLOUD_IP]:3000/api/student

You should now see the JSON data displayed in your browser. This is exactly how modern web APIs pass data between the server and a mobile app or a frontend website.

To stop the server from running, click on your terminal window and press ctrl + c (on both Mac and Windows). This will terminate the Node process and return you to the command prompt.

What is a Template Engine?

In the previous step, we sent a simple text string (res.send()) and raw JSON (res.json()) back to the browser. While great for APIs, if you are building a full website, you need to send back HTML. However, writing static HTML files means the page looks exactly the same for every user.

To make our sites dynamic—like showing a specific user's name or a custom dashboard, we can use a Template Engine. A template engine allows you to write standard HTML but leaves "blanks" (variables and logic) inside the file. When a user requests the page, the Node.js server processes the template, injects the dynamic data into those blanks, and sends the fully rendered, customized HTML back to the browser.

For this example, we will use EJS (Embedded JavaScript). EJS is really popular because it simply lets you embed standard JavaScript directly inside your HTML.

Setting up EJS

Make sure you are still inside your expressServer folder in your terminal. We need to install the EJS package using npm:

npm install ejs

By default, Express looks for templates in a folder named views. Let's create that folder now:

mkdir views

Creating Your First Template

Inside the new views folder, create a file called profile.ejs. Open it in your editor and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Profile</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 40px; line-height: 1.6; }
        .profile-card { border: 1px solid #ccc; padding: 20px; border-radius: 8px; max-width: 400px; }
        h1 { color: #333; }
        .tag { background: #007bff; color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.9em; }
    </style>
</head>
<body>

    <div class="profile-card">
        <!-- The <%= %> tags output the value of the variable directly into the HTML -->
        <h1>Welcome, <%= studentName %>!</h1>
        
        <p><strong>Current Status:</strong> <span class="tag"><%= status %></span></p>
        
        <h3>Your Modules:</h3>
        <ul>
            <!-- The <% %> tags allow us to run standard JavaScript logic, like loops -->
            <% modules.forEach(function(module) { %>
                <li><%= module %></li>
            <% }); %>
        </ul>
    </div>

</body>
</html>

Notice the special tags:

<%= variable %> evaluates the variable and prints it into the HTML.
<% code %> runs JavaScript logic (like the forEach loop) but doesn't print anything directly.

Updating the Server to Render the Template

Now, go back to your server.js file in the main expressServer directory and update it to look like this:

// Express Web Server with EJS // Author: Your Name
const express = require('express');
const app = express();
const port = 3000;

// Tell Express to use EJS as the view engine
app.set('view engine', 'ejs');

// Our homepage route
app.get('/', (req, res) => {
  res.send('Hello World! This is my first Express server.');
});

// A new route to showcase our dynamic template
app.get('/profile', (req, res) => {
  // We define dynamic data here. In a real app, this would come from a database!
  const myData = {
    studentName: 'Your Name',
    status: 'Mastering Full-Stack Development',
    modules: ['Web Development', 'Spatial Computing', 'IoT Systems', 'Human-Computer Interaction']
  };

  // res.render tells Express to look in the 'views' folder for 'profile.ejs'
  // and pass the 'myData' object into the template.
  res.render('profile', myData);
});

app.listen(port, () => {
  console.log(`Server is running and listening on port ${port}`);
});

Running the Dynamic Site

Save all your files. If your server is still running from the last step, stop it by pressing Ctrl + C in the terminal. Then, start it up again:

node server.js

Open your web browser and navigate to:

http://[YOUR_PICLOUD_IP]:3000/profile

You should now see a styled profile card displaying the data you passed from your server. Try stopping the server, changing the studentName or adding a new module to the modules array in server.js, restart the server, and refresh the page. You will see the HTML automatically update to reflect your new data!

This is the foundation of data-driven web applications.

Well Done

Well that was a lot of information for one workshop. Well done for getting to the end. Now you have a solid foundation in building backend systems using Node.js, handling routing with Express, and rendering dynamic web pages with EJS. You've gone from running a basic script to serving customized, data-driven HTML!

Before you finish for the day, make sure you have saved all your files (server.js, first.js, and views/profile.ejs) in your ~/my_username directory so you have them ready for the next time you launch your site.

See you all at the next session.