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
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.
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
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
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
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!
Top comments (4)
It may be because I used GNU/Linux for a long time, but I didn't find any real benefit when working on OSX in my daily routine.
Yes I love the machine: great hardware, great design, great ergonomics, great display,... but software-wise I feel more productive on GNU/Linux (as a developer).
Well the only real benefit it's the ability to copy text from the terminal using Command+C, instead of CTRL+SHIFT+C (or the secondary clipboard)
Hi Joseph!
I've been using windows for front end development. Linux looks a lot handier actually, however when I started developing on Linux, I found out that the resolution is a lot higher, or in simple words whatever component I develop, is smaller than it would appear on Windows.
Well, mostly my clients use Windows and Mac, so I should be able to design and develop something that is proportionally OK on Windows.
Do you have any Idea of what I can do to safely develop on Linux?
Hi,
recently I tried to develop in Windows using WSL.
Here the steps:
1) Install a Linux distro with WSL
2) Follow step 2.1. of the article
3) Install VSCode or Webstorm in Windows (both support WSL)
With this method you can develop using a linux environment and Windows programs