Originally posted on my personal blog which is much more colorful and enjoyable than hashnode 🤭

Do you want to switch to Ubuntu as a React developer? You can setup React development environment on Ubuntu by following this full guide. Vscode, terminal, fonts, themes and many other tools and utilities...

As a Linux enthusiast and React developer, I enjoy the experience on Ubuntu. In this full-fledged guide, I will try to explain all the details of my React development environment on Ubuntu. My development setup consist of these sections: 👇

• Terminal setup
  • Urxvt terminal emulator
  • Git and Curl (!)
  • ZSH setup and Oh My ZSH
  • Fonts
• Browser
  • Brave Browser
  • Extensions
  • React developer tools
• VSCode
  • Github SSH connection (!)
  • Extensions (!)
  • Theme
  • Fonts
• Node (!)
  • Node Version Manager (NVM)
  • Yarn
• API Client
  • Insomnia
  • Curl (!)
• Design Tools and Image Manipulation
  • Figma (!)
  • Gimp
  • Gthumb
• Extras
  • Password Manager - Keepassxc (!)
  • App launcher - Rofi (!)
  • Emoji tool - Rofi

I know, this is a fairly long list but you don't need to follow all the steps. I marked most crucial parts with an exclamation mark (!) on the end of the item.

Prerequisites

In order to follow this guide you will need a Ubuntu based system, like main Ubuntu release, Mint or etc. You won't need any deep Linux knowledge to follow, as I will guide you through all the process step by step. If you are coming from Windows or Mac, there are tons of tutorials and videos about installing Ubuntu on your machine out there, so I will skip this step.

Let's Start

First of all I will start by the most important tool while using your new system, the terminal.

1. Terminal

GUI applications are cool and easy to use, but terminal gives to power users much more flexibility and efficiency. That's why it is crucial to have a nice terminal setup for a better usability for developers. There are lot's of terminal emulators out there but my choice is Urxvt, known as rxvt-unicode.

1.1. Install Urxvt

In order to install new applications in Ubuntu, you can use default terminal application, gnome-terminal.

Press ctrl + alt + T to open your gnome terminal.

Let's install our new terminal application with this command.

sudo apt install rxvt-unicode

You can launch your new terminal by typing urxvt. It will look ugly first but it is highly configurable and it will look like this in the end.

Theming your urxvt is possible by modifying .Xresources file in your home folder. For example you can change the font family of your terminal by adding this line into your .Xresources file.

I will explain how to add new fonts to your system down below.

urxvt*font: xft:Source Code Pro Black:style=Regular:size=14

You can find all of my configuration files here including .Xresources file.

I use a tool called 'stow' to manage my dotfiles. I will be sharing a seperate blog post on 'stow' later but for now you can just manually place the dotfiles to their required locations.

1.2. Install Git and Curl

Git is a must and you know this.

sudo apt install git

Curl is a terminal based data transfer tool. It is used for many purposes especially for fetching packages and making API calls. You will most likely need this tool.

sudo apt install curl

1.3. Setup ZSH and Oh My ZSH

ZSH is a powerfull shell used in Unix systems. It enriches the terminal experience with lots of plugins, themes etc. It is similar to fish shell but I like ZSH more because of the large community behind it.

sudo apt install zsh

After installing the zsh itself, we need to change our default shell as zsh with this command:

chsh -s $(which zsh)

Now logout and login to use your newly installed shell. After opening your terminal, zsh will ask you for your configuration settings. You can skip it by hitting q, we will use our custom .zshrc file. Now you can check the shell version with $SHELL --version.

Who doesn't want superpowers? Your terminal wants too. Oh-My-Zsh will put your zsh setup to the next level. Just run this command, and you are done! 👇

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

And now the plugins...

zsh-autosuggestions

Your terminal will suggest you your latest commands after installing this plugin. We will add it in our configuration later, in .zshrc. Just install it for now.

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

zsh-syntax-highlighting

This plugin will provide syntax highlightinh on the zsh shell.

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

Okey, now we need to put our .zshrc to the home folder. You can copy mine to this location: 👉 /home/<your-username>/.zshrc. Don't forget to put your username instead of mine(anomy) in the file.

Now you must see the changes after closing and re-opening the terminal. If you face any problem, you can hit me on twitter and I will try to help you.

1.4. Fonts

On Ubuntu you can store your favourite fonts on this location: 👉 /home/<your-username>/.fonts

I use Source Code Pro as my terminal and VSCode font. You can get the same font files from my .dotfiles or from Google Fonts. After downloading the files, don't forget to put them in .fonts folder in the home.

