How I set up my Web Dev environment in Linux

Florencia Gonzalez — Thu, 08 Jul 2021 18:58:55 +0000

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 = 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 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.

How to install popular Linux distros

Florencia Gonzalez — Sat, 03 Jul 2021 17:27:06 +0000

Probably there are hundred or thousands of articles on how to install Linux but I made this mainly for myself, but maybe you find it useful too.

I will show you how to do it in 5 simple steps. The steps are almost the same for every popular distro.

Step 1 : Download a program to create a bootable USB drive

First of all you will need a pendrive. Without one we can't do so much...

Download a program to create bootable USB drive. There are many programs for that, here are some of them: UNetbootin, Rufus, Etcher, Linux Live USB Creator and there are many more.

Not all of them are for all Operating Systems so you will need to check if they are available for your OS. For example, UNetbootin if for Windows, Linux or Mac OS but Rufus is only for Windows.

Once you picked the program you like, download it and install it in your Operating System.

Step 2 : Download the Linux .iso

There are several Linux distros you can install. The most popular is Ubuntu and is the one I recommend to install if it is your first time. You can check all the Linux distros here (there are a lot of them as you can see 😂).

Once you picked the distro you want, go to their website and download the .iso file. Here is the Ubuntu download website.

In the case of Ubuntu, you can choose between the LTS (long-term support) version or the latest one. I personally always choose the latest one but you can install the version you want.

Step 3 : Create the bootable USB drive

Plug in the pendrive and open the program you installed in Step 1.

Load the .iso file to the program, select the pendrive to install the Linux image and click in the confirm button.

Now you just need to wait until the program finished doing its magic.

Step 4 : Configurate the Boot order

Without removing your pendrive, reboot your PC and go to the BIOS/UEFI.

Depending on the PC you can access the BIOS by clicking F2, fn + F2, or delete just before it starting booting/loading your Operating System. If you are not sure which key you need to press to access the BIOS on your computer, you can google it (for example, "how to get into MSI BIOS").

Once you are on the BIOS you will need to fix the boot order priorities. The "USB" option should be the first one.
The BIOS are different so if you have some issues changing the configuration of the boot order, you always can google how to do it with your specific computer ("How I change the boot order priority in MSI").

Normally on the BIOS you will have a "cheatsheet" on how to move in there and how change settings, for example:

After that, save and exit from the BIOS and do not remove the pendrive for the next step.

Step 5 : Install Linux

This step will vary depending on the Linux distro you choose on Step 2.

When you exit the BIOS, the PC will restart and you will see a simple Command interface who will guide you on the installation.

And done!! You now have Linux installed on your PC! 🎉

Bonus!

I normally install Linux in a partition on my PC and I always have the problem that Windows boots before Linux.

To change the booting order, you should reboot your PC and go to the BIOS. Once you are in the BIOS, Change the booting priority so that Linux is the first one.

Again, if you have any problem changing the boot priority I recommend how to do it with your specific computer.

Now your PC will boot with Linux as default 🎉

Thanks for checking out this article! Hope you find it useful!

DEV Community: Florencia Gonzalez