An Interest In:
Web News this Week
- March 28, 2024
- March 27, 2024
- March 26, 2024
- March 25, 2024
- March 24, 2024
- March 23, 2024
- March 22, 2024
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 Zsh and Oh my Zsh. Also install Spaceship ZSH theme.
# Install Zshsudo apt install zsh# Make it your default shell:chsh -s $(which zsh)# Install Oh my Zshsh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"# Install Spaceship themegit 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 directoryln -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 configexport ZSH="/home/user/.oh-my-zsh"# zsh theme selectionZSH_THEME="spaceship"# oh-my-zsh pluginsplugins=( common-aliases gitfast git-extras node npm sudo web-search)# More oh-my-zsh stuffsource $ZSH/oh-my-zsh.sh# Adding a default user makes lots of themes look better:DEFAULT_USER="user"# Node installation pathexport 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 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[core] editor = code --wait[init] defaultBranch = main
- 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 pathexport PATH=$PATH:~/.node/bin
- Install some global npm packages that I use frequently
# Install pnpmnpm i -g pnpm# Install some global packagespnpm 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 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 CLIsudo snap install --classic heroku# LogInheroku login
- 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 thats it! Probably Im forgetting something so Ill update the article if something comes to my mind.
Thank you for reading! Hope you find it useful.
Original Link: https://dev.to/rightonhana/how-i-set-up-my-web-dev-environment-in-linux-4n2h
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To