Setting up a Web Development Environment | Mac OS X

7 min readJul 29, 2017

If you’re looking to get into web development and have yet to setup your Mac to do so, this article is for you.

If you’re a web developer new to Mac and have yet to setup your development environment, this article is for you.

TL;DR Install the following: Oh My Zsh, Home Brew, Atom

Setting up your terminal

Your terminal is a crucial element of web development. It allows you to manage your files and projects, run your programs, deploy your websites, and much more.

Chances are, you’ll be spending a lot of time in the terminal. That being said, you’ll most likely want your terminal to have a clean look and feel.

Introducing Oh My Zsh, a terminal shell that embeds itself into your existing terminal to give you a more friendly terminal experience. Oh My Zsh also provides Git, a popular version control system and some useful Git terminal shortcuts(you can view the shortcuts by using the “alias” command in the terminal after Oh My Zsh is installed).

Open the terminal by pressing the command key + the space bar to open spotlight search, and then type “terminal” and press enter.

Copy and paste the following command into the terminal and press enter:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

Oh My Zsh is now installed and your terminal should now look something like this:

If you prefer a darker theme, you can click the word “terminal” in the top left of your screen, proceed to preferences, select “profiles”, choose your theme, and then press the “default” button and restart your terminal.

Now that you have setup your terminal, you’ll want to have a package manager that will allow you to install terminal helpers, programming languages, and more via the command line(the terminal).

This is where Home Brew comes in.

Copy and paste the following command into your terminal and press enter:

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

After Home Brew installs, you should be able to type the command “brew” and receive the following output:

Let’s install a simple terminal helper using Home Brew and check that it works. Type the following command into your terminal and press enter:

brew install tree

After that has finished installing, let’s go into your Applications folder and run the tree command.

To do this, first change directory(cd) into your Applications folder:

cd Applications

And then simply run the tree command:

tree

You should now see an image similar to this(does not have to have the same details, the nicely laid out folder/file structure is what matters):

In the future, if you need to install something like Node.js/NPM, GoLang, Ruby, and many others, you can do so using the “brew install PACKAGE_NAME” command.

If you’re not sure if your needed program is available through Home Brew you can search here.

Setting up your Text Editor

Your text editor is your primary tool for building websites, applications, and in general modifying files.

Some great text editor options available right now:

Atom, VS Code, Visual Studio(not free), Sublime Text, IntelliJ IDEA products(not free), and many others.

For this article, I’ll walk through installing the Atom text editor.

Go to https://atom.io/ and click “Download For Mac”:

Don’t forget to click the installed zip folder and drag Atom from the Downloads folder to the Applications folder to complete the installation.

If your terminal is currently open, let’s close it for now.

Using spotlight search(command + space), type “Atom” and open the application.

Click the word “Atom” at the top left and select “Install Shell Commands”:

You are now ready to open Atom from the terminal.

Close Atom and open the terminal using spotlight search.

Create a workspace folder for your main projects:

mkdir ~/workspace

And then change directory into the workspace folder:

cd ~/workspace

Now you can open your workspace folder in the Atom text editor by entering the following terminal command(atom + space + .):

atom .

That command opens Atom from the directory(folder) you are currently in.

To see the exact directory you are in from the terminal you can type this command(pwd is print working directory):

pwd

You should now have Atom open and see something like this:

Let’s make sure your editor is setup with a few tools to help you in web development.

Click “Atom” at the top left and select preferences(you can also press command + , to have the same effect).

Select “Packages” and search for “autosave”.

Click the “Settings” button for the autosave package and enable it.

This will make sure that when you modify your folders/files within Atom, your changes will be saved automatically.

Now let’s go to the “install” section, search for “emmet” by “emmetio” and click install.

Emmet gives you many common coding shortcuts that improve your productivity while building websites.

Now let’s install the “file-icons” package by “file-icons” to improve the images/icons that will show up next to the files we work with in Atom. This will make finding our files easier and will make our files nicer to look at in the tree view on the left-hand side.

There are many other useful packages and Atom themes that can be installed from the settings/preferences section of your editor. Atom is open-source and useful packages are being made available by the community all the time.

Testing out your Development Environment

Let’s test out your new setup with an HTML5 Hello World program.

Right-click on your workspace folder in the top left side of your Atom editor and select “New File”.

Create an index.html file and press enter:

Double click the index.html file in your project’s tree view within the workspace folder you just clicked on.

Your editor should open that file in one of your Atom tabs.

In the index.html file type the following:

This is where the “Emmet” package will come in handy. With your cursor at the end of the “html:5" text, press tab to get the following output: