How To Setup Your MacBook For Web Development

When I got started with web development, I had NO IDEA what I was doing. It was super hard to get things installed or let alone knowing what to install. It was definitely a painful experience back then but it all makes more sense now. As it turns out, there are tons of tools to make the whole process easier.

My goal with this tutorial is to set you up with the basics to start coding in your MacBook. Hopefully this makes it just a little bit easier for you to get started in this amazing journey! Feel free to ask any questions or advice by writing a response.

Video Tutorial

iTerm2

iTerm2 is a terminal (or console) with more features than the terminal that comes in your Mac. The terminal gives you access to the command line (or shell). Using the command line you can execute files in your computer, create directories, edit text, start servers, etc. It’ll make more sense as you get deeper in development so don’t worry about it too much now. Just make sure you know how to get to it.

With iTerm2 you can choose themes and install plugins that will make your dev life a lot easier. We will explore more of its features in future posts. For now, we will just get it installed. You don’t have to get this installed to go through the rest of the tutorial but I highly recommend using it.

Installation

Go to iTerm2 and click on the Download button for the latest stable release.

Go to your downloads folder and click on the downloaded file.

Double click on iTerm.

Click on Open and Move to Applications Folder.

Choose if you want automatic updates (I choose Check Automatically).

Voila’ you have iTerm.

Xcode Command Line Tools

The Xcode Command Line Tools are necessary to do macOS command line development. I’m not entirely sure what that means, but I know that things don’t work unless they are installed. You DO NOT need to install the entirety of Xcode to get the command line tools. Just follow the instructions below to get this package installed.

Installation

Go to your console (iTerm2 we just installed) and type the following to check if you already have the tools installed.

$ xcode-select -p

If you get something like:

/Library/Developer/CommandLineTools

Then you’re done! If not, enter:

$ gcc

A pop up window should appear. Click on Install. After the installation, make sure it is installed by typing:

$ xcode-select -p

You should get a directory in response. To make double sure run:

$ gcc --version

You can always update Xcode in the Apple AppStore.

Homebrew

Homebrew installs the things Apple didn’t via the command line. It also makes it easy to update them and fix them if something is wrong.

Installation

Go to your command line and enter:

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

It’ll prompt you with all the directories it’s going to be creating. Hit enter to continue. Type in your MacBook password when prompted.

Yay! You should have homebrew now! But we can forget about cask for more easy installations.

$ brew tap caskroom/cask

As easy as that! I used brew caskto install spotify when I first got my MacBook, it was as easy as entering:

$ brew cask install spotify

Try it! It’s an amazing and super necessary tool.

Atom

Developers have their own preferences when it comes to text editors (the tool you use to write your code). You will hear about Vim, Emacs, TextMate, etc. I prefer to use Atom, although I have used Sublime in the past and it was pretty nice. Atom is completely free, customizable, and has thousands of packages.

Installation

Go to your terminal and enter:

$ brew cask install atom

It may ask you for your computer password before it finishes installing. You can now find atom in your applications folder!

Node

Node is a JavaScript server framework. You will need it at some point so it’s good to get it installed from the get go. I remember having some issues installing it in the past but with brew everything ran smoothly. Installing node will also install NPM (node package manager) which aids in package installation, versioning, and dependencies.

Installation

Open up your command line and enter:

$ brew install node

Check the version to confirm it installed:

$ node -v

The package manager NPM should have been installed with it, to confirm type:

$ npm -v

You should get version numbers for both of those if installed sucessfully.

PostgreSQL

PostgreSQL is a RDMS (relational database management system). When you run an application, the data gets saved in tables in a PostgreSQL database. You can then access the data, update it, or delete it. I had a VERY hard time installing PostgreSQL in the past when I used it for one of my Ruby On Rails projects. My advice is to not install anything manually and read the instructions when something is done installing.

There are other similar databases such as MySQL or SQLite you may want to install in the future if you’re planning on using them.

Installation

Open up the command line and type:

$ brew install postgresql

There are different suggestions on the internet as to how to start and stop your database. Feel free to follow any of them. Since postgres is not my best friend I decided to try out the homebrew services. Type the following to install it:

$ brew tap homebrew/services

You can then use the following commands to start, stop, or restart your database:

$ brew services start postgresql
$ brew services stop postgresql
$ brew services restart postgresql

If you have no idea what these do, don’t worry. We won’t be using them until we start an app with a database.

Summary

I hope this helped you get your computer setup and ready for development. My next post will be about some small things to add that could make your life easier. Then we will get into installing elixir and phoenix, and code some awesome stuff!

Interested in learning Elixir? Join my mailing list to stay updated on new content :)