Learning web development: Shells and Node.js

This blog post is part of the series “Learning web development” – which teaches people who have never programmed how to create web apps with JavaScript.

To download the examples, go to the GitHub repository learning-web-dev-code and follow the instructions there.

I’m interested in feedback! If there is something you don’t understand, please write a comment at the end of this page.

---

In this chapter we explore two topics:

• A shell is like browser console, but for the operating system instead of for JavaScript. It helps us with programming by running the tools (programs) we need to get things done.
• Node.js is a program that lets us run JavaScript code outside browsers – which we can use for a variety of things.

File system paths  #

Let’s quickly review how file system paths work. They specify where files and directories are located. There are two kinds of paths: absolute paths and relative paths.

Absolute paths directly specify where a file is located – e.g., the following absolute paths refer to the home directory of a user robin (where their own files are stored; each user of a computer has such a directory):

• Windows: C:\Users\robin\
• MacOS: /Users/robin/
• Linux (usually): /home/robin/

We can see that the Unix operating systems MacOS and Linux separate path segments (names of directories with potentially a file name at the end) with slashes (/) while Windows uses backslashes (\). Windows is also accepts slashes as separators, which is why we often use slashes from now on.

Roughly, relative paths are paths that don’t start with C:\ (Windows) or / (Unix). They are interpreted relative to the absolute path of a current directory. If we combine the path of the current directory and the relative path, we get an absolute path and therefore a precise location of a file or directory. These are examples:

• Refers to a file in the current directory: main.js
• Special relative path the refers to the parent of the current directory: ..
  • Refers to a file in the parent directory: ../notes.txt
• Special relative path the refers to the current directory: .
  • Refers to a file in the current directory: ./README.md

Shells are command lines for operating systems  #

The browser console is a command line for JavaScript. Operating systems also have command lines which are called shells. A shell lets us change the file system (by copying files, removing files, etc.) and run command line apps – apps that run within a shell and don’t have a graphical user interface. Shells are important for web development because many tools that help us there are command line apps.

In order to use a shell, we need a terminal app (short: terminal): It has windows in which shells run. Please figure out how to open a terminal window on your operating system:

• On Windows, the app for doing so is called “Terminal”
• MacOS: “Terminal.app”
• Linux: “Terminal” or similar

Changing the current directory and listing files in a shell  #

A browser console has a prompt, a marker (usually >) that shows that the console is waiting for input.

When you open a shell, you also see a prompt (e.g. % or >). That means you can now type in a command. These are a few commands that you can try out:

• Displaying the path of the current directory: pwd
• Listing the files in the current directory:
  • Windows: dir
  • Unix: ls
• Changing the current directory: cd
  • Going up one directory: cd ..
  • Going to the home directory of robin on Linux: cd /home/robin/
• Displaying the contents of a text file:
  • Windows: type main.js
  • Unix: cat main.js

Tip: Pressing the up-arrow key lets you revisit previously typed commands (the history of your interactions with the shell).

Shells can do much more. There is a lot of good material online that explains various shells in more depth. In this series, we don’t need much more than what I explained above. Whenever we do need a new shell feature, I’ll explain it beforehand.

Node.js: running JavaScript code in command lines and on servers  #

What is Node.js? It’s a program that uses a JavaScript engine to run code in local files (stored in the file system of your computer). That gives us the following useful features:

• We can start a JavaScript console from a shell.
• We can run our own JavaScript code from a shell (without needing a browser). That is useful for automatically testing if our code is correct – a topic that we’ll explore in a future chapter.
• We can write web servers in Node.js – which is another topic that we’ll explore in the future.
• Node.js lets us install shell commands that help with web development. Those shell commands are often written in JavaScript. We can also write our own shell commands: The book “Shell scripting with Node.js” (free online) explains how to do that.
• Lastly, we can install libraries – code written by others whose functionality we can use. We’ll learn more about libraries later in this series.

A JavaScript platform is an application that has a JavaScript engine and lets us run JavaScript code. Browsers and Node.js both are JavaScript platforms.

If you haven’t done so already, please download Node.js at the Node.js website and install it. For beginners, it’s probably easiest to download an installer. You can do that on the download page, a bit further down: “Or get a prebuilt Node.js®”.

The Node.js REPL  #

You should now be able to start Node.js by typing the following command in a shell:

node

If we start Node.js like this (without any shell arguments) then we are in a Node.js console that works much like a browser console – e.g. this is one interaction with it (try it out yourself!):

> 16 * 16
256

The Node.js console is also called a REPL, which stands for read-eval-print loop:

• Read the input (16 * 16)
• Eval (evaluate, run) the input
• Print the result (256)

Project: hello-nodejs.js  #

We are now ready to run JavaScript code via Node.js. This is what’s in the file hello-nodejs.js:

console.log('Node.js says “hello”!');

We can run it via the following shell commands:

cd learning-web-dev-code/examples/
node hello-nodejs.js

As a result, we see the following output in the terminal:

Node.js says “hello”!

We have just seen and run our first Node.js app!