2. Browser

We, web developers, need to handle cross-browser compatibility issues, so we need to test our application in all major browsers. But it is a fact that, we all have a favorite browser. Mine is Brave Browser.

Check this out 👇

If you're convinced too, let's install it!

2.1. Install Brave Browser

We will follow the official installation page on the website of the Brave browser. Just run these commands one after the other.

sudo apt install apt-transport-https curl

sudo curl -fsSLo /usr/share/keyrings/brave-browser-archive-keyring.gpg https://brave-browser-apt-release.s3.brave.com/brave-browser-archive-keyring.gpg

echo "deb [signed-by=/usr/share/keyrings/brave-browser-archive-keyring.gpg arch=amd64] https://brave-browser-apt-release.s3.brave.com/ stable main"|sudo tee /etc/apt/sources.list.d/brave-browser-release.list

sudo apt update

sudo apt install brave-browser

2.2. Configure Brave Browser

Brave Browser has some default settings to prevent cookies and third party scripts. It might cause some CORS issues. You can change these settings on settings > shields > cookies.

2.3. Install Extensions

Brave Browser uses chromium engine so you can install Chrome extensions easily on it. Let's install some major extensions to boost up our productivity while creating React applications.

• React Developer Tools
• Redux Dev Tools
• ColorZilla

3. VSCode

VSCode is an open source text editor developed and maintained by Microsoft, which is very popular among web developers. Its highly customisable structure is one of the reasons behind its popularity. So today we will install VSCode and some extensions for react development. After that we will make our text-editor beautiful with gruvbox theme and icons. Let's get going!

3.1. Install VSCode on Ubuntu

There are a few community based versions of VSCode but we will stick to the official version. In order to install it, we will follow official guide. Just click here to download VSCode. After that open your terminal in the location of downloaded file and simply install it by running this command: 👇

sudo apt install ./<downloaded-file-name>.deb

After the installation process, you can run the application by typing code in your terminal.

3.2. Install Most Popular React Extensions on VSCode

I use these extensions to extend my productivity and save some time and effort.

In order to install an extension in VSCode, you can hit ctrl + p and then paste the extension installer snippet (I will list them down below) and finally hit enter.

• VS Code ES7 React/Redux/React-Native/JS snippets

Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax

ext install dsznajder.es7-react-js-snippets

• React Hooks Snippets

Code snippets for React Hooks, easily call useState, useEffect and many more!

ext install AlDuncanson.react-hooks-snippet

• Prettier Formatter for Visual Studio Code

Code formatter using prettier.

ext install esbenp.prettier-vscode

• GraphQL for VSCode

GraphQL syntax highlighting, linting, auto-complete, and more!

ext install kumar-harsh.graphql-for-vscode

3.3. Give a nice look to your VSCode with Gruvbox Theme and Icons

We all want to have a nice looking setup but at the same time easy on the eyes. From that perspective, I find Gruvbox as a perfect choice.

There are lots of gruvbox themes in the VSCode Marketplace but I prefer this one from the author jdinhlife. Let's install it with this command after hitting ctrl + p.

ext install jdinhlife.gruvbox

After installing the theme, it will be available in the theme menu. You can reach to the menu by hitting ctrl + k than ctrl + t.

For the icon set, I use Gruvbox Material Icon Theme from Jonathon Hardy.

ext install JonathanHarty.gruvbox-material-icon-theme

3.4. Change the fonts on VSCode

Changing the font on VSCode is an easy task. It includes two steps to follow:

1. Install the fonts to your system
2. Change font settings on your VSCode settings.json file

3.4.1 Install your desired font to your Ubuntu system

There are tons of places to find awesome fonts but today we will install Source Code Pro font from Google Fonts. You can download this font by executing this command:👇

curl https://fonts.google.com/download\?family\=Source%20Code%20Pro --output font.zip

Notice that we used curl utility to fetch remote data from command line and we specified the output file with --output flag.

After downloading font file we need to put it in the correct place in our system. Make sure you have .fonts folder in your home directory. This zip file will include all variants of the font family. After extracting the downloaded zip file into .fonts folder, it will be available throughout your system. Sometimes it may require you to re-login.

Remember that folders and files starting with dot (.) are hidden in Linux. In order to list all hidden files use ls -la command.

3.4.2 Change font settings in settings.json file

You can find your VSCode settings in settings.json file. In order to open that file

• open command panel by hitting ctrl + shift + p
• type 'open settings'
• choose preferences: Open Settings (JSON)

You can specifiy your preferred font for editor and integrated terminal with these lines: 👇

