Don't Be Bashful: A Designer's Intro to Bash


Written by


The featured image for this blog post.

If you design websites and/or web apps, there’s a good chance that you also write at least some of the front end code to execute your designs (HTML, SASS, JS, etc.). If you haven’t already, you’ll soon have to jump into the command line to run projects that you’re working on.

For anyone who’s new to the command line, starting from scratch can cause the kind of intense fears and paranoia typically reserved for found footage horror films and clown conventions. But worry not. Once you know a few key commands, you’ll be up and running in no time like a true Bash champion.

Why is it called Bash?

There are a lot of terms floating around that you’ve probably seen or heard like the command line, Terminal, Bash, shell: What are all of these? They all refer to basically the same thing, but here’s a breakdown so you can get down with the lingo:

Why use the command line?

Although it can be intimidating at first, using the command line opens up a lot of powerful tools to help you speed up web development. A few use cases you might come across are:

Getting started

To get started with Bash, open Terminal on your Mac. you should see something like this:

Austin-Prices-MacBook-Pro:~ Austin$

(If you’re not using a Mac, sorry this tutorial isn’t for you. Leave a comment below telling me why Microsoft machines are better and you are superior to me in every way.)                


Homebrew: The only true theme for Terminal.                                

This means there’s no task running and you’re good to get started. Well, you're almost good to get started. If you're going to be running commands, you have to look like you know what you're doing. In the application menu (at the top), go to Terminal > Preferences. Then select the Homebrew theme on the side of the window and click "Default" at the bottom. Now open a new shell window and you'll like a true command line wrangler.

First, let’s look at some simple commands to help you navigate through your documents.

Change folder

cd [Directory]

Use this command to move around between folders, or directories, on your computer. For instance, if you wanted to go into the directory for a new project you just set up, you would use:

cd documents/projects/new-project

If a folder name has spaces, put the name inside quotes.

cd documents/projects/’new project’

Use a “~” at any time to navigate from the Home directory.

cd ~/documents/projects/new-project

Use two dots, “..” to move up one directory. So navigating from documents/projects/new-project to documents/project:

cd ..

Show contents of the current directory


Running ls will show you a list of all the files and folders inside the current directory. So if you’re in documents/projects and you run ls, you might see:

Austin-Prices-MacBook-Pro:~ Austin$ ls

Make a new directory

mkdir [Directory Name]

Use this to make a new folder. Running the following command would create a new folder called “new-project”.

mkdir new-project

Open a file

open [File Name]

Use this to open a file. So to open index.html:

open index.html

Now you’re navigating with the command line like a champ! The fun is just beginning though.

Stopping a program

Control + c

If you’ve started to run a program and want to stop it, hold the Control button and press “C”. This will stop the program and allow you to enter more commands. It will show up in the command line as “^C”.

Global packages and package managers

Every project will have some local packages you need to install for that specific environment, but there are other packages, like Sass, that you’ll need to install globally. I’ll focus on the basics for now that you’ll need to install further global packages.


Homebrew describes itself as installing “the missing package manager for OS X [and Mac OS].” Once you install Homebrew, you can use it to install a ton of other packages you might need down the road. The install command is pretty long, so copy and paste is the way to go here:

/usr/bin/ruby -e "$(curl -fsSL"

You can also go to Homebrew’s website to learn a little more about it.


Ruby is programming language that comes with another package manager that allows you to install more packages. Soon enough, you’ll be rivaling Amazon with all the packages you’re handling. Since you just installed Homebrew, you can use that to install Ruby.

brew install ruby

Now that Ruby’s installed, we can install Sass. You’ll need this to compile all of those scss files into a nice css file for your project. We’ll use ruby to install Sass, which is a Ruby gem (it’s just a package but with better branding).

gem install sass


Node.js is a "Javascript runtime environment", which basically means it allows you to run and compile Javascript code on your computer without using a web browser. You'll need this installed for two reasons: First, you'll need to be compiling and running Javascript to run a front end Javascript framework. Second, Node has a package manager called npm that happens to have the biggest collection of packages in Internetland. Pretty much every project you work on will make use of at least some npm packages, which can help with anything from adding a dollar sign to your currency inputs to automatically refreshing your browser when you update files. You can use Homebrew to install Node pretty easily.

brew install node

Setting up local development environments

If you’re building a web app with a front end Javascript framework, like Ember or Angular, you’ll need to set up your local development environment before you can run the project locally. We typically use Ember for our web app projects, so I’ll use that as an example project. If the frontend dev on the project is any good, they’ll have a nice that’ll tell you the right commands to use.

Package managers and dependencies

Many web projects make use of add-ons or dependencies that help with anything from formatting to text to user authentication. These dependencies typically aren’t stored in source control. Instead, files that list all necessary packages are stored with the project and you just need to install them locally. You've already got setup with the two most common package managers, npm and bower, so all you need to do is run these two commands (one at a time):

npm install
bower install

Those commands will install all of the Bower and npm packages your project needs. Sometimes, you’ll run into permissions issues when running npm install. If that’s the case, simply run:

sudo npm install

Sudo gives super user permissions and will usually be able to overcome any permissions issues you have when installing npm packages.

Running the project

Once you’ve gotten the project setup and installed all of the packages, you’re ready to get it running locally. Depending on the type of project and the dev environment, these commands will vary.

We use Ember for most of our web app projects, so we use Ember CLI to run projects.

ember server

Other frameworks like Angular and React use npm CLI.

npm start

Some projects, especially more websites, use task runners like Gulp and Grunt to run projects. These are up to whoever created the gulpfile.js or gruntfile.js for the project, but will be something like:

gulp dev
gulp server
grunt dev
grunt server

No turning back

The deeper you get into the command line world, the more you’ll use Ruby gems and Homebrew packages to speed up your workflow and run projects. Bash can be a beautiful, wonderful thing and is less intimidating than it seems. So don’t be bashful, jump right in. Pretty soon you'll learn to love the command line as much as it loves you.