Pop!_OS 20.04 Setup for Web Developers

This repository contains instructions to set up Pop!_OS for developing software in Go, Rust, C# (.NET Core), Java, Python, and NodeJS, as well as web front-ends in React. The steps below should also work for Ubuntu and most Ubuntu-based Linux distributions.

Update the OS and install common tools

The first thing you should do is get the latest security updates:

sudo apt update && sudo apt dist-upgrade -y

Next, install common development tools:

sudo apt install \
openjdk-8-jdk-headless \
openjdk-11-jdk-headless \
maven \
build-essential \
apt-transport-https \
ca-certificates \
curl \
software-properties-common \
apache2-utils \
make \
chromium-browser \
gnome-tweak-tool \
gnome-shell-extensions \
python3-pip \
dconf-editor \
libgconf-2-4

Cleanup:

sudo apt autoremove -y
sudo apt autoclean -y

Check for firmware updates:

sudo fwupdmgr get-devices
sudo fwupdmgr get-updates
sudo fwupdmgr update

Reboot before proceeding any further:

sudo reboot now

Improve Font Rendering

The default font rendering in Pop!_OS may appear blurry on LCD monitors. Gnome's OS settings application lacks the ability to change font rendering. You must install the Gnome Tweak Tool to adjust these settings. Gnome Tweak Tool can be installed from the Pop!_Shop or from a terminal as shown below:

1. Run sudo apt install gnome-tweak-tool
2. Run gnome-tweaks
3. Fonts > Hinting > Set to "Full"
4. Fonts > Antialiasing > Set to "Subpixel (for LCD screens)"

Install Microsoft fonts

If you need to work with documents that are built using Microsoft fonts:

sudo apt install -y mscorefonts-installer
sudo fc-cache -f -v

Increase the inotify watch count

When working with Dropbox, React, and NodeJS, you may run into the following error: "User limit of inotify watches reached". The default limit for file watchers is 8,192. Increase this limit to something more reasonable:

1. Run sudo gedit /etc/sysctl.conf
2. Add fs.inotify.max_user_watches=10000000 to the bottom of the file
3. Run sudo sysctl -p (or restart the OS)

Tilix

Tilix may be preferable to the default Gnome terminal:

sudo apt install tilix

Z Shell (ZSH)

ZSH can be installed by running:

sudo apt install zsh

Run zsh --version and look for zsh 5.8 (x86_64-ubuntu-linux-gnu) (or newer) to verify success

Optional: Install Oh-My-ZSH for ZSH configuration management

Oh-My-ZSH is an excellent tool for managing your ZSH configuration. Install it using the following command:

sh -c "$(wget https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/
install.sh -O -)"

An "Oh My Zsh!... is now installed" message should appear in the terminal output. You may be prompted to set ZSH as your default shell.

Optional: Enable ZSH syntax highlighting

Install syntax highlighting for ZSH by running:

sudo apt install zsh-syntax-highlighting

Now run:

echo "source /usr/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh" >> ~/.zshrc

The changes will be applied to new terminal windows.

Optional: Change ZSH theme using Oh-My-ZSH

Oh-My-ZSH is installed with several themes. Let's change the default theme to blinks by first opening the .zshrc file:

sudo gedit ~/.zshrc

Find the line ZSH_THEME="robbyrussell" and change it to ZSH_THEME="blinks" and save. The new theme will be applied to new terminal windows.

Optional: Enable ZSH plugins

Plugins add functionality to ZSH. Let's enable some pre-installed plugins for a few programming languages. First, open the .zshrc file:

sudo gedit ~/.zshrc

Find the line plugins=(git) and change it to include your preferred plugins. An example:

plugins=(git dotnet rust rustup golang mvn npm terraform aws gradle)

Save the file. The plugins will be applied to new terminal windows.

Spring Tool Suite (STS) 4:

