DEV Community

loading...
Cover image for Linux front-end development environment: my experience.

Linux front-end development environment: my experience.

josephciullo profile image Joseph C. ・3 min read

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

Alt Text

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

To install nvm we can open a terminal and execute:

$ wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
Enter fullscreen mode Exit fullscreen mode

Here is a list of commands made available by nvm:

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

For more information about NVM you can visit this link

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.

$ sudo snap install code --classic # install Visual Studio Code
$ sudo snap install webstorm --classic # install WebStorm
Enter fullscreen mode Exit fullscreen mode

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.

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: Open Source Alternative to Adobe Photoshop
  • Inkscape: Open Source alternative to Adobe Illustrator
  • Gravit Designer: Alternative to Sketch or Adobe XD

3.2. Web App

Another solution to the problem is using a Web App such as:

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.

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!

Discussion (0)

pic
Editor guide