Setting up a Mac

Mac users swear by their Mac,
PC users swear at their PC
(unknown)

This chapter will be an exhaustive tutorial on how to set up a Mac for web development. The PC version will be next.

This assumes your Mac is all fresh and you don’t have any development tools installed already! You also probably want to install Google Chrome.

The Terminal, your new best friend

As a developer, and especially as a front-end developer on Mac or Linux, you will be using the Terminal a lot.

The Terminal is a command-line interface that comes bundled with macOS and that will allow you to use tools that don’t have a graphical user interface (or GUI).

You can also use a different Terminal app such as iTerm2 (my favourite), Cathode or Total Terminal among others.

The following screenshots will be using the regular Terminal app shipping with macOS, but it won’t make any practical difference if you use another one.

To run the terminal, go to Spotlight (⌘ + <space>) and type Terminal:

Accessing the Terminal

Installing the Mac OS development tools

Running the Terminal should bring a (boring) window like this:

At this point, your Mac shouldn’t have any development tools installed. If you have installed Xcode already, you probably won’t need to do this step, but let’s make sure:

On the terminal, type:

git --version

This will have two possible outcomes: either you’ve already installed the Developer Tools, and in which case this will just output the git version and you don’t have do to the next step.

Or, most likely, you are going to get a prompt (as pictured above) saying that the git command requires the command line developer tools.

If that’s the case, click on Install and follow the instructions:

The Command line tools will install automatically.

Once that’s done, you can try the same command again (git --version) and it should output the actual version installed on your system.

That’s it, the Command line tools are now installed. Let’s install Node now.

Installing Node

Node is the technology that is going to power your backend. The backend is what our web application (which runs on the end user browser) is going to talk to behind the scene.

Node can be installed directly from their website, but we will be using a “manager” do to this instead: the Node Version Manager (NVM) allows you to install multiple versions of Node side-by-side, update to a newer version easily, and is generally easier to work with.

To start with, let’s create a .bash_profile file if it doesn’t exist already by typing

touch ~/.bash_profile

What is .bash_profile and why do we need to do this? This file is located at the root of your home directory, and is executed every time a new session is created, which means every time you log in into your computer. This file is needed by NVM to work correctly, and if it doesn’t exist already, NVM won’t create it for you on installation, which can cause some issues.

Once we have done that, we will proceed with the installation of NVM:
Go to the NVM GitHub page, and copy the install script command (highlighted below):

Why don’t you give the command on this page? Because the URL contains a version (0.33.8 as of today), which may change in the future. So in order to be sure you are using the latest version, you need to get it yourself from the NVM website.

Then paste this command into your terminal.

The installation will proceed automatically, and voilà, NVM is installed.

Please close your Terminal and open a new one to make sure the nvm command is working.

If you type nvm now in a Terminal, you should get this:

We will now install the latest version of Node 8:

nvm install 8

This will install the latest version of Node 8, which is, as the time of writing, the latest LTS (Long Term Support) version. LTS version are always an even number (4, 6, 8 etc.).

Once installed, you should get this:

You now have a working version of Node, so we can proceed by creating a new React app to make sure everything is working smoothly.

Creating a new React App

Let’s first create a dev folder in your home directory, where you will store your code. Execute the following commands:

cd ~/
mkdir dev
cd dev

The first one will change the current directory to your home directory (~ represents your home directory). The second command will create a dev directory, and the third one will change the current directory to your new directory.

We are now going to install create-react-app:

What is create-react-app? It’s a tool that was created by Facebook to make it easier to create a “turn-key” React project in a few seconds.

In your Terminal, type the following:

npm i -g create-react-app

Explaining this command: NPM is the package manager for Node. This is used in every Node project to download and manage dependencies (code written by others that your project is going to use).
The “i” in the command tells the NPM program to install what follows.
The “-g” flag means that this dependency will be global: it’s not specific for your project, and can be executed from your Terminal.

Once this is installed, we can now create our first React application:

Still in your dev directory, issue the following command:

create-react-app hello

This will create a brand new hello app in your dev directory.

Change your current directory to the hello directory:

cd hello

And then start the app by doing:

npm start

You should get a running program in your Terminal, and an open browser will your running app:

Installing an IDE

To read and write some code you will need an Integrated Development Environment (IDE for short).

The one that we will be using for our project is Visual Studio Code.

You are free to use any other IDEs such as Atom, Sublime Text, or the more involved (and not free) JetBrain’s IntelliJ IDEA, but we will use VS Code from this point forward.

To install Visual Studio Code, head to the download page and download it.

As any Mac software, copy the executable from your download folder to the Application folder:

Now, as I told you before, the Terminal is going to be your best friend, so we will run VS Code from the Terminal directly.

To do that, we need to add VS Code to the “path”. That means that any time you type “code” in your Terminal, it should launch VS Code.

To do that, open VS Code “the old way” by double-clicking its icon in the Applications folder. Once opened, hit the following key: ⌘ + <shift> + P

This will open a command-line interface within VS Code, and you will type: install path which should narrow the list to this:

If the “Shell Command: Install ‘code’ command in path” is selected, hit enter and quit VS Code. This should do the trick.

To make sure it worked, close both VS Code and any Terminal window you have opened, open a new Terminal window, go to your “hello” project that we’ve created earlier and type

code .

The dot (.) after the command means the current directory. So what the above command does is opening VS Code in the current directory (your project).

Bonus: Installing Homebrew and Yarn

HomeBrew is a package manager for Mac, similar to APT for Debian/Ubuntu and make installing command-line tools simpler on Mac. We will use this to install Yarn.

Yarn is a replacement for NPM. It’s considered faster and safer, although NPM 5 made a lot of progress, Yarn still seems to be better.

To install HomeBrew, run the following command in (you guessed it) your Terminal:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

During the installation, the installer might prompt you for your password:

Once HomeBrew is installed, we can proceed with installing Yarn: type the following in your Terminal:

brew install yarn --without-node

Why the “without-node” argument? Because we installed Node using NVM, not HomeBrew, so we don’t need to (and don’t want to) install it twice.

To make sure Yarn was installed properly, do a yarn -v and it should output the current version.

Happy coding!