1. Visit https://spring.io/tools
2. Download the "STS4" Linux package to the "Downloads" folder
3. Run cd ~/Downloads
4. Run sudo tar -xvf spring-tool-suite-4-4.0.1.RELEASE-e4.9.0-linux.gtk.x86_64.tar.gz (replace the filename shown here with the one you downloaded, if newer)
5. Run sudo nano /usr/share/applications/STS.desktop
6. Type the following, replacing Exec= with the actual location of STS:

[Desktop Entry]
Name=Spring Tool Suite
Comment=Spring Tool Suite
Exec=/home/yourusername/Downloads/sts-4.0.1.RELEASE/SpringToolSuite4
Icon=/home/yourusername/Downloads/sts-4.0.1.RELEASE/icon.xpm
StartupNotify=true
Terminal=false
Type=Application
Keywords=Java,Eclipse,Spring,IDE,Development
Categories=Development;IDE;Java;

7. Press CTRL+X to exit Nano and save when prompted
8. Navigate to Activities on the main PopOS desktop and select Show Applications
9. Right-click on Spring Tool Suite and select Add to favorites
10. Open Spring Tool Suite
11. Window > Preferences > General > Set the theme to "Dark"
12. Window > Preferences > Maven > Select "Download repository index updates on startup"
13. Select Apply and Close

Visual Studio Code:

1. From the desktop, select Activities (top-left corner of your monitor) > Pop!_Shop
2. Search for "Visual Studio Code" and install it
3. Launch Visual Studio Code
4. Disable Microsoft's telemetry by navigating to File > Preferences > Settings and typing "telemetry", then de-selecting "Enable Crash Reporter" and de-selecting "Enable Telemetry"
5. Optional: While still in Settings, change the Titlebar setting to "Custom" if not done so already
6. Optional: While still in Settings, change the following to "False":
   1. Enable Natural Language Search
   2. Enable Experiments
   3. Enable Windows Background Updates
7. Optional: While still in Settings, enable Editor: Format on Save. Turning this setting on is the same as running the Format Document command each time you save a file.
8. Optional: While Visual Studio Code is open, select Activities, right-click the Visual Studio Code icon on the dock, and select Add to favorites.

The following VS Code extensions are handy:

1. C# - syntax highlighting, debugging, test runner support, and intellisense for C#
2. C# XML documentation - auto-generates C# XML documentation
3. Rust (rls) - Rust language server
4. CodeLLDB - for debugging Rust code on Ubuntu
5. Java Extension Pack - syntax highlighting, debugging, and intellisense for Java, plus unit testing support
6. Spring Boot Extension Pack - specific enhancements for working with Spring Boot
7. VS Live Share - allows simultaneous editing of code files by multiple authors, like Google Docs
8. Docker
9. JavaScript Debugger for Chrome
10. Python
11. Go
12. ESLint
13. TSLint
14. Prettier
15. AWS Toolkit

There are some excellent dark theme alternatives to the VS Code default theme:

1. One Monokai Theme
2. Atom One Dark Theme
3. Material Theme
4. Blueberry Dark Theme
5. Arc+ Theme

Postman

Postman can be installed in one of three ways. The easiest is to open the Pop!_Shop and install Postman using the GUI.

Installing Postman from Pop!_Shop installs from Flathub.

Alternative: Install Postman from flathub using the terminal

You may alternatively install Postman from Flathub using a terminal session. However, in Pop!_OS 20.04, you must first add the Flathub remote repository. Both commands are shown below:

sudo flatpak remote-add --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo
sudo flatpak install flathub com.getpostman.Postman

Alternative: Install Postman from .tar.gz using the terminal

sudo apt install libgconf-2-4
cd ~/Downloads
wget https://dl.pstmn.io/download/latest/linux64 -O postman.tar.gz
sudo tar -xzf postman.tar.gz -C /opt
sudo ln -s /opt/Postman/Postman /usr/bin/postman

cat > ~/.local/share/applications/postman.desktop <<EOL
[Desktop Entry]
Encoding=UTF-8
Name=Postman
Exec=postman
Icon=/opt/Postman/app/resources/app/assets/icon.png
Terminal=false
Type=Application
Categories=Development;
EOL