"editor.fontFamily": "'Source Code Pro Semibold','monospace'",
"terminal.integrated.fontFamily": "Source Code Pro Semibold"

4. Node

Node.js and npm are two fundamental tools for Javascript developers. You will need them in allmost all your projects.

4.1. Node Version Manager (NVM)

Sometimes you may need different versions of node and npm because of the different requirements of your project. It is a better idea to manage your node and npm versions with a utility rather than doing it manually. So I explained how to manage multiple node versions in Ubuntu with nvm in this article. Please refer to that article for this section of the guide.

4.2. Yarn

I don't want to bore you with this huge discussion: yarn or npm, which one is better? I like yarn more because of its shorter syntax. Install it globally with this one-liner:👇

npm install --global yarn

Check the installation with yarn --version.

5. API Client

Working with APIs is a huge part of React development. Most of the time we use console.log to test our API but there are tools for testing APIs. I use Insomnia mainly but sometimes Curl is also a nice handy terminal tool to hit APIs. Let's install them on our system.

5.1. Install Insomnia on Ubuntu 20.04

You can download Insomnia from this address. It will download a .deb file which can be installed by running this command after changing directory to the download folder:👇

cd ~/Downloads
sudo dpkg -i <name-of-the-file.deb>

5.2. Install Curl on Ubuntu 20.04

We have installed Curl on previous steps but if you have skipped, you can install it with this command:👇

sudo apt install curl

6. Basic Design Tools for React Developer on Ubuntu

Having a consistent design throughout your application or website is crucial. There is a big discussion on this topic, whether a frontend developer should know designing concepts or not, but I will skip that never-ending discussion and jump into the tools that many developers use on daily basis.

6.1. Installing Figma on Ubuntu

Figma is a widely used designing tool for web design. It is relatively easy to learn and setup. Let's install it via snap.

Snap is pre-installed on Ubuntu 20.04 but if it is not installed on your system, you can check the setup process on snap store.

sudo snap install figma-linux

6.2. GNU Image Manipulation Program (GIMP) - Open Source Photoshop Replacement

Adobe products are not available on Linux so you cannot use Adobe Photoshop on Ubuntu. But don't worry, there is a great open source alternative in Linux: Gimp. It has a steep learning curve but you can do anything with it that you do with Photoshop.

sudo apt install gimp

6.3. Gthumb - Small Image Viewing and Editing Tool

You can view your images and make small adjustment like cropping, adding filters, rotating etc. with Gthumb.

sudo apt install gthumb

7. Extras

In this section I will share some of my tools that I use often in my Ubuntu setup to boost up my productivity and make it more enjoyable.

7.1. Keepassxc - Password Manager

These days remembering all your passwords is becoming impossible if you don't use the same password in every website you visit, which is definetely a very bad idea.

There are different tools to manage your all passwords. Some of them store your password in an online database like LastPass. It is a kind of risky choice to rely on a company for saving all of your passwords. That's why I prefer Keepassxc, which stores your passwords in a encrypted database file on your local machine. You can save it somewhere safe and that's it. In order to share it with your other devices, you can use services like Dropbox or NextCloud.

You can install it with this command: 👇

sudo apt install keepassxc

7.2. Rofi - Application Launcher and more

Rofi is like a Swiss Knife, you can do lots of things with it but its main purpose is window switching and application launching. I personally use it to launch my applications and for copying emojis to clipboard.

You can install it with this command: 👇

sudo apt install rofi

After installing it, you can launch it with your terminal like this: rofi -show drun

It is not a good idea to open it via terminal. You can set a keybinding to this command and easily launch your applications.

7.3. Rofimoji - Rofi Emoji Selector

As I mentioned above, you can use rofi for many use cases, for example as an emoji selector. We will install a utility called rofimoji to get this functionality.

It can be installed via pip, so we need to install pip and other dependencies first.

sudo apt install python3-pip fonts-emojione python3 rofi xdotool xsel

Than the package itself:

sudo pip install rofimoji

Now it must be ready. You can launch rofimoji with -a copy flag. It will allow you to copy selected emoji and close the rofi.

rofimoji -a copy

You can simply add a keybinding to this command and launch your emoji selector easily.

Conclusion

Congradulations! 🎉🎉

You have managed to set your Ubuntu system for React development.

I hope you enjoyed the guide and learned lots of new valuable information.

If you have any questions about any step feel free to reach me via email or twitter. If you liked this guide, please consider following me on twitter and github. It means a lot for me!

Thanks for your time ⌛ and feedback 💭 in advance!

Have a wonderful day! 🥳