How I set up my Web Dev environment in Linux
Tags: linux, ubuntu, webdev
Published: 2021-07-08 18:58:55

Every time I install a Linux distro on my PC I ended up forgetting some configurations, so I created this article as a cheatsheet for setting up my Web Dev environment in Ubuntu.

- First of all install curl
```shell
sudo apt install curl
```
- Install git
```zsh
sudo apt install git
```
- Add `.gitconfig` in the user folder. This is my config:
```ini
[user]
	name = Your Name
	email = username@mail.com
[color]
	branch = auto
	diff = auto
	showbranch = auto
	status = auto
	ui = true
[color "branch"]
	current = yellow reverse
	local = yellow
	remote = green
[color "diff"]
	meta = yellow bold
	frag = magenta bold
	old = red bold
	new = green bold
[color "status"]
	added = yellow
	changed = green
	untracked = cyan
[log]
	date = short
[alias]
	commita = commit --amend --no-edit
	lg = log --oneline
	lgg = log --oneline --graph --decorate=short --branches='*'
	pushf = push --force
	st = status -sb
[push]
	default = current
[pull]
	rebase = true
[core]
	editor = code --wait
[init]
	defaultBranch = main
```
- Install [Zsh](https://github.com/ohmyzsh/ohmyzsh/wiki/Installing-ZSH) and [Oh my Zsh](https://github.com/ohmyzsh/ohmyzsh). Also install [Spaceship ZSH](https://github.com/spaceship-prompt/spaceship-prompt) theme.
```shell
# Install Zsh
sudo apt install zsh
# Make it your default shell:
chsh -s $(which zsh)
# Install Oh my Zsh
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
# Install Spaceship theme
git clone https://github.com/spaceship-prompt/spaceship-prompt.git "$ZSH_CUSTOM/themes/spaceship-prompt" --depth=1
# Symlink spaceship.zsh-theme to your oh-my-zsh custom themes directory
ln -s "$ZSH_CUSTOM/themes/spaceship-prompt/spaceship.zsh-theme" "$ZSH_CUSTOM/themes/spaceship.zsh-theme"

```
After install the Spaceship theme, set `ZSH_THEME="spaceship"` in your `.zshrc` file (it should be on your user folder). I also use this moment to change some default configurations, it should look something like this: 
```ini
# oh-my-zsh config
export ZSH="/home/user/.oh-my-zsh"

# zsh theme selection
ZSH_THEME="spaceship"

# oh-my-zsh plugins
plugins=(
	common-aliases
	gitfast
	git-extras
	node
	npm
	sudo
	web-search
)

# More oh-my-zsh stuff
source $ZSH/oh-my-zsh.sh

# Adding a default user makes lots of themes look better:
DEFAULT_USER="user"

# Node installation path
export PATH=$PATH:~/.node/bin

# VSCode config.
export EDITOR="code"
``` 
Once you complete setting up the terminal, remember to reboot your PC to apply the changes.

- Install [Powerline Fonts](https://github.com/powerline/fonts) for the terminal.
```zsh
sudo apt-get install fonts-powerline
```
- Install the alternative of [Total Commander](https://www.ghisler.com/download.htm) for Linux:
```zsh
sudo apt install mc
```
- Install [Node.js](http://nodejs.org/). Download the [Linux Binaries](https://nodejs.org/en/download/), extract the `.tar.gz` file and copy all the internal files. Create a folder in your user folder called `.node` and paste all the files there.
if you installed Zsh, you should add the node path to the `.zshrc` file...
```ini
# Node installation path
export PATH=$PATH:~/.node/bin
```
- Install some global npm packages that I use frequently
```zsh
# Install pnpm
npm i -g pnpm
# Install some global packages
pnpm i -g fixpack fx live-server rimraf
```
[fixpack](https://www.npmjs.com/package/fixpack): To order and clean `package.json` files
[fx](https://www.npmjs.com/package/fx): To see and interact with `.json` files in the terminal.
[live-server](https://www.npmjs.com/package/live-server): A development server with live reload for HTML, CSS and Javascript.
[rimraf](https://www.npmjs.com/package/rimraf): For removing files and stuff.
- Install [Gdebi](https://launchpad.net/gdebi), a tool for installing `.deb` files.
- Install [Brave](https://brave.com/) browser.
- Install [Keeweb](https://keeweb.info/) password manager.
- Install [Discord](https://discord.com/download).
- Install [Visual Studio Code](https://code.visualstudio.com/). Once it's downloaded sync your extensions and configurations (Thank you vs-code for this feature, it saves me a lot of time 😭).
- Install [Insomnia](https://insomnia.rest/) for building, designing and testing APIs. You can download the `.deb` file [here](https://insomnia.rest/download).
- Install [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli). I have some projects hosted on Heroku so I need to have the CLI installed.
```zsh
# Install Heroku CLI
sudo snap install --classic heroku
# LogIn
heroku login
```
- Install [peek](https://github.com/phw/peek), a screen recorder:
```zsh
sudo apt install peek
```
- Install [GIMP](https://www.gimp.org/) for editing images.
```zsh
sudo snap install gimp
```
- To make my own avatars, mock designs and create the logos for my apps I use [Gravit Designer](https://designer.gravit.io/)'s PWA.
- Recently I started learning about 3D modeling and WebGL. The 3D software that I use is [Blender](https://www.blender.org/), so install it with the following command :
```zsh
sudo snap install --classic blender
```

And that’s it! Probably I’m forgetting something so I’ll update the article if something comes to my mind.

Thank you for reading! Hope you find it useful.