10 Things a Front End Developer Should Know in Terminal

10 Things a Front End Developer Should Know in Terminal

May 14th, 2018


Many front end developers shy away from the command line preferring GUI alternatives however it's now a common requirement in the workplace, here are 10 things every front end developer should know in terminal.

The command line can seem very intimidating to a new user and some developers will keep it at and arms distance because it conjures up images of movies such as the Matrix, streams of glowing green code that only computers and "the one" dare try to understand. The reality however is rather anti-climatic as after you learn some commands it becomes a civilised tool which can liberate you from sometimes clunky and bloated GUI tools.

This is by no means an exhaustive list of things front end developers should know on the command line but it is a good starting point and will make several areas of your development workflow smoother as well as being able to communicate with other command line users

These are commands are for macOS users but should also work for Linux, if you are a windows user the same concepts still apply but the commands will differ.


Most commands you run in terminal are going to involve a path to a specific file or directory but you won't always know where what you're looking for is so you often need to navigate your filesystem to seek out a file.

cdChanges directory to the provided path.cd sites/my-awesome-site
pwdShows you the path of the working directory.pwd
lsLists contents of current directory or provided path.ls sites


Creating files and folders is a breeze using the command line, just a few commands can flesh out a new project structure, say goodbye to right clicking in finder or your IDE.

touchCreates a filetouch index.html
mkdirCreates a directorymkdir assets

With these commands you can pass though multiple names to create several directories/files at once, for example:

mkdir my-site
cd my-site
mkdir styles scripts images
touch index.html

Move, Copy, Rename

Dragging and dropping files in the wrong place by mistake happens to me more than I care to admit but because these commands specify a path you can be sure you always know where they came from and where they're going.

mvMoves a file or changes its name.mv file1.txt dir2/file2.txt
cpCopies from one location to another.cp documents/file.txt desktop/file.txt

The mv command also doubles up as a way to rename a file for example:

mv myblogpostpage.html blog.html


Warning! do not pass trash go straight to remove. These commands may not behave as you'd expect as it does not move the item to the trash but instead removes it straight away!

This is one of those that's good to know but not always good to use especially when your new and may be pasting commands into terminal you don't entirely understand.

rmDeletes file at path.rm sites/old.css
rmdirDeletes directory at path.rmdir old-photos
rm -RDelete that folder, any sub-folders and files it contains.rm -R my-old-site


This is a tricky subject as some people actually prefer coding on the command line using programs like vim and emacs, I however do prefer to use a GUI based text editor for coding and for the context of this blog post modifying files in the terminal is mainly focused on quickly modifying text based documents where a more capable tool isn't required for example updating a config file, making a typo correction or adding small amount of content.

There are many options for modifying text based files but I find the most user friendly is called nano, it comes preinstalled and has command hints at the bottom. Nano is a very basic editor compared to others which is exactly what makes it great for n00bs.

To create or open an existing file just call nano followed by the filename.

nano filename.txt

You will then be able to type in the file, when your done press "ctrl x" if will then ask if you want to save the file "save Y/N?" type "Y" or "N" accordingly, if you chose the former it will ask you for the filename defaulting to the one provided, once your happy just press enter.


Not much to be said here, open a file or files. I commonly cd into a project and run open . -a atom to open my project inside the atom text editor.

openOpens file at path using default application.open cv.doc
open -aOpens file at path using specified application.open index.html -a firefox


Git is one of the most important tools for a developer as it enables you to version control and collaborate with other developers effectively. I'm not going to rant about why you should be using git here but it is hands down he most crucial tool to manage code as a front end developer.

The most common way to interact with git is to install and use the cli, the most common commands are:

git cloneClone an existing repository.
git initInitialise the working directory as a git project.
git addAdd files to staging area.
git commit -mCommit the staged files to the branch with a message.
git pushPush commits to the remote branch.
git statusDisplay current directory state and staging area.
git logDisplays the commit log.


Yarn is a dependancy management tool built on top of npm which stands for "node package manager". As the name suggests it manages packages of javascript code that your project depends on. Yarn is faster and better at managing dependancies across different environments and is an "out of the box" replacement for npm.

yarn initInteractively creates or updates a package.json file.
yarn installInstalls dependancies.
yarn addAdds a dependancy on a package.
yarn removeRemoves a dependancy on a package.
yarn upgradeUpdates a dependancy.
yarn runRuns a defined package script.


It's very common to access a remote server to transfer files, the ssh command allows you to connect and authenticate with a remote host. You can then execute commands on the server directly from your local machine's terminal.

To establish a connection you simply need to specify the correct ip address or url. The first time you connect to a new server there will be some form of authentication.

ssh username@remote_host

Writing shell scripts

Sometimes in your work flow you can find yourself repeating a lot of commands or stringing several commands together to perform a particular task. This can disrupt you or make the work tedious, instead you can make shell scripts that contain repetitive tasks and then execute them.

The most simple way to do this is to create a shell script file with the extension '.sh' and type your commands into it.

Next you need to give it the executable permission chmod +x ./yourscript.sh. You can then run it by typing the path into the command line ./yourscript.sh.

A word of warning, do not execute script that you do not know the contents or source of.


If you're a front end developer that shies away from the command line or uses it very little you are missing out and frankly being left behind, it can increase productivity and open up a plethora of tools to empower your development.