Setting up Ubuntu for web development
Explore the tools you need to setup Ubuntu for web development
September 04, 2020
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 about setting up Ubuntu for 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 you should check out the Ubuntu docs.
Before you get too deep into setting up your Ubuntu development environment, the first thing you should 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:
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.
And the response:
Distributor ID: Ubuntu Description: Ubuntu 20.04.1 LTS Release: 20.04 Codename: focal
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.
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.
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
superkey and search for Startup Applications or press
- Click Add - You can enter commands that will be executed at login. You can also click
Browseand search the
usr/binfolder 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.
Ubuntu uses GNOME-Shell by default, but to download 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 favourite 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.
There are a ton of great tools out there to accommodate many different workflows. Here’s a short list of some of my favourite command-line tools.
- Tilix - Tilix is a terminal emulator with a ton of features.
A couple of my go to commands:
tilix -w=Set_Directorysets the working directory,
tilix -qopens 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’d recommend learning Bash before starting with a different shell.
Some of my most used commands:
- curl - Used for making server requests and to transfer data. Install via apt using
sudo apt install curl. This is a powerful tool that can do many things but one command I use frequently is
curl -L https://example-site.com/items -o example_file.tarto download specific files.
- tree - Tool for recursively listing directories. You can install via apt using
sudo apt install tree. The command
tree -d -L 1will list directories on the first level only. The command
tree -hpf -L 2will 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
tldrfollowed 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.htmlwill convert the contents of the
test1.mdto a new file called
test1.html. This tools is widely used in publising 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 start
CTRL-Dto end recording.
It’s easy to get overwhelmed with the amount of productivity tools floating 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 Libre Office 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.
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
F12key 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
F12key and select
Lighthousefrom the developer tools header.
- 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 an upcoming post. 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 colours.
- 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.
- 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, everyones 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.
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.
by the updated operating system.