Setting up a frontend dev environment (Debian/Ubuntu)

Edit on GitHub
Nov 20, 2018
System Administration
3 minutes

tl;dr: TO DO: i have written a script here that will take care of the entire thing

Packages

1sudo apt update && sudo apt upgrade -y
2
3sudo apt install -y curl build-essential file git

build-essential includes gcc, g++ and make as well as other packages.

Node & Yarn

 1# install Node
 2# https://github.com/nodesource/distributions/blob/master/README.md
 3curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
 4sudo apt-get install -y nodejs
 5
 6# install Yarn
 7# curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
 8# echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
 9# sudo apt update && sudo apt install yarn
10
11# Install Yarn 2
12npm install -g yarn

If yarn global packages are not working, add Yarn to the $PATH.

1echo -e "
2
3## PATH - Yarn
4export PATH=$PATH:`yarn global bin`" >> ~/.bashrc

Homebrew

1# Homebrew
2# https://docs.brew.sh/Homebrew-on-Linux
3/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

Now confirm instal and update $PATH

1test -d ~/.linuxbrew && eval $(~/.linuxbrew/bin/brew shellenv)
2test -d /home/linuxbrew/.linuxbrew && eval $(/home/linuxbrew/.linuxbrew/bin/brew shellenv)
3test -r ~/.bash_profile && echo "eval \$($(brew --prefix)/bin/brew shellenv)" >>~/.bash_profile
4echo "eval \$($(brew --prefix)/bin/brew shellenv)" >>~/.profile

Setting npm global defaults

1# check the entire config
2npm config ls -l
3
4# check init related defaults
5npm config ls -l | grep init

init-author-email = ""
init-author-name = ""
init-author-url = ""
init-license = "ISC"
init-module = "/home/aamnah/.npm-init.js"
init-version = "1.0.0"

 1# npm config set <key> <value> -g
 2npm config set init-author-name 'Aamnah' -g
 3npm config set init-author-url 'https://aamnah.com' -g
 4npm config set init-author-email 'hello@aamnah.com' -g
 5npm config set init-license 'CC BY-SA 4.0' -g
 6npm config set init-version '0.0.1' -g
 7
 8# yarn config set <key> <value> [-g|--global]
 9yarn config set -g init-license 'CC BY-SA 4.0'
10yarn config set -g init-version '0.0.1'

Git

1sudo apt install -y git
2
3git config --global user.name 'Aamnah'
4git config --global user.email 'hello@aamnah.com'

Sublime Text

 1# 1. Install the GPG key:
 2wget -qO - https://download.sublimetext.com/sublimehq-pub.gpg | sudo apt-key add -
 3
 4# 2. Ensure apt is set up to work with https sources:
 5sudo apt-get install apt-transport-https
 6
 7# 3. Select the channel to use:
 8## Stable
 9echo "deb https://download.sublimetext.com/ apt/stable/" | sudo tee /etc/apt/sources.list.d/sublime-text.list
10
11## Dev
12# echo "deb https://download.sublimetext.com/ apt/dev/" | sudo tee /etc/apt/sources.list.d/sublime-text.list
13
14# 4. Update apt sources and install Sublime Text
15sudo apt update && sudo apt install sublime-text

Frontend tooling

1yarn global add parcel-bundler

Snaps

--classic is needed if you want the app to be able to access external mount drives

 1sudo snap install chromium
 2sudo snap install firefox
 3sudo snap install opera --classic
 4sudo snap install youtube-dl
 5sudo snap install vlc
 6sudo snap install insomnia
 7sudo snap install postman
 8sudo snap install ngrok
 9sudo snap install node --classic --channel=edge # 8, 10 are other channel options
10sudo snap install slack --classic
11sudo snap install android-studio --classic
12sudo snap install sublime-text --classic
13sudo snap install code --classic
14
15sudo snap install winds

Devops

1# Netlify
2# https://docs.netlify.com/cli/get-started/
3npm install netlify-cli -g
4
5# Firebase
6#https://firebase.google.com/docs/cli#install-cli-mac-linux
7curl -sL https://firebase.tools | bash

Notes