Be sure to pin Postman by adding it to your favorites:

1. Navigate to Activities on the main Pop_OS! desktop and select Show Applications
2. Right-click on Postman and select Add to favorites

Java and Maven

sudo apt install openjdk-11-jdk-headless maven

Run javac -version and look for the following output to verify success:

openjdk version "11.0.10" 2021-01-19
OpenJDK Runtime Environment (build 11.0.10+9-Ubuntu-0ubuntu1.20.04)
OpenJDK 64-Bit Server VM (build 11.0.10+9-Ubuntu-0ubuntu1.20.04, mixed mode, sharing)

Go

sudo apt install golang-go

Run go version and look for go version go1.13.8 linux/amd64 (or newer) to verify success

Rust

curl https://sh.rustup.rs -sSf | sh

Restart your terminal session, run rustc --version, and look for rustc 1.46.0 (04488afe3 2020-08-24) (or newer) to verify success.

Alternatively, you may run sudo apt install cargo.

You will want to periodically update Rust to the latest version. Do so by running:

rustup update

Python

sudo apt install python3-minimal

Run python3 --version and look for Python 3.8.5 (or newer) to verify success

To install Anaconda Python instead, see https://linuxhint.com/install_anaconda_python_ubuntu_1804/.

NodeJS

The quick way to install NodeJS 14 (LTS):

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt install -y nodejs npm

Run node --version and look for v14.16.1 (or newer) to verify success.

Optional: Install NodeJS with a manual inspection of the shell script

If you wish to inspect the shell script before running it:

cd ~
curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh
nano nodesource_setup.sh

Run the following if you're satisfied with the script:

sudo bash nodesource_setup.sh
sudo apt install nodejs

Removing NodeJS

The way in which NodeJS is installed means a few extra steps are needed to remove it:

sudo apt-get remove nodejs
sudo apt-get remove npm
sudo rm /etc/apt/sources.list.d/nodesource.list
sudo apt-get update
which node
which nodejs
which npm

The three which commands should all display nothing, indicating Node's successful removal.

.NET Core

sudo apt install apt-transport-https ca-certificates
cd ~/Downloads
wget -q https://packages.microsoft.com/config/ubuntu/$(lsb_release -rs)/packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
sudo apt update && sudo apt install -y dotnet-sdk-3.1 dotnet-sdk-6.0
rm -f packages-microsoft-prod.deb

Run dotnet --list-sdks and look for the following output to verify success:

3.1.414 [/usr/share/dotnet/sdk]
6.0.100 [/usr/share/dotnet/sdk]

Optional: Disable .NET Core telemetry

1. Run gedit ~/.profile
2. Type export DOTNET_CLI_TELEMETRY_OPTOUT=true at the bottom of the file
3. Save and exit
4. Log out and log in again

You can also set DOTNET_SKIP_FIRST_TIME_EXPERIENCE to true when editing .profile to fix the following warning that may appear during .NET Core compiles: "Permission denied to modify the '/usr/share/dotnet/sdk/NuGetFallbackFolder' folder."

Optional: Installing .NET Core preview releases

Preview releases of .NET Core are unavailable from packages.microsoft.com and must be installed manually. The script below assumes you've downloaded a preview release with a filename of dotnet-sdk-3.0.100-preview8-013656-linux-x64.tar.gz.

mkdir -p $HOME/dotnet && tar zxf dotnet-sdk-3.0.100-preview8-013656-linux-x64.tar.gz -C $HOME/dotnet
export DOTNET_ROOT=$HOME/dotnet
export PATH=$PATH:$HOME/dotnet

If you've installed a stable .NET Core release from packages.microsoft.com, then you will need to use a different command to update PATH. Otherwise only the stable version of .NET Core will be found at the command line. To make sure the preview release is used when running dotnet, instead execute export PATH=$HOME/dotnet:$PATH.

Docker and Docker Compose

