Setting up a Web Develop Environment in Debian

Written by israel-laguan | Published 2020/02/19
Tech Story Tags: rest-api | nodejs | linux | web-development | software-development | junior-developer | ide | microverse

TLDR Setting up a Web Develop Environment in Linux is easy to set up for the first time. Most of the commands are similar in derivative distros as Ubuntu, Elementary, Mint or LinuxMX. VSCode, Git, nodejs, GIMP, VLC, Slack, teamViewer and dev fonts are all tools for web developers. The easiest way to install it is using the precompiled package from Microsoft here (press the button that saysdeb Debian, Ubuntu). You must enter your password on the terminal. When all is finished you can open vcsode from your terminal.via the TL;DR App

I am on Microverse working with a lot of people new to Software Development with Linux (I use this word to refer to Linux OS and all his derivatives or distros), and in web development we use certain tools and pipelines that are more difficult to set up in Windows. So I found that most of the people new to Linux struggle to set up the tooling and basic commands for the first time.
This article tries to provide my dev environment as an example (I am not affiliated or related to any site or tool mentioned or linked here). I am using Debian 9, but most of the commands are similar in derivative distros as Ubuntu, Elementary, Mint or LinuxMX, e.g. all the ones that use `
apt
` or packages `
.deb
`. I'll assume the one reading this article will just copy-paste the commands.
To me a great develop environment needs:
  • An IDE or good text editor
  • version control system
  • the programming languages for you to develop
  • some useful tools and utilities
I will concentrate myself in web development, so I'll go installing the following stack:
  • vscode: text editor, along some extensions for web development
  • git: version control standar, and some
    git
    functions, aliases and tricks
  • nodejs: JavaScript runtime
  • some useful tools for web developers (screenshots, GIMP, VLC, Slack, teamViewer and dev fonts)
If you found some commands to be outdated or wrong for you, please comment the command that worked for you, along with your specs. I must note this is my actual machine, kernel and specs:

Prerequisites

Please be sure you have
sudo
access running
sudo whoami
Must return
root
, if not visit this link. From now on, when you type
sudo
you must enter your password on the terminal.
Check if system is updated:
sudo apt update
sudo apt upgrade -y
When you are ready, install these packages for develop in Linux:
sudo apt install make curl build-essential openssl libssl-dev unzip

A nice editor: Visual Studio Code

The easiest way to install it is using the precompiled package from Microsoft here (press the button that says .deb Debian, Ubuntu). You'll get in your
~/Download
folder (or the place the browser put the file) a
.deb
package. But double click it won't do any help, you must install it using your terminal. Go ahead and open a terminal, then type (don't forget to changes the "x" in the command to the numbers in your file) :
sudo apt install ./code_x.xx.x-xx_amd64.deb
Also you can use tab for auto completion, learn here.

apt
will auto magically set up everything and when all is finished you can open vcsode from your terminal (typing
code
), menu or launcher.

Extensions for VSCode

VSCode have a lot of extension on their Marketplace, but filtering only web development extensions we found a great selection. The following are my favorites:
How to install them? One way is searching those on the marketplace and copy the command for install, for example:
Then inside of VSCode press
Ctl+P
or in the menu go to View then Command Pallete and you'll get:
Paste and
Enter
and the extension would be installed. More info here.

A standard version control system: git

Luckily for us, git is super easy to install:
sudo apt install git
git --version
You must be greeted with your git's version.
But we have to make an extra setup: identify yourself. For this you need to create an account. Provide your name and email address, Git embeds this information into each commit we do, like this:
    git config --global user.name "Your Name"
    git config --global user.email "[email protected]"
Remember to put your name (or nickname) and your email. Now you should have Git installed and ready to use on your system.

git
functions, aliases and tricks

As git is so important in modern development, its great to know that we have several utilities and helper for manage git. And most of them are available for Debian.
One way is to use `
git
` terminal commands, like `
git config
`. Talking about config you can use `
git config -l
`to get info about certain repository, like the GitHub/GitLab repository or the branches you had worked on.
As you can notice on the last screenshot I use some aliases or helper functions. In the aliases dept I like to use short versions of normal commands. For example instead of `
git checkout`
i can use only `
git check
` or even `
git ch
`, is up to you. You can find here a good guide about what aliases are people recommending and how to set up.
Did you commited something that was not supposed to commit (like secret keys!) or messed up working code? I found helping this guide where you found a comprehensive guide for fixing bad commits/push/merges.
Do you want to learn the gory details? This free official book is your friend!

Developing for JavaScript: install NodeJS

I found difficult to install
node
in Windows in comparison to install it on Linux, and this was one of the main reason I fully embraced Ubuntu and later Debian as my main OS. If you want to program for the web you will need NodeJS sooner or later.
To install the current LTS version (other versions here) you must use your terminal:
curl -sL https://deb.nodesource.com/setup_12.x | sudo bash -
sudo apt install -y nodejs
From here you can use all the packages and helpers from node and npm. Here is a quick guide for getting started.
Now you can use VSCode for making scripts and code to run over NodeJS, save it in a repository using Git and share it to the world. Go out there and find some great resources to learn!

Some useful tools for web developers in Debian

Screenshots: all Debian variants have support for using Print key, but if you want something more let me recommend you OBS.
For manipulate (raster) images you have The GIMP, but if you prefer something easy but powerful try Pinta.
If you want to be in touch with your team you can install Slack or Teamviewer, but of them using your terminal.
I recommend Jetbrains Mono for your terminal or VSCode, another good choice is Fira Code.
Do you have more useful tools for web developers on Debian? Any comment or suggestion? Feel free to comment and share! Lets use Debian at full capacity!

Written by israel-laguan | I love to work from home, and work at night.
Published by HackerNoon on 2020/02/19