A Web Developer's Ultimate Guide to the Terminal on macOS
Published: 2022-07-21 10:44:53

---
title: A Web Developer's Ultimate Guide to the Terminal on macOS
published: true
description: 
tags:  
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qlyi9q8adzjwm7chlk79.png
canonical_url: https://scrimba.com/articles/web-developer-terminal/
# Use a ratio of 100:42 for best results.
---

When learning web development, you will likely come across someone who insists on using the terminal. Equally, using the terminal isn’t something you’ve necessarily encountered the need to do yourself.

Many web development-related tasks like installing code packages or uploading code to GitHub can be accomplished using graphical tools like [Visual Studio Code](https://code.visualstudio.com/) nowadays. As a newer web developer, is it worth learning the terminal?

The answer is **Yes!**

Although the terminal can be daunting at first, I would argue it’s one of the best tools to increase your productivity (and look kind of stylish in the process.)

In this ✨ **ultimate** ✨ guide, you’ll learn enough about the terminal to be dangerous.

... That is, if by "dangerous", you mean the ability to run basic commands and work with files 😄.

Since I am convinced you’ll be spending more time in the terminal after this tutorial, I’ll also show you how to take the plain-looking terminal that comes with your Mac and turn it into something that looks like the screenshot below:

![Take your terminal from something plain-looking and boring to something that delights you every time you open it to tackle a tough task](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lr7f8vmvtrkv23xwllf4.png)


## Why do I need the terminal?


Learning the terminal will enable you to complete tasks you already do (like navigate files and folders) more quickly as well as unlock new capabilities that make you more productive:

-   Use [npm](https://www.npmjs.com/) to install and manage packages
-   Use npm to configure and run scripts such as [webpack](https://webpack.js.org/)
-   Use [npx](https://www.npmjs.com/package/npx) to download and configure templates such as [create-react-app](https://reactjs.org/docs/create-a-new-react-app.html)
-   Unlock advanced Git commands not available with GitHub Desktop
-   Host websites on your local machine using [ngrok](https://ngrok.com/)
-   Run deployment scripts
-   Use [ssh](https://en.wikipedia.org/wiki/Secure_Shell) to securely connect to servers where your websites are hosted
-   Use tools like [Docker](https://www.docker.com/)
-   Combine several terminal commands into `.sh` *scripts* that increase your productivity
-   Gain greater control of your Mac in general

Since macOS has a built-in **Terminal** app, you won't have to reach far for a command prompt:

![The built-in macOS Terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggbcafj7hcngbbozz19s.png)

However, replacing the macOS Terminal with something more powerful from the beginning is a good idea.
Let's explore your options.

## Choosing and installing a Terminal app

In 2022, there are many terminal apps to choose from, each with their own approach.

### 5 trendy terminals

1.  Terminal
2.  [iTerm](https://iterm2.com/)
3.  [Hyper](https://hyper.is/)
4.  [Kitty](https://sw.kovidgoyal.net/kitty/)
5.  [Warp](https://www.warp.dev/)

In time I encourage you to explore these options and see what appeals to you. For this tutorial, however, we will use iTerm.

**Exercise:** Install the latest version of iTerm from [here](https://iterm2.com/downloads.html).

> **ℹ️ Built-in terminal vs. iTerm?** iTerm is more customizable and has handy features like *[split panes](https://iterm2.com/documentation/2.1/documentation-one-page.html#:~:text=Split%20Panes,cmd%2D%5B%20and%20cmd%2D%5D.)*.

## The frontend developer's guide to the terminal

Now you've installed iTerm let's learn some basic commands. 
What is a command?

Inside the terminal, you command your computer to do stuff using text.

This isn't a new idea, as you've surely commanded your computer to do stuff using a button before (delete a file, shut down, etc.!)

The terminal might look a bit complex and confusing at first but rest assured, the ability to copy and paste commands from a website, combined with the power and flexibility the command line offers, makes the terminal well worth learning.

### Running your first commands
Let's start with the basics and open iTerm from your Dock (if it's there) or by pressing ⌘+Space and typing "iTerm":

![The built-in macOS Terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ap59n2tl2mbhqcsn057.png)

From here, we can command the computer to do stuff!

**Exercise**: Command your computer to tell you today's date by writing the `date` command and pressing **Enter ⏎**:

![The date command outputs the current date. At the time of the screenshot, "Sat 25 Jun 2022 00:06:21 BST"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bf38cmwoplxy0z4rrxrk.png)

Here are some other commands you can try. Don't worry. There's no chance of them breaking anything:

-   `uptime` tells you how long your Mac has been powered on
-   `say hello` makes your Mac say "hello" in a computerized voice (make sure your volume is on 🔊)
-   `open http://scrimba.com`opens any website you specify in your default browser
-   `top` shows you a list of running programs (even hidden ones) similar to the Activity Monitor app
-   `expr 100 + 100` does quick maths
-   `clear` clears the terminal so it's nice and fresh again (you can also press **Control+L**)

Brilliant, isn't it?

In the next section, let's look at navigating and working with files using the terminal.

### Working with files and folders

As a reminder, your Mac organizes files through directories (folders).

A directory is a special type of file that can contain other files and directories within it. Directories are used to organize files to make them easier to find.

This isn't a new idea. You experience it every day in Finder:

![Even though the terminal is new to you, the fundamental idea here is the same as the graphical Finder app you've probably used before.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qehm97e329uq7297jwtk.png)


In Finder, you can only view one directory at a time which, in nerd-speak, is known as your **working directory**.

**Exercise:** To see your working directory in the Terminal, run `pwd` (print working directory):

![The pwd command in action. It outputs /Users/booker, in this case.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7haw1ofd6c3w6o6vj16.png)

> ℹ️ **What does PWD mean?** PWD stands for **P**rint **W**orking **D**irectory. In terminal-speak, printing to the terminal means displaying something in the Terminal.Although terminal commands oftentimes sound perplexing they're sometimes acronyms or abbreviations, which makes them easy to remember and recall.

Next, try running **`ls`** to view (list) all the directories inside the current working directory:

![The ls command outputs a list of all file names in a vertical list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ohbq2z61ctdsckeh7nu.png)

Don't worry if your output looks completely different. We're on different computers, after all!

### Getting around

In Finder, you use your mouse to get around.

In the terminal, you use the `cd` command (change directory) to go forwards and `cd ..` to go backward.

**Exercise:** Try navigating forwards into your Desktop by running `cd Desktop`:

![The cd Desktop command in action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5y32hvm6ldrayar31i10.png)

Above, we `cd` forwards into the Desktop.

You can tell double-check it worked by running `pwd` or peeking at the prompt as illustrated in this screenshot:

![Double-check your current directory and bring your newfound knowledge of commands together with pwd ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hqx0l9dd8gv7pn77aj0.png)

Now you're in the Desktop directory, here are some fun file-related things you can try:

-   `touch avengers.txt` to create a new empty file called avengers.txt
-   `ls` to **l**i**s**t all the files in the current directory (double-check avengers.txt is there)
-   `open avengers.txt` to open any file in the default app (TextEdit by default!)
-   `cat avengers.txt` to print the contents of avengers.txt to the terminal (if you see nothing, it's because the file is empty)
-   `mkdir superheros` to **m**ake a **dir**ectory called superheros
-   `mv avengers.txt superheros` to **m** o **v**e avengers.txt into the newly-created superheros directory

Such fun!

> ℹ️ **Check your work in Finder** Any change you make to a file or folder in the terminal will be reflected in Finder (and vice versa) because they are both interfaces to the same place: **Your solid-state drive** Finder is a graphical interface, whereas the terminal is a text-based interface.

Should you wish to delete the superheros directory and its contents, we call that removing the directory in Terminal-speak.

To remove the superheros directory and its contents, run `rm` (**r**e**m**ove) with the `-rf` flag like so: `rm -rf superheros`.

Flag is terminal-speak for option and you set them with a `-` (for example, `-rf`) but that's outside the scope of this introduction.

Congratulations 🎉! You now know enough to be "dangerous."

## Beautify your terminal with a color scheme

Now you have some experience with the terminal, I expect you'll be spending more time there, navigating files and hopefully learning about some of the command-based tools outlined in the introduction, like npm and npx! You may as well make the terminal look aesthetic.

The nice thing about iTerm compared to the built-in Terminal app is that you can easily download color scheme files called `.itermcolors` files and load them with a few clicks.

A lot of these themes even come with light and dark variants.

With some careful configuration (not shown in this guide), you can even make iTerm change the theme depending on the time of day!

### 4 trendy iTerm themes

1.  [Snazzy](https://github.com/sindresorhus/iterm2-snazzy)
2.  [Dracula](https://draculatheme.com/iterm)
3.  [Atom One](https://github.com/one-dark/iterm-one-dark-theme)
4.  [Solarized](https://ethanschoonover.com/solarized/)
5.  [dogrun](https://github.com/wadackel/vim-dogrun)

For this tutorial, we will use my favorite, dogrun.

**Exercise:** Download `dogrun.itermcolors` from the [dogrun GitHub repository](https://github.com/wadackel/vim-dogrun) to your Downloads directory using the following command:

```
curl https://raw.githubusercontent.com/wadackel/vim-dogrun/main/term/dogrun.itermcolors > ~/Downloads/
````

Here's a breakdown of how the `curl` command above worked:

![An illustration of how the curl command works](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spmjm1tzgixlqgxzgua4.png)

> **ℹ️ Curl** Curl stands for Client URL. It is one of the essential commands to work with URLs

Next, open iTerm and press **⌘+,** to show the Preferences window:

![iTerm Preferences](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2f1ey33mtut6pluri2z.png)

Click Profiles, then navigate to the Colors tab, as shown:

![iTerm Colors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/raz3xq5ixp0r2zx118dl.png)

See the **Color Presets...** dropdown in the bottom right-hand corner?

Choose **Import...** and open `dogrun.itermcolors` from your `~/Downloads` folder.

Voila!

The color scheme should update immediately (no need to press a save button.)

## Installing a custom code font

Did you know? There are many fonts dedicated to programming, known as *monospace* fonts!

They improve the legibility of code and make efficient use of the screen space so you can see more code at once.

### 4 fonts for better coding

1.  [Fira Code](https://github.com/tonsky/FiraCode)
2.  [Hack](https://github.com/source-foundry/Hack)
3.  [Spleen](https://github.com/fcambus/spleen)
4.  [JetBrains Mono](https://www.jetbrains.com/lp/mono/)

JetBrains Mono is great because it looks nice and even includes special characters known as ligatures, so we'll go with that.

![Example of ligatures](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42fvsc1p20wrrv8djcr4.png)

(Shout out to @Ishanpro for the [illustration](https://dev.to/ishanpro/font-ligatures-in-vscode-gfd))

**Exercise:  **Download JetBrains Mono from the JetBrains website [here](https://www.jetbrains.com/lp/mono/).

Next, press **⌘+Space**. Search and open Font Book.

Inside Font Book, click the **+** and import JetBrains Mono from  your Downloads folder (or wherever you downloaded it.)

![Font Book](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oxg1guj1u4izxdhfvv6l.png)


It worked if you see JetBrains Mono inside Font Book, like in the screenshot above!

Installing fonts on macOS is really that straightforward! You can even delete the original file, as Font Book will essentially make a copy.

JetBrains Mono will now be available in any program, be that Microsoft Word, Visual Studio Code, or - you guessed it - iTerm!

You just need to tell the program to use the JetBrains Mono font.

To tell iTerm to use the JetBrains mono font, refer to the previous instructions and navigate to the **Text** tab. Choose JetBrains Mono from the dropdown.

![iTerm Font](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/glp5wqpfkjbskphg1kre.png)

Voila! The font should update immediately.

## Configuring the command prompt

Next up, let's look at how to configure the colors and information displayed in the prompt:

![Pure terminal theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2wu8i8ey2djp9mfih31c.png)

It would be natural to assume you can tweak the prompt in the iTerm preferences window but that would be too easy 😄!

The terminal window is just a window into the prompt. The prompt is a separate program and must be configured separately.

Yes, you read that right!

The terminal window app (iTerm) and the command prompt (technically called a shell) are separate programs.

On modern versions of macOS, the default command prompt (shell) is zsh and is configured with a text-based configuration dot file called .zshrc.

> **ℹ️ What is a dot file?** A dot file is a text-based options file whose name starts with a . like .zsshrc. On macOS, files that begin with a . are hidden in Finder and the `ls` command by default. To see hidden files run `ls -a` (`-a` for all)

### Create a .zshrc file on Mac

You may or may not already have a .zshrc dot file on your computer.

**Exercise:** Start from scratch and create a new .zshrc file with the following commands:

```
cd ~
rm .zshrc
touch .zshrc
```

Let's breakdown the above 3 commands,

1.  `cd ~` takes you to your home directory (in my case `/Users/booker`). The `~` or tilde symbol represents the path to your home directory for convenience.
2.  `rm .zshrc` deletes the .zshrc file if you have one; If not, you will get a harmless error you can safely ignore: "*rm .zshrc: No such file or directory"*
3.  `touch .zshrc` creates a new empty file called .zshrc.

> ℹ️ **Touch** It would be more intuitive for every new Terminal user if `touch` was called `create` because that's essentially what it does. If a file with the name you specify exists, `touch` updates the last modified time of that file to the current time. In a sense, you "touched" the file. If the file does not exist, `touch` **creates** a new empty file with the name you provide.

### Installing a shell theme

Through careful configuration, you *could* make your shell theme from scratch, but I wouldn't recommend it.

Instead, let's rely on a beautiful and open-source shell theme called [Pure](https://github.com/sindresorhus/pure):

![Pure shell theme on GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lawc6122rmy4b0ou8hdo.png)

Shell themes like Pure are expressed in a script file, so what you're essentially downloading is a script your shell will run every time it opens.

**Exercise:** Download pure and the script files somewhere on your computer.

Yes, you could do this with your mouse and a graphical interface, but you're a terminal padawan now 🌌🔫!

This is a great chance to try `git` and clone (download) Pure with a command:

```
mkdir ~/.zsh/pure
git clone https://github.com/sindresorhus/pure.git "$HOME/.zsh/pure"
```

Let's breakdown the above 2 commands,

1.  `mkdir ~/.zsh/pure` creates a new directory called pure. This is where you will download the theme *into when you run the next command*
2.  `git clone <https://github.com/sindresorhus/pure.git> "$HOME/.zsh/pure"` downloads Pure from GitHub. Here we tell `git` where to download from (*"<https://github.com/sindresorhus/pure.git>"*) and where to put the downloaded files (*"$HOME/.zsh/pure"*)

> ℹ️ **Git**? Git comes pre-installed on macOS and offers a way to interact with GitHub repositories, such as cloning (downloading) them.

Next, open .zshrc by running `open ~/.zshrc` and add the following lines to the *top:*

```
fpath+=($HOME/.zsh/pure)
autoload -U promptinit; promptinit
prompt pure
```

Completely close and restart iTerm. Your terminal will now look like this 🎉:

![Your terminal with the Pure theme enabled](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3bvijhtri2i6fng0hdv.png)

*Aesthetic ✨!*

Things took shape quickly, huh?

> **💡️ Tip  **Should you ever change something in .zshrc but nothing happens, there's a good chance your terminal didn't restart properly. Double-check that there isn't another terminal window open.Alternatively, you can run the `source ~/.zshrc` command. This will apply your newest settings without the need to restart the terminal in 90% of cases.

## What is the difference between a terminal and a command prompt?

You might wonder about the difference between the terminal (iTerm) and the command prompt (zsh).

In a nutshell, the terminal is a window that runs a command prompt.

The default command prompt on macOS happens to be `zsh`, which we configure with a .zshrc file. There are other command prompts you could install, like [bash](https://en.wikipedia.org/wiki/Bash_(Unix_shell)) and [fish](https://fishshell.com/).

iTerm and zsh are completely independent of one another, yet the line between them is fine.

It's essential to understand a command prompt is a text-based program. You input text (commands), and the command prompt outputs text.  It's up to the terminal window how this text is rendered. That is why you set the font and color theme in iTerm, not zsh.

iTerm is running zsh by default but you could technically run another command prompt like bash instead.

Looking at it from the other side, the command prompt zsh can be run from any terminal window, not just iTerm.

A brilliant example is opening Code's built-in terminal window (**⌘+**`).

Even though the font and colors will be different, you should recognize your custom prompt from before:

![Visual Studio Code's built-in terminal using ZSH. Even though the colors are different, anything you set in.zshrc still applies](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ofqq85pedyguw0xp147.png)

In the upcoming sections, we'll tweak some other .zshrc settings. They will apply anywhere zsh is run, whether that be iTerm, VS Code's terminal window, or another terminal window app entirely.

## Set some seriously sensible ZSH defaults

The more time you find yourself working in the terminal and looking up terminal commands, the more likely you are to come across interesting [talks](https://youtu.be/5r6yzFEXajQ) and tutorials about all the powerful and convenient options available.

In this post, let's look at a couple of popular and seriously sensible options that may as well be the default. They'll help you be more productive. Plus, you'll learn more about the .zshrc file in the process.

### Automatically CD

Until now, if you want to change directory, you type `cd` followed by the path. For example:

-   `cd Desktop`
-   `cd ~`
-   `cd..`
-   `cd Code/projects/ABC`.

Changing the directory is something you do so commonly in the terminal that it's worth saving a few keystrokes by enabling the `AUTO_CD` option.

With the `AUTO_CD` option enabled, you can type the path without `cd` For example:

-   `Desktop`
-   `~`
-   `..`
-   `/Code/projects/ABC`


![Auto CD in action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/djgsm2mfgg41j1lljvjk.png)

To turn on `AUTO_CD`, first open your .zshrc file using `open ~/.zshrc`.

At the very top, add the following line:

```
setopt AUTO_CD
```

Restart iTerm2 completely as you did before.

When iTerm2 reloads, it will reload the command prompt, and your new option will take effect.

### Create a handy alias

Depending on what you're using the terminal for, you'll almost certainly find yourself writing the same commands over and over again. And over and over again.

This isn't good for your productivity. Or your fingers. It would be wise to create a shorter and easier-to-type alias for the commands you write the most.

For example, say you write `ls -al` a lot. The `-al` flags (options) are handy (they show **a**ll files including dots in a vertical **l**ist), but they're easy to forget and tiresome to type.

In .zshrc, you could create an alias `l` by adding the following line to the top of .zshrc:

Completely restart iTerm2.

Now, instead of typing `ls -al` you can type `l` to the same effect.

A very common thing for web developers like yourself to do is set up aliases for `npm` and `git` (two of the most commonly-used tools).

Add any (or all) of these to the top of your .zshrc if you use npm or Git:

```
# Git
alias gi="git init"
alias gs="git status"
alias gd="git diff"
alias gdh="git diff HEAD"
alias gc="git clone $1 $2"
alias gcm="git commit -m "$1""
alias gaa="git add -A ."
alias gpo="git push origin $1"
alias gl="git log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"
alias glo="git log --oneline"
alias grhh="git reset --hard HEAD"
alias gcp="git cherry-pick $1"

# npm
alias ni="npm install";
alias nis="npm i -S "
alias nid="npm i -D "
alias nig="npm i -g "
alias nr="npm run $1";
alias nrs="npm run start";
alias nrb="npm run build";
alias nrt="npm run test";
alias nrc="npm run commit";
```

Keep your eyes peeled for other handy aliases you might not have considered. There are always cool ones floating around on [GitHub](https://github.com/bookercodes/dotfiles/blob/master/.zshrc) and [blogs](https://www.thorsten-hans.com/5-types-of-zsh-aliases).

Here's one called `myip` that connects to a web server to learn and return your public IP address:

```
alias myip='curl ifconfig.co/'
```

## Conclusion

In this ✨ **ultimate** ✨ 3000-word guide, you learned how to write your first terminal commands and configure your terminal. Not only in terms of aesthetics but in terms of functionality as well.

You're not quite an expert *yet,* but you certainly do now know enough to be dangerous, including:

-   How to run macOS commands
-   How to work with and manipulate files and directories
-   Download files with curl
-   How to download code from GitHub with git
-   Set a custom theme and font
-   Configure a custom prompt called Pure
-   Change .zshrc settings like AUTO CD
-   Define aliases in .zshrc to make you more productive

Now you can continue learning online. In particular, I recommend YouTube. Web developers love to optimize their .zshrc and terminal configurations, then talk about it.