I recently installed a new SSD onto my machine. I wanted to get the most out of its speed, so I completely reinstalled my system.
Then I cursed myself for not taking notes on the different elements that make up my development environment before doing so.

Setting up a new development environment is something that happens quite often in our industry, whether you are starting a new job and your employer provides you with a new machine to work on, or whether you are a beginner diving in this scary yet intriguing world that is Web development.

This article is meant to guide you (& future me 🤷) into spinning up a working development environment as *easily* and as *fast* as possible. It is give you a general overview, even though there are some opinionated choices here and there.

*Note : this guide is primarly intended for Web Development on macOS, as this is my system of choice for that usage. I plan to add instructions for Linux users in the future. If you are a Windows user, please do yourself a favor and install [WSL2](https://docs.microsoft.com/en-us/windows/wsl/install-win10)* 😀

## A Package Manager

A package manager is used to install, update and manage libraries and applications directly from your Terminal at system level. The options here are very limited, but that's not necessarily a bad thing. The consensus in the macOS community is to use [Homebrew](https://brew.sh).

First we need to make sure that the CLI tools for Xcode are installed.
Open your Terminal and run the following command :

```bash
xcode-select —-install
```

Once the installation is complete (which could take a few minutes), install Homebrew:

```bash
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

## A better Terminal experience
### 1. Configure your Terminal
If you are a  Web Developer, your Terminal is like your third home (the second one being your IDE 😎 ), so it's best to pimp it a little to make it as efficient as possible. I personally like the default macOS Terminal, but I know some people might prefer more customizable alternatives, such as [iTerm2](https://iterm2.com/index.html) or [Hyper](https://hyper.is/).

### 2. Use zsh as a shell
Next we will want to make sure we are using **zsh** as our shell. It should be the default one since macOS 10.15 Catalina was rolled out, but you can check this by running this small command :

```bash
echo $0
```
If this outputs **-zsh**, then you're good to go to the next step. Otherwise, chances are you are still running **bash**, and you may want to look into swapping them. Install zsh by running

```bash
brew install zsh
```

### 3. Install oh-my-zsh
If you’ve never heard of [oh-my-zsh](https://ohmyz.sh/), think of it as a super-enhanced version of your shell. It offers multiple shortcuts for Git that will greatly speed up your Git flow, for example:

```bash
gaa  # git add --all
gcam # git commit -a -m
ggl  # git pull origin $(current_branch)
gp   # git push
...
```
You can learn more about these shortcuts in [this Cheat Sheet](https://github.com/ohmyzsh/ohmyzsh/wiki/Cheatsheet#helpful-aliases-for-common-git-tasks).

Let's install oh-my-zsh by running the following command:

```bash
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
```
Voilà!

## NodeJS, nvm and yarn
If you plan to develop for the Web, you can't pass on JavaScript-based tools. Whether it be for frontend or for backend development, you will need to have NodeJS installed on your machine to be able to run most of the development tools available.

### 1. NodeJS
NodeJS is a runtime that enables you to run JavaScript code from outside the browser, which allows you to write scripts and even complex applications such as web servers. You can install it by downloading the executable from their [website](https://nodejs.org/), or by running the following command :

```bash
curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE 's|.*>node-(.*)\.pkg</a>.*|\1|p')}.pkg" > "$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"
```
Check that it is correctly installed by running

```bash
node --version
# v16.1.0
```
### 2. nvm
This stands for **Node Version Manager**. It allows you to have multiple Node versions installed on your environment and to seamlessly  switch between them. This is particularly useful in case you have to work on legacy applications using old Node versions, but also if you are working on new projects using recent releases.

Let's install it :

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

# Installing...

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
```
Then restart your Terminal and run **nvm** to check that the installation was successful. It should generate a list of available commands.

If you get something like **nvm: command not found**, try running

```bash
source ~/.zshrc
```

---

You are now able to install multiple Node versions. For example, you can run the following commands to install Node 12 and start using it immediately:

