How I set up my Web Dev environment in Linux

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

sudo apt install curl

• Install git

sudo apt install git

• Add .gitconfig in the user folder. This is my config:

[user]
    name = Your Name
    email = [e-mail]
[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 and Oh my Zsh. Also install Spaceship ZSH theme.

# 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:

# 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 for the terminal.

sudo apt-get install fonts-powerline

• Install the alternative of Total Commander for Linux:

sudo apt install mc

• Install Node.js. Download the Linux Binaries, 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...

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

• Install some global npm packages that I use frequently

# Install pnpm
npm i -g pnpm
# Install some global packages
pnpm i -g fixpack fx live-server rimraf

fixpack: To order and clean package.json files
fx: To see and interact with .json files in the terminal.
live-server: A development server with live reload for HTML, CSS and Javascript.
rimraf: For removing files and stuff.

• Install Gdebi, a tool for installing .deb files.
• Install Brave browser.
• Install Keeweb password manager.
• Install Discord.
• Install Visual Studio Code. 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 for building, designing and testing APIs. You can download the .deb file here.
• Install Heroku CLI. I have some projects hosted on Heroku so I need to have the CLI installed.

# Install Heroku CLI
sudo snap install --classic heroku
# LogIn
heroku login

• Install peek, a screen recorder:

sudo apt install peek

• Install GIMP for editing images.

sudo snap install gimp

• To make my own avatars, mock designs and create the logos for my apps I use Gravit Designer's PWA.
• Recently I started learning about 3D modeling and WebGL. The 3D software that I use is Blender, so install it with the following command :

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.