sudo apt install apt-transport-https ca-certificates curl software-properties-common
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
sudo apt-key fingerprint 0EBFCD88

# Running "sudo apt-key fingerprint 0EBFCD88" should display:

# pub   rsa4096 2017-02-22 [SCEA]
#       9DC8 5822 9FC7 DD38 854A  E2D8 8D81 803C 0EBF CD88
# uid           [ unknown] Docker Release (CE deb) <[email protected]>
# sub   rsa4096 2017-02-22 [S]

sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
sudo apt update
sudo apt install docker-ce
docker --version

# Running "docker --version" should display "Docker version 19.03.12, build 48a66213fe" or newer

sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
docker-compose --version

# Running "docker-compose --version" should display "docker-compose version 1.29.2, build 5becea4c"

sudo usermod -aG docker $USER

# Restart the machine

After restarting the machine, run docker run hello-world and look for a "Hello from Docker!" message.

Azure CLI tools

# Get packages needed for the install process:
sudo apt-get update
sudo apt-get install ca-certificates curl apt-transport-https lsb-release gnupg

# Download and install the Microsoft signing key:
curl -sL https://packages.microsoft.com/keys/microsoft.asc |
    gpg --dearmor |
    sudo tee /etc/apt/trusted.gpg.d/microsoft.gpg > /dev/null

# Add the Azure CLI software repository:
AZ_REPO=$(lsb_release -cs)
echo "deb [arch=amd64] https://packages.microsoft.com/repos/azure-cli/ $AZ_REPO main" |
    sudo tee /etc/apt/sources.list.d/azure-cli.list

# Update repository information and install the azure-cli package:
sudo apt-get update
sudo apt-get install azure-cli

Verify success by running az --version and checking that azure-cli 2.21.0 (or newer) appears somewhere in the output. Additionally, the output should indicate that Your CLI is up-to-date.

See Install Azure CLI with apt for further information.

Azure Storage Explorer

Azure's desktop app for interacting with Azure Storage is cross-platform. Installing it on an Ubuntu-based distribution can be done as follows:

sudo apt update && sudo apt install -y dotnet-sdk-2.1 build-essential libsecret-1-0 libgconf-2-4
wget https://download.microsoft.com/download/A/E/3/AE32C485-B62B-4437-92F7-8B6B2C48CB40/StorageExplorer-linux-x64.tar.gz -O ~/Downloads/StorageExplorer-linux-x64.tar.gz
cd ~/Downloads
mkdir -p ~/azure-storage-explorer
tar xvf StorageExplorer-linux-x64.tar.gz -C ~/azure-storage-explorer
cd ~/azure-storage-explorer
./StorageExplorer

Next, create an application icon, making sure that you replace yourusername with your actual user name:

cat > ~/.local/share/applications/azurestorageexplorer.desktop <<EOL
[Desktop Entry]
Encoding=UTF-8
Name=Azure Storage Explorer
Comment=Azure Storage Explorer
Exec=/home/yourusername/azure-storage-explorer/StorageExplorer
Icon=/home/yourusername/azure-storage-explorer/resources/app/out/app/icon.png
Terminal=false
Type=Application
Keywords=Azure,IDE,Development,Storage,Data
Categories=Development;IDE;
EOL

Azure Storage Explorer should now appear in your list of applications. If it doesn't appear after creating and saving the .desktop file, then you may need to log out and log in.

AWS CLI tools

The following script installs v2 of the AWS CLI tools:

sudo apt install -y unzip
curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
sudo ./aws/install

Run aws --version and check for aws-cli/2.1.34 Python/3.8.8 Linux/4.4.0-19041-Microsoft exe/x86_64.ubuntu.20 prompt/off to verify success.

See https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2-linux.html for additional information.

GitHub CLI tools

sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-key C99B11DEB97541F0
sudo apt-add-repository https://cli.github.com/packages
sudo apt update
sudo apt install gh

Git configuration

git config --global user.name "Your Name"
git config --global user.email [email protected]

See Customizing Git Configuration for more details. You can edit the global Git config file by running gedit ~/.gitconfig in a terminal window.

