dev env

Setting Up a Development Environment

By
Gideon Kreitzer
Published
2021/11/7
Updated
2022/4/13

We'll cover bootstrapping MacOS or a Debian-based Linux machine with a slick terminal, and how to setup your workflow with Git, SSH, and Node.js

Index

This guide is a recipe for setting up a development environment that is easily replicable, spruces up the shell in furtherance of productivity, and aims to make managing SSH and Node installations more seamless. It's aimed at developers using MacOS or some flavor of a Debian-based Linux distribution. If you're on Windows and want to try development in a Linux environment, you can check out Developing on Windows with WSL.

Legible type

hack is a programmers font
A sample of the Hack font

The first step is choosing a font that's easy on the eyes. Hack is a monospace font which were designed for code. It has a natural style that is both distinct and legible. You can read more about the original Hack, but we'll be using a modified version of the font to take advantage of the extra glyph support later when we install the terminal prompt.

You can head over to Nerd Fonts and check out their collection of powerline fonts, but if you want additional ligatures like the fat arrow, equality, and destructuring symbols, you'll need a copy of Hack that is patched accordingly. I've been using Damien Rajon's patch which includes that extended ligature set.

If you're on Ubuntu, you can install the font simply by dropping its relevant typefaces in ~/.local/share/fonts.

Terminal emulator

Hyper is an Electron-based terminal emulator that is built with HTML, CSS, and JavaScript. Hyper remodels the somewhat arcane terminal window into something worthy of induction into the 21st century. It also pairs remarkably well with the prompt we'll install in the next section.

Go ahead, and grab Hyper. I've denoted the configuration changes I've made to my installation in .hyper.js. Hyper's configuration file can be found in your home directory.

# take care to use the current version number
$ sudo apt install ./hyper_3.1.4_amd64.deb

On MacOS you can simply grab the appropriate installer package for the silicon your machine is running. Hyper is compiled for both Intel and Apple chips.

module.exports = {
    config: {
        // up the font size a few notches
        fontSize: 17,
        // set your chosen powerline font
        fontFamily: 'Hack Nerd Font Mono, ..., monospace',
        // tweak the padding a little
        padding: '12px 14px 12px 22px',
        // specify the plugins it should install from npm
        plugins: ['hyper-one-dark', 'hyperpower'],
    }
};

The prompt

Hyper with the Starship prompt in action
Hyper with the Starship prompt

Recently I switched from using Denys Dovhan's spaceship-prompt to Starship. The latter is a fairly new arrival to the prompt scene and allows the user to stay on Bash (or pretty much the shell of their choice), while having an extensive feature set and extensibility profile. It's also cross-platform, and installs in a jiffy.

# this will install Starship on MacOS & Linux
$ curl -sS https://starship.rs/install.sh | sh

# alternatively, if you're on a Mac and prefer Homebrew
$ brew install starship

Once the above command has ran its course, you need to add the following line to the end of your ~/.bashrc

eval "$(starship init bash)"

Done. Time to take your shiny new terminal for a spin.

Git setup

The Git DVCS is a stock part of most setups. Note that, if you know you're not going to need extras like a revision tree visualizer, tools for working with other VCS's, or a web interface etc, or if you are in an environment strapped for disk space, you can just install git by itself with sudo apt install git.

# check if you have Git installed
$ which git

# otherwise get it
$ sudo apt install git-all

# let's make sure all went well
$ git --version

# configure your git globals
$ git config --global user.name "Your Name"
$ git config --global user.email "user@users.noreply.github.com"
Git on MacOS
MacOS Monterey prompt for Command Line Tools
The CLDT installation prompt on Monterey

For MacOS, you'll need to install its command line developer tools to get Git installed. Unless you're going to develop applications for any of Apple's platforms, you do not need to install the full Xcode IDE to get Git.

To install the command line tools package, open the terminal and run the git command. This should prompt you to install it. Alternatively, run xcode-select --install to initiate the installation prompt.

Autocompletion

Next, we'll setup autocompletion for Git on Bash. The people at Git maintains a script for this purpose. Download it to a directory fo your choice, in the following example I'll go with the user's home:

$ curl https://raw.githubusercontent.com/git/git/master/contrib/completion/git-completion.bash -o ~/.git-completion.bash

Add the following snippet to your ~/.bash_profile or ~/.bashrc

if [ -f ~/.git-completion.bash ]; then
  . ~/.git-completion.bash
fi

That's it. Reload your shell and your Git setup should now be in fair shape.

# you may have to make that script executable
$ chmod +x ~/.git-completion.bash

# reinitialize your shell
$ source ~/.bash_profile

SSH setup

We'll set a configuration file containing our SSH keypair identities to make working with SSH more seamless by pre-authorizing our sessions, and to make granular management of multiple hosts more efficient and replicable.

# check if you have an existing keypair 
$ ls -la ~/.ssh/

# otherwise, generate a new public/private pair
$ ssh-keygen -t ed25519 -C "identifying label for keypair"

Follow the prompts by setting a password for the new keypair, and saving the file in ~./ssh/ under a unique name if you plan on using a custom SSH config, like ~/.ssh/git_machine_x.

# add ssh key to ssh-agent
$ eval "$(ssh-agent -s)"
# add your private key to the agent
$ ssh-add ~/.ssh/git_machine_x

# add the public key to the account you want to access
$ cat ~/.ssh/git_machine_x.pub

Configure your SSH settings file in ~./ssh/config

AddKeysToAgent yes
PasswordAuthentication yes

# GitHub | Machine X
Host github.com
    HostName github.com
    User git
    IdentityFile ~/.ssh/git_machine_x
    IdentitiesOnly yes

Installing Node

Since we're setting up a development environment, we're going to use nvm to manage our Node.js installations. In the next step we're going to install the latest version of nvm. Be sure to update the version number to the latest stable release before you run the command.

# the script will clone the nvm repository to ~/.nvm
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

All that remains now is to verify the installation and install the version(s) of Node you need.

# verify install
$ command -v nvm

# you can install the latest LTS version of Node
$ nvm install --lts

Shell helpers

It pays to furnish your .bash_aliases with a couple of helpful convenience methods or shortcuts for frequently used commands. It's a simple way to save yourself a healthy amount of time and keystrokes down the line. You can take this further with shell functions to enhance your workflow and efficiency even more, but that is beyond the scope this basic setup guide.

# create an alias file
$ touch ~/.bash_aliases

Flesh out your .bash_aliases with some helpful shortcuts, whether it's a simple alias or a function that can accept arguments from stdin.

# setup some aliases
alias ~="git status"
alias v="git add -A"
alias t="git pull"
alias s="git push"

# stages and commits with message
function p() {
    git add -A && git commit -m "$*"
}

There's a chance you'll need to declare your .bash_aliases for them to be picked up by the shell during startup. Add the following check to your .bash_profile so that it can source your aliases:

if [ -f $HOME/.bash_aliases ]
then
  . $HOME/.bash_aliases
fi
Credits
Photo by Rod Long
Tags
unix development environment