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. 1 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.
-
Open Startup Applications - You can use the
super
key and search for Startup Applications or pressalt
+F2
and rungnome-session-properties
-
Click Add - You can enter commands that will be executed at login. You can also click
Browse
and search theusr/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 2 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
andcp
-
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 iscurl -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 commandtree -d -L 1
will list directories on the first level only. The commandtree -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 thetest1.md
to a new file calledtest1.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
andCTRL-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 selectLighthouse
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.
- 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. ↩
- Running GNOME extensions can cause performance issues so if you’re experiencing problems try disabling GNOME extensions. ↩
Top comments (0)