SSH Keys for GitHub/GitLab

1. Run ssh-keygen -o -t rsa -b 4096 -C "your comment goes here"
2. Enter a passphrase
3. Run cat ~/.ssh/id_rsa.pub
4. Copy the output from cat and paste it into GitLab and GitHub's SSH key sections for your profile
5. Run ssh -T [email protected] to verify the key is recognized and working with GitHub.com
6. Run ssh -T [email protected] to verify the key is recognized and working with GitLab

GPG Keys for signing commits

Taken from https://docs.gitlab.com/ee/user/project/repository/gpg_signed_commits/index.html.

1. Run gpg --full-gen-key
2. Choose "RSA and RSA (default)"
3. Choose 4096 bits
4. Choose 2y (or a timeframe of your choosing)
5. Provide the other required inputs
6. Run gpg --list-secret-keys --keyid-format LONG [email protected] (replace [email protected] with the email you used previously)
7. Copy the GPG key ID that starts with sec. E.g. in sec rsa4096/30F2B65B9246B6CA 2017-08-18 [SC], the key ID is 30F2B65B9246B6CA
8. Run gpg --armor --export 30F2B65B9246B6CA
9. Run git config --global user.signingkey 30F2B65B9246B6CA
10. Add the key to your GitHub account

To sign commits, the only difference is the addition of the -S flag:

git commit -S -m "My commit msg"

VLC for media playback

sudo apt install -y vlc
sudo apt install -y libavcodec-extra libdvd-pkg
sudo dpkg-reconfigure libdvd-pkg

Other Items in Pop!_Shop to consider installing:

1. Dropbox
2. Slack
3. Spotify
4. VirtualBox
5. Zoom
6. Microsoft Teams
7. VLC - for playing media files
8. Peek - for recording your screen and producing animated GIFs
9. GNU Image Manipulation Program
10. Htop
11. Bleachbit - for secure file erasure and general disk cleanup

VirtualBox

1. From the desktop, select Activities (top-left corner of your monitor) > Pop!_Shop
2. Search for "VirtualBox" and install it

To allow USB pass-through to a guest OS in VirtualBox:

1. Run sudo adduser $USER vboxusers
2. Log out and in again

Firefox

1. Install the React Developer Tools addon
2. Preferences > Search > Change the search engine to "DuckDuckGo" (or your preferred engine)
3. Preferences > Privacy > Change tracking and protection settings as-needed

Optional: Enable DNS over HTTPS

1. Navigate to Edit > Preferences
2. In the General tab, scroll down to Network Settings and press the Settings button
3. Select Enable DNS over HTTPS and select "Cloudflare" as the provider

Optional: Force GPU rendering to smooth out page scrolling

Firefox in Gnome can experience screen tearing and other performance-inhibiting behavior. This may be adjustable by forcing GPU rendering, though it may impact power usage and stability. This has only been tested using NVIDIA GPUs.

1. Navigate to about:config in the Firefox URL bar
2. Select Accept the Risk and Continue
3. Copy and paste layers.acceleration.force-enabled into the search box and Enable it
4. Copy and paste layers.force-active into the search box and Enable it
5. Restart Firefox and observe smoother scrolling behavior

Chromium

1. From the desktop, select Activities (top-left corner of your monitor) > Pop!_Shop
2. Search for "Chromium Browser" and install it
3. Navigate to https://chrome.google.com/webstore/category/extensions and search for "React Developer Tools"
4. Add the React Developer Tools to Chromium

Optional: Change Chromium's privacy settings

