DEV Community

loading...
Cover image for How I set up my Web Dev environment in Linux

How I set up my Web Dev environment in Linux

Florencia Gonzalez
Hi there! πŸ‘‹ I'm from Argentina πŸ‡¦πŸ‡· but I'm currently living in the United States πŸ‡ΊπŸ‡Έ I'm a Front-end developer with experience in Angular, React, Svelte, Javascript, Typescript and other stuff πŸ‘©β€πŸ’»
・Updated on ・3 min read

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
Enter fullscreen mode Exit fullscreen mode
  • Install git
sudo apt install git
Enter fullscreen mode Exit fullscreen mode
  • Add .gitconfig in the user folder. This is my config:
[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
Enter fullscreen mode Exit fullscreen mode
# 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"

Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

Once you complete setting up the terminal, remember to reboot your PC to apply the changes.

sudo apt-get install fonts-powerline
Enter fullscreen mode Exit fullscreen mode
sudo apt install mc
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • Install peek, a screen recorder:
sudo apt install peek
Enter fullscreen mode Exit fullscreen mode
  • Install GIMP for editing images.
sudo snap install gimp
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)