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.
|cd||Changes directory to the provided path.||cd sites/my-awesome-site|
|pwd||Shows you the path of the working directory.||pwd|
|ls||Lists 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.
|touch||Creates a file||touch index.html|
|mkdir||Creates a directory||mkdir 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.
|mv||Moves a file or changes its name.||mv file1.txt dir2/file2.txt|
|cp||Copies from one location to another.||cp documents/file.txt desktop/file.txt|
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.
|rm||Deletes file at path.||rm sites/old.css|
|rmdir||Deletes directory at path.||rmdir old-photos|
|rm -R||Delete 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.
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.
cd into a project and run
open . -a atom to open my project inside the atom text editor.
|open||Opens file at path using default application.||open cv.doc|
|open -a||Opens 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 clone||Clone an existing repository.|
|git init||Initialise the working directory as a git project.|
|git add||Add files to staging area.|
|git commit -m||Commit the staged files to the branch with a message.|
|git push||Push commits to the remote branch.|
|git status||Display current directory state and staging area.|
|git log||Displays the commit log.|
|yarn init||Interactively creates or updates a package.json file.|
|yarn install||Installs dependancies.|
|yarn add||Adds a dependancy on a package.|
|yarn remove||Removes a dependancy on a package.|
|yarn upgrade||Updates a dependancy.|
|yarn run||Runs 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.
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
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.