```bash
nvm install 12
nvm use 12

# Let's verify the version has changed
node --version
# v12.22.1
```
### 3. yarn
By default, Node installs a JavaScript package manager called **npm**. It's also worth knowing that this name can be used to refer at the official registry for Javascript packages. 
While npm is a solid default choice for package management, there is an alternative named [yarn](https://yarnpkg.com/) that can bring some interesting benefits, one of them being the packages installation speed.

Let's install it globally :

```bash
npm install -g yarn
```
You are now free to configure and add to it for each project. [Read this article](https://yarnpkg.com/getting-started/install) to know more about it.

## Configure Git
Normally, Git should already be installed on your machine. You can check this by running **git --version**.  If the output is incorrect, run:

```bash
brew install git
```

You can now enter your Git credentials (don't forget to replace ‘John Doe’ with the correct values):

```bash
git config --global user.name "John Doe"
git config --global user.email johndoe@example.com
```

## The IDE
This is it. After all these steps copy-pasting commands into the Terminal and waiting for downloads to be completed, we are finally going to install the last piece of the puzzle – the **IDE**. This acronym stands for **Integrated Development Environment**. Basically, it’s a place to edit code files that has life-changing features like syntax highlighting and autocompletion, which will drastically improve your web developing quality of life.

There are a lot of IDEs to choose from, all of them with their own pros and cons. Since most of them are viable choices, it really comes down to personal preference (and habits). In my case, I was a long-time [VS Code](https://code.visualstudio.com/) user before recently switching to [Doom Emacs](https://github.com/hlissner/doom-emacs). Even though VS Code is a super solid choice, with regular updates and cutting-edge features, I feel like Doom Emacs increases my productivity in the long run.

Doom is a little bit more complicated to install than most modern IDEs, so I will detail the different steps to easily spin-up an installation. Keep reading if you want to come to the dark side. 😈

### Bonus : Installing Doom Emacs
[![Doom Emacs](https://raw.githubusercontent.com/hlissner/doom-emacs/screenshots/main.png)](https://raw.githubusercontent.com/hlissner/doom-emacs/screenshots/main.png)
First of all, what is Doom Emacs? Let's hear from its creator:

> Doom is a configuration framework for [GNU Emacs](https://www.gnu.org/software/emacs/) tailored for Emacs bankruptcy veterans who want less framework in their frameworks, a modicum of stability (and reproducibility) from their package manager, and the performance of a hand rolled config (or better). It can be a foundation for your own config or a resource for Emacs enthusiasts to learn more about our favorite operating system.

In short, Doom Emacs is a super configurable IDE based on Emacs, which allows you to use vim keybinding thanks to its **evil-mode**. This lets you basically use shortcuts for **literally everything**, whether it be to edit code, manage files and directories, or execute Git commands, etc. The intended goal is to make it possible for the user’s hands to never leave the keyboard. Ever.

Now for the installation. You can have a look at the official [Getting Started](https://github.com/hlissner/doom-emacs/blob/develop/docs/getting_started.org#on-macos) page. Or you can run the commands listed below , gathered for your convenience:

```bash
# Dependencies
brew install git ripgrep coreutils fd

# Install emacs-mac
brew tap railwaycat/emacsmacport
brew install emacs-mac --with-modules
ln -s /usr/local/opt/emacs-mac/Emacs.app /Applications/Emacs.app

# Add Emacs to PATH
echo "export PATH="/Applications/MacPorts/Emacs.app/Contents/MacOS:$PATH"" >> ~/.zshrc

# Install Doom
git clone https://github.com/hlissner/doom-emacs ~/.emacs.d
~/.emacs.d/bin/doom install

# Add Doom to PATH
echo "export PATH=”$HOME/.emacs.d/bin:$PATH”" >> ~/.zshrc
```

Now feel free to clone your private Doom configuration into *~/.doom.d* if you already have one. Don't forget to install custom fonts if needed.

## Conclusion
I hope this guide was helpful and that it will allow you to speed up the process of setting up a new environment. This is, of course, not a comprehensive list of web development tools  – I  tried to focus on the essentials, although this is quite a vague and subjective notion, and you may find that some of your essential tools are not listed there. Feel free to contact me if you have any suggestions or if there is anything I  forgot to mention.

Thank you for reading and happy coding!

How to install the different tools needed to develop for the Web, starting from scratch. MacOS oriented.

Setting up a new environment for Web Development

June 3, 2021 · 8 min read