Linux front-end development environment: my experience.
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.
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
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
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.
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!