Setting up Ubuntu for web development

Ubuntu is an open source Linux distribution, that comes with regular releases as well as commercial support for desktops and servers. It’s a great choice for developers just getting started on Linux and seasoned Linux users alike. In this post I’ll be talking how I like to setup Ubuntu for basic web development.

Every developer will have slightly different requirements, workflows and preferences, this post is meant as a general guide to the setup and tools required for a development environment on Ubuntu. I won’t get into the details of installing each tool, as there are often more than one way to install them. If you’re just getting started with Ubuntu check out the Ubuntu docs.

Basic Setup

Before you get too deep into setting up your Ubuntu development environment, the first thing you might want to do is determine what version of Ubuntu is installed on your machine, and make sure you update to the newest version. ¹ The current version of Ubuntu LTS is 20.04 at the time of this writing.

Luckily you can easily check the version via the command-line.

Determine Ubuntu version

Here are a couple of commands that will display the current Ubuntu version. The first one uses the cat command:

cat /etc/os-release

The response should look something like this:

NAME="Ubuntu"
VERSION="20.04.1 LTS (Focal Fossa)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 20.04.1 LTS"
VERSION_ID="20.04"
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
VERSION_CODENAME=focal
UBUNTU_CODENAME=focal

And the second method uses the lsb_release command.

lsb_release -a

And the response:

Distributor ID: Ubuntu
Description: Ubuntu 20.04.1 LTS
Release: 20.04
Codename: focal

Updating Ubuntu

I’m not going to cover the steps to upgrading Ubuntu in this article, because the steps can be different depending on your system and I’d like to focus on setting up the system for development.However, if you need to upgrade check out the detailed Ubuntu docs here that cover upgrading.

Data backups

One of the first things I like to do when setting up a new system for development is to decide on a backup plan for my data. This deserves its own in-depth post but I wanted to at least touch on the subject as I feel it’s an important and often overlooked step to setting up a development environment. I’ll just briefly mention a couple of strategies and options. Make sure to check out this Ubuntu article for more information on backups.

• Manual Backups - This could be as simple as plugging in an external drive and making regular backups at user defined intervals.
• Local Automated - This would be backups that use a drive that is physically attached to your machine at automated intervals.
• Remote Automated - Automated backups that are done over a network.

Here are a couple of popular tools for backups:

• Déjà Dup - This is the default Ubuntu app for backups. It is a GUI for the Duplicity CLI
• borgbackup - encrypted, authenticated backups.

Whatever tool you decide to use it should be easy for you to use so that you create backups of your data. Data loss is only preventable if you have a backup plan.

Startup applications

Once you’ve got an updated version of Ubuntu on your machine, then next thing I like to do is configure the startup applications. You might prefer to skip this step and launch the applications manually each session but if you’re using the same applications all the time this can save you time.

1. Open Startup Applications - You can use the super key and search for Startup Applications or press alt + F2 and run gnome-session-properties
2. Click Add - You can enter commands that will be executed at login. You can also click Browse and search the usr/bin folder for applications.

This is also a good time to setup your default applications. Use the super key and type Default Applications , click on the Default Applications tab and set your preferences.

GNOME extensions

Ubuntu uses GNOME-Shell by default, but if you're interested in adding some more GNOME extensions ² you’ll need to install the GNOME browser integration extension as well as the GNOME browser connector which you can install by running this command sudo apt install chrome-gnome-shell. Once that’s done you can install extensions from https://extensions.gnome.org/.

• GNOME Tweaks - This is a GUI for advanced GNOME 3 settings, it’s a great way to manage the GNOME settings in Ubuntu but not required for using GNOME extensions.

Here are a few of my favorite GNOME extensions:

• Auto Move Windows - This extension automatically moves applications to specific workspaces when they create windows.
• Caffeine - Disables screensaver and auto suspend.
• Clipboard Indicator - Caches clipboard history in a top panel. This is a great tool for developers but if you’re privacy oriented it can cache sensitive data.

Command-line

There are a ton of great tools out there to accommodate many different workflows. Here’s a short list of some of my favorite command-line tools.

• Tilix - Tilix is a terminal emulator with a ton of features.A couple of my go to commands: tilix -w=Set_Directory sets the working directory, tilix -q opens a new window in quake mode, set this as a custom shortcut for quick top of the screen terminal access.
• Bash - This is the default shell used when you launch a terminal in Ubuntu. I still use Bash as my main shell and I’d recommend learning Bash before starting with a different shell. Some of my most used commands: pwd, cd, grep, mkdir and cp
• curl - Used for making server requests and to transfer data. Install via apt using sudo apt install curl. This is a powerful tool that cando many things but one command I use frequently is curl -L https://example-site.com/items -o example_file.tar to download specific files.
• tree - Tool for recursively listing directories. You can install via apt using sudo apt install tree. The command tree -d -L 1 will list directories on the first level only. The command tree -hpf -L 2 will list all items two levels down including the permissions and sizes in a human readable form.
• tldr - This is a good alternative to the often cryptic man pages. Simply use tldr followed by the command you need information on.
• Pandoc - Tool for converting markdown files from one format to another. A command like pandoc test1.md -s -o test1.html willconvert the contents of the test1.md to a new file called test1.html. This tools is widely used in publishing workflows, if you write a blog it might come in handy!
• asciinema - This is a free and open source tool for recording terminal sessions. Great for recording terminal tutorials, completely text based. To startrecording enter asciinema rec and CTRL-D to end recording.

