Linux front-end development environment: my experience.
Tags: linux, frontend
Published: 2021-01-17 15:45:34

When I started programming I had no idea of the difference between front-end and back-end development. I had a basic knowledge of java and php and I had experience in a Windows environment. For some reasons I urgently needed a laptop and installed ubuntu 13.04 on an old netbook. Since then I have never left Linux, even using it on my Dell Precision 5520.

*__In this article I will describe a pratical setup to start front-end development in Linux. I will not describe all Linux programs or commands we can use.__*

##**1. Distro**

Linux has many distros and each of them has different characteristics. They can be divided into 3 families:
* Debian based: Debian, Ubuntu, Linux Mint, etc
* RedHat based: Fedora and CentOS
* Arch based: Arch, Manjaro, etchttps://inkscape.org/
shell
I personally chose **Ubuntu** because it doesn’t waste my time setting it up. After all, my goal is to have a system that makes me do my job well.
You can download Ubuntu from [here](https://www.ubuntu-it.org/download)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mrsm93cnrg2kgq4p01ww.png)

##**2. Setup the environment**

On Debian-based distributions, packages can be downloaded via the **APT package manager.**
Let’s start with installing everything we need to get started!
shell
###**2.1. Node.js**
As a Freelance I often need to have multiple versions of **Node.js** on my PC.
To achieve that, I use **NVM** (Node Version Manager).
It allows me to easily install, remove and change the node version.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h4ukgp3fm6k3i3vjllyt.jpeg)

To install nvm we can open a terminal and execute:
```shell
$ wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
```
Here is a list of commands made available by nvm:

```shell
nvm install 10.10.0 # install a node version (eg. 10.10.0)
nvm ls # list installed node versions
nvm use v10.10.0 #use the choosen version
```
For more information about NVM you can visit [this link](https://github.com/nvm-sh/nvm)

### 2.2. **Editor/IDE**

Linux has powerful code editors such as **VIM** or **Emacs** that can be used in front-end development.
However, from experience, I prefer to focus on my work and not on the configuration of the tools I use.
For this reason I use Visual Studio Code or Webstorm which immediately give me a ready to use environment.

```shell 
$ sudo snap install code --classic # install Visual Studio Code
$ sudo snap install webstorm --classic # install WebStorm
```

### **2.3 (Bonus) Docker**
As a freelancer I found the use of docker essential. For all information on installing on Ubuntu you can visit [this page](https://docs.docker.com/engine/install/ubuntu/).

## **3. Design tools**

In my work I often deal with many designers who often use different software to design sites or apps.

Unfortunately, the major software houses do not support Linux but there are many solutions to this problem.

### **3.1. Alternative Programs**

For small personal projects it may be useful to use alternative programs. Below I will mention the ones that make sense to me to be mentioned.

* [**GLIMPSE**](https://glimpse-editor.github.io/): Open Source Alternative to Adobe Photoshop
* [**Inkscape**](https://inkscape.org/): Open Source alternative to Adobe Illustrator
* [**Gravit Designer**](https://www.designer.io/): Alternative to Sketch or Adobe XD

### **3.2. Web App**
Another solution to the problem is using a Web App such as:
* [**Figma**](https://www.figma.com/)
* [**inVision**](https://www.invisionapp.com/)
* [**Zeplin**](https://zeplin.io/)

### **3.3. (Bonus) Virtual Machine**
If you need to use Adobe apps, Sketch or other standalone software, you could consider using a virtual machine. For my environment I choose [VMWare](https://www.vmware.com/it/products/workstation-player.html).

## **Conclusion**
Front-end development in Linux is a very good experience. Many people think that for this type of work they need an Apple PC. And, surely, that’s true if you have to use creative programs as a pro.
But for development, everything in Linux is much faster and more controllable. So, don’t fear to start your developer experience in Linux and save money for a Front-end course!