A Web Developer's Ultimate Guide to the Terminal on macOS

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 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:

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 to install and manage packages
• Use npm to configure and run scripts such as webpack
• Use npx to download and configure templates such as create-react-app
• Unlock advanced Git commands not available with GitHub Desktop
• Host websites on your local machine using ngrok
• Run deployment scripts
• Use ssh to securely connect to servers where your websites are hosted
• Use tools like Docker
• 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:

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
3. Hyper
4. Kitty
5. Warp

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.

ℹ️ Built-in terminal vs. iTerm? iTerm is more customizable and has handy features like split panes.

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":

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 ⏎:

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.comopens 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:

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):

ℹ️ What does PWD mean? PWD stands for Print Working Directory. 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:

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:

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:

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 li*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 make a directory called superheros
• mv avengers.txt superheros to m o ve 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 (re*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
2. Dracula
3. Atom One
4. Solarized
5. dogrun

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

Exercise: Download dogrun.itermcolors from the dogrun GitHub repository 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:

ℹ️ 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:

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

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
2. Hack
3. Spleen
4. JetBrains Mono

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

(Shout out to @ishanpro for the illustration)

Exercise:  Download JetBrains Mono from the JetBrains website here.

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.)

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.

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:

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:

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 🎉:

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 and fish.

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:

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 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

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 all files including dots in a vertical list), 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 and blogs.

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.