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 projects, 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  #

This is terminology we’ll need that you may not be familiar with:

• Directory is another word for folder: An entity in the file system that contains files.
• The home directory of a user contains their own files. Each user of a computer has such a directory.

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:

• Windows: C:\Users\robin\
• Unix:
  • 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. This kind of combining is also called resolving a relative path against an absolute path.

These are examples of relative paths:

• File in current directory: main.js
• Parent of current directory: ..
  • File in parent directory: ../notes.txt
• Current directory: .
  • File in current directory: ./README.md

The following table shows how these relative paths work on Unix. They work similarly on Windows.

Current directory	Relative path	Resolved path
/home/robin/files/	main.js	/home/robin/files/main.js
/home/robin/files/	..	/home/robin/
/home/robin/files/	../notes.txt	/home/robin/notes.txt
/home/robin/files/	.	/home/robin/files/
/home/robin/files/	./README.md	/home/robin/files/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.

• 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

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.

Exercise: try out shell commands  #

• Start a terminal app. A window should open, with a shell running in it.
• Try out some of the commands mentioned in the previous subsection.

Tips for using shells  #

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

• Determining the path of a folder: Sometimes you see a folder in the graphical file system explorer of your operating system and you want to use its path in a shell. You can insert that path by dropping the folder onto a terminal window. There should also be menu commands for copying the path of a folder – do a web search if you need more information.

Node.js: running JavaScript code outside web browsers  #

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 files with JavaScript code from a shell. 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 use one in chapter “Web servers” to run a web server app on our computer.
  • We can also write our own shell commands: The book “Shell scripting with Node.js” (free online) explains how to do that.

A JavaScript platform is an application that has a JavaScript engine and lets us run JavaScript code. Browsers and Node.js are both 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/projects/
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!