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 = [email protected]
[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

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.

Tags:

Linux Ubuntu Webdev

How to build powerful tables in React using the React Table package

Websites To Learn Programming For Free

NodeJS vs Python

Best Website Speed and Performance Testing Tools Free

App Development Practices To Follow For Your Business In 2021

A first look at Qwik - the HTML first framework

Six Angular Best Practices You need to apply to make your App perform at its best!

Difference Between React And Angular. A Comparison Guide For 2021

How I set up my Web Dev environment in Linux

Tags:

Related Posts