[Web dev for beginners] Shells

This blog post is part of the series “Web development for beginners” – 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.

---

A shell provides a text-based way of interacting with the operating system. In this chapter, we explore how shells work and why we need them for web development.

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 file system explorers with command line interfaces  #

Graphical user interfaces (GUIs) have become the most popular way of interacting with operating systems – e.g.:

• To start a program, we double-click on its icon in a graphical file system explorer.
• To move a file, we drag its icon from one window to another one.
• Etc.

Command line user interfaces (CLIs) are different and older: We enter textual commands and get results that are virtually always text, too. Many tools we need for web development have command line user interfaces. Why is that? They make it easy to automate frequently executed tasks.

A shell is, roughly, a CLI app with functionality that is related to GUI file system explorers. We’ll run shells inside the text windows of a so-called terminal app (short: terminal). Most operating systems come with terminal apps:

• Windows: “Terminal”
• MacOS: “Terminal.app”
• Linux: “Terminal” or similar

Changing the current directory and listing files in a shell  #

When we start a shell, it initially displays a prompt: a marker such as % or > that tells us that it is waiting for our input. These are some of the commands that we can use:

	Windows	Unix
Display path of current directory	pwd	pwd
(“print working directory”)
List files in current directory	dir	ls
Go to a different current directory	cd	cd
Display contents of a text file	type	cat

Example – going up one directory:

cd ..

Example – going to the home directory of robin on Linux:

cd /home/robin/

In this case, cd is a command and /home/robin/ is its argument. A shell command can have zero or more arguments that provide it with the data it needs to do its work.

Example – displaying the contents of the file index.html:

• Windows: type index.html
• Unix: cat index.html

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 we learned 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.