1. In Chromium, press the "..." button at the top-right corner of the Chromium window to bring up the options menu
2. Settings > Search Engine > Set to "Duck Duck Go" (or your preferred engine)
3. Settings > Advanced > Privacy & Security >
   1. Allow Chromium sign-in > Disable
   2. Use a prediction service to help complete searches and URLs typed in the address bar > Disable
   3. Use a web service to help resolve navigation errors > Disable
   4. Send a "Do Not Track" request with your browsing traffic > Enable
   5. Allow sites to check if you have payment methods saved > Disable
   6. Content Settings >
      1. Cookies > Block third-party cookies > Enable
      2. Location > Block
      3. Microphone > Block
      4. Camera > Block
      5. Flash > Set to "Block sites from running Flash"
      6. Clipboard > Set to "Do not allow sites to see text and images copied to the clipboard"
      7. Payment Handlers > Set to "Do not allow any site to install payment handlers"

FYI: How to configure VS Code for Chromium JavaScript debugging

Visual Studio Code can launch Google Chrome in JavaScript debug mode so developers can do useful things like set breakpoints and inspect JavaScript variables at runtime. However, Microsoft's official guidance on how to configure the Chrome Debugger only works with Chrome and not Chromium.

Google Chrome is a commercial, closed-source product. It's based on the open source Chromium project. If you'd like to use Chromium for JavaScript debugging instead of Chrome, you can still follow Microsoft's guide. You'll just need to add a runtimeExecutable property to the launch.json file in your web app's .vscode directory. Just make sure it points to where chromium-browser is installed. If you installed Chromium from the Pop!_Store then it should be located at /usr/bin/chromium-browser.

The launch.json file will automatically be created if you follow along with Microsoft's how-to guide.

The launch.json file needed to debug using Chromium is shown below:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "runtimeExecutable": "/usr/bin/chromium-browser"
    }
  ]
}

Installing and Enabling Themes

Some themes are available in the central repos. For instance, to install the excellent Arc theme, simply run sudo apt install arc-theme. "Arc-Dark" is then available as a theme in Gnome Tweak Tool.

More themes are available for download on pling.com. For these, extra steps are required to install:

1. Create folders for the themes and icons:

mkdir ~/.themes
mkdir ~/.icons

2. Download a Gnome theme from Pling to your Downloads folder. (We'll use the WhiteSur GTK theme)
3. Extract the contents of the .tar.xz to the .themes folder
4. Download a Gnome icon theme from Pling to your Downloads folder. (We'll use the Big Sur Icon Theme)
5. Extract the contents of the .tar.xz to the .icons folder
6. Open the Gnome Tweak Tool
7. Navigate to the Extensions tab
8. Enable User Themes
9. Navigate to the Apperance tab
10. Select "White Sur-Dark" under Themes > Applications
11. Close Gnome Tweak Tool

Installing Cairo Dock

The Cairo Dock adds a launcher and a taskbar to your desktop.

sudo apt install cairo-dock

Once installed, you will want to enable it as a startup application:

1. Open Gnome Tweak Tools
2. Navigate to Startup Applications
3. Press the + button to add a startup application
4. Select Cairo Dock

The Cairo Dock can be themed. Let's install the McOs BS theme to see how we can make Gnome look more like macOS Big Sur.

1. Visit https://www.pling.com/p/1401527/.
2. Under Files, download the mcOS-BS-Dark.tar.gz file and save it to your Downloads folder.
3. Open Cairo Dock (if not already open)
4. Right-click on the Applications icon. A context menu appears.
5. Select Cairo Dock > Configure. The Cairo Dock configuration window appears.
6. Navigate to the Themes tab
7. Select the Import button at the bottom-right corner of the window. A file dialog appears.
8. Select the "mcOS-BS-Dark.tar.gz" file in your Downloads folder and press the window's OK button.

Installing Fonts

Install the Font Manager application:

sudo apt install font-manager

Let's install Red Hat's free Overpass font. It can be downloaded or cloned: https://github.com/RedHatOfficial/Overpass.

Open Font Manager and press the + button to add a new font. Navigate to the extracted ZIP file (or cloned git repo) and import either the OTF or TTF files, whichever you prefer.

Open Gnome Tweak Tool and open the Fonts tab. Select "Overpass" from the Interface Text drop-down list. The changes should be visible immediately.

Some custom fonts, including "Overpass", may look better with Hinting set to "None".