Productivity tools

It’s easy to get overwhelmed with the amount of productivity tools floating around out there. Everyone will have different preferences and requirements but I like to keep things relatively simple.

• Standard Notes - This is an open-source and encrypted notes app. There are a ton of great extensions and themes and editors included. I like the Markdown Pro editor. I also like the unlimited undos.
• Stretchly - Break time reminder app. It’s too easy to get caught up in a project without taking a break 💤
• Libreoffice - Depending on your workflow you might only use Google Docs, however Libreoffice is a great alternative for desktop users on Ubuntu.
• Discord - Connect with your team using Discord.
• Signal - Encrypted messaging with a Linux desktop version.
• draw.io - This is the desktop version of draw.io, I use this all the time for anything from database modeling to tutorial diagrams.
• Thunderbird - Email/News/RSS client, comes with Ubuntu.
• Bitwarden - This is an open source password manager. One of the features I like is the ability to check databases of known exposed passwords and see if any of yours have been exposed. It also has a great built in password generator.

Browsers

There are a number of great browsers available in Ubuntu but if you’re in web development chances are you’ll need Chrome and Firefox.

• Firefox - Currently my browser of choice. For non-development browsing I use these plugins. To access the developer tools press the F12 key while the browser is selected.
• Google Chrome - This is my secondary browser. I take advantage of Lighthouse with on Chrome.To use Lighthouse press the F12 key and select Lighthouse from the developer tools header.

Text editor

• VS Code - Currently my preferred text editor for web development. VS code is very popular among developers particularly because of the number of helpful extensions and the extent to which you can customize it.

VS Code Extensions

I’ll be going talking about VS Code extensions and settings in other posts because they're awesome! In the meantime here are a few of the extensions I use:

• Auto Close Tag - automatically closes HTML/XML tags.
• Auto Rename Tag - automatically renames closing tags.
• IntelliSense for CSS class names in HTML - CSS classname completion for CSS definitions in your workspace.
• NPM Intellisense - Autocompletes npm modules in import statements.
• Path IntelliSense - Extension that autocompletes filenames.
• ESLint - Integrates ESLint into VS Code.
• Bracket Pair Colorizer - This extension allows matching brackets to be identified with colors.
• vscode-styled-components - Syntax highlighting and IntelliSense for styled-components.
• MDX - MDX langauge support for VS Code.
• Material Icon Theme - Material Icons inside of VS Code
• Monokai++ - This is my current theme in VS Code.

Development environment & tools

The development tools you install are based on your individual requirements. Make sure to check out the Ubuntu developer docs for more tools to fit your requirements.The following tools are a few of the basic ones I use regularly.

• Git - Version control system. Take a look at Git For Humans guide by Lucio Martinez.
• Node - Javascript runtime built on Chromes V8 engine. Available from the Snap Store here. Node.js comes with NPM.
• Heroku CLI - If you’re deploying apps on Heroku the CLI can simplifies the process.
• MongoDB - Document based database.
• doctl - CLI for interacting with the DigitalOcean API.
• MicroK8s - Lightweight Kubernates for Linux.
• Insomnia - This is my preferred HTTP client for testing APIs, no signup required 😊.
• Postman - Another option for API development. Requires you to signup.

Media - Graphics & Audio

Again, every ones needs are different here. Ubuntu is capable of processing graphics and audio quite well these days. Here are a couple of apps I use regularly.

• MediaInfo - Displays technical data of video and audio files.
• VLC Media Player - I’ve been using VLC for years, free and open source.
• GIMP - A free and open source alternative to Photoshop, a bit of a learning curve if you’re just starting out with the program.
• OBS - If you stream, record tutorials than you’re probably familiar with OBS.
• Rhythmbox - This is the default music player for Ubuntu. I like owning all my own music so this suits my needs.

Wrap up

All in all, Ubuntu is a great choice for web developers. It is one of the most popular open source OS for development as well as deployment. It has a ton of powerful tools that can improve your workflow, only some of which I covered in this article. With new features like out of the box support for nVIDIA hardware, Ubuntu is definitely an OS worth trying out.

There are plenty of other great Linux distributions available and I encourage you to check them out as well.

1. Before you proceed with any operating system update it’s a good idea to make sure that any hardware or software applications that you require will be supported by the updated operating system. ↩
2. Running GNOME extensions can cause performance issues so if you’re experiencing problems try disabling GNOME extensions. ↩