Fedora Silverblue for Webdevelopment

Fedora is a free and open-source Linux distribution developed by the Fedora Project. This distribution only includes FOSS (Free and Open-Source Software) applications and is one of the leading entities in open-source technologies.

Fedora Atomic Desktops

We will be using Fedora Silverblue which is an immutable operating system (OS). It makes for a reliable OS for development work because it conducts safe updates, keeping the base OS functioning consistently, and uses containerization to separate applications from the base OS.

Because of this containerization we can use Toolbox which allows us to create different development environments per-project that are unaffected by changes to the OS.

If you want to know more about Fedora Silverblue you can read ‘What is Silverblue?’ by the Fedora Magazine.

Assuming you have successfully installed Fedora Silverblue on your chosen device we now will get to the next steps after a fresh installation.

Updates

Even after a fresh installation it makes sense to check for updates. The System and Applications updates can also be achieved in the Gnome Software Center. It is good practice though to use your Terminal since you are using Linux, right?

System

Simply update everything. Optional reboot at the end of this.

rpm-ostree upgrade

Applications

Update preinstalled flatpak packages.

flatpak update

Firmware

Update the firmware of your device.

fwupdmgr refresh --force
fwupdmgr get-devices
fwupdmgr get-updates
fwupdmgr update

Now that everything is up-to date, it gives us the optimal starting point to configure our Fedora Silverblue installation for web development.

Layering

In general Silverblue is supposed to be an immutable OS. Layering should only be done if absolutely necessary because it will slow down the use of rpm-ostree significantly.

Fish

I prefer Fish shell for my terminal (instead of the default BASH). It offers several features which will make using the terminal more pleasant and more efficient.

rpm-ostree install fish

After a reboot we still need to make it the default shell for our terminal.

# after reboot
sudo usermod --shell /usr/bin/fish $USER

Toolbox

Toolbox will make managing multiple projects that need various development environments, dependencies and applications much simpler. I will go through the steps of creating a minimal starter container (VSCodium & Node.js) that I would set up for myself. You can of course install whatever you need to get started on your project.

Create container

In this case we just need the default image Fedora 41, but you could choose a different image (e.g. Ubuntu 22.04). Many servers run with Ubuntu so you can have a similar environment when you code on Fedora.

toolbox create silverbluewebdev

After we created our first toolbox container we enter it.

toolbox enter silverbluewebdev

Our terminal window is now a self-contained copy of our OS with which we can interact.

Prepare container

Since the container is based on Fedora Workstation we can use the package manager DNF to install the software we need.

First we make sure everything is up-to date.

sudo dnf update

Fish

Yet again. Replace Bash. With Fish.

sudo dnf install fish

NodeJS

We can just use DNF because NodeJS is part of the official Fedora repository.

sudo dnf install nodejs

VSCodium

I prefer to use VSCodium because it is a FOSS alternative to VSCode based on the same software but leaving out the privacy-invasive telemetry/tracking included in the version of Microsoft. If you want to use VSCode you could also block their telemetry.

Now we add the always up-to date repository of paulcarroty.

sudo tee -a /etc/yum.repos.d/vscodium.repo << 'EOF'
[gitlab.com_paulcarroty_vscodium_repo]
name=gitlab.com_paulcarroty_vscodium_repo
baseurl=https://paulcarroty.gitlab.io/vscodium-deb-rpm-repo/rpms/
enabled=1
gpgcheck=1
repo_gpgcheck=1
gpgkey=https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/raw/master/pub.gpg
metadata_expire=1h
EOF

And install with DNF.

sudo dnf install codium

Lastly we clean up after ourselves.

sudo dnf clean all

Example

First container-based project

Now that the setup of our environment is complete/minimal we can go ahead with starting a project.

Astro Blog

We can start with initiating an Astro site by using npm and Astro’s wizard.

Let us choose/create a folder where our project will live. You can still do that within the container Toolbox created. For example ~/Development in our home directory.

mkdir Development &&
cd Development

Start the wizard and choose a template. For example the Astro Blog. This website is based on exactly that!

npm create astro@latest

Navigate into the directory (in this case silverbluewebdev) that was created by the Astro wizard and launch VSCodium to begin.

cd ./silverbluewebdev &&
codium .

You can use the terminal integrated into VSCodium or a new window and start the development server.

astro dev

Automation

There is of course a way to streamline this process so as not to repeat installing our needed software every time manually. We will do that with the help of Podman on which Toolbox is based on. With the help of a Containerfile/Dockerfile we can tell Podman what image to use and what commands to run when the container is being built.

First we will need a directory to create and then execute our script. You could put it in the root development folder like ~/Development/Automate/Node. This will make it easy to navigate if you need several environments. You just create another directory like Node, Python, Golang etc.

mkdir ~/Development/Automate &&
mkdir ~/Development/Automate/Node

For the sake of brevity both files will only have comments for explanation of their function.

Shell Script

In the directory ~/Development/Automate/Node you create a shell script build.sh.

touch ~/Development/Automate/Node/build.sh

Copy this code to build.sh.

#!/usr/bin/fish
# Be aware running this in a terminal that uses BASH it might not work


# Set desired name via CLI argument, but default to "toolbox"

if test (count $argv) -gt 0

set name $argv[1]

else

set name toolbox

end



echo "Cleaning existing image and container(s) if any exist"

toolbox rmi "$name" --force &> /dev/null



# Change to the directory of the script

set script_dir (dirname (status --current-filename))

cd $script_dir



# Verify if Containerfile exists in the current directory

if test -f "$script_dir/Containerfile"

echo "Building image using Containerfile in $script_dir"

# Add --no-cache to force rebuild

podman build --no-cache -t "$name" -f "$script_dir/Containerfile"

else

echo "Error: Containerfile not found in $script_dir"

exit 1

end



echo "Creating toolbox"

toolbox create -i "$name" "$name"

Containerfile

In the directory ~/Development/Automate/Node you create a Containerfile named Containerfile. The name is important because Podman looks for a file that is named either Containerfile or Dockerfile.

touch ~/Development/Automate/Node/Containerfile

Copy this code to Containerfile.

# You could use 40 instead of 41 and it would install that version
FROM registry.fedoraproject.org/fedora-toolbox:41


ARG NAME=toolbox


LABEL name="$NAME" \

summary="Fedora toolbox container" \

maintainer="Ioannis Hariskos"


# ENV EDITOR=nvim


# Install packages

RUN dnf -y upgrade && \

printf "[gitlab.com_paulcarroty_vscodium_repo]\nname=download.vscodium.com\nbaseurl=https://download.vscodium.com/rpms/\nenabled=1\ngpgcheck=1\nrepo_gpgcheck=1\ngpgkey=https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg\nmetadata_expire=1h" | tee /etc/yum.repos.d/vscodium.repo && \

dnf -y install nodejs codium fish && \

dnf clean all

Execute

At this point you could try and run the script but you will likely run into the error ‘build.sh’ exists but is not an executable file. We can change that with chmod but BEWARE. Never execute a script (as in file or terminal command) that you copied from the internet without at least rudimentary understanding of what it does.

Give build.sh executable permission.

# Make sure you do this OUT OF TOOLBOX
# You can open a new terminal or type 'exit'

chmod +x build.sh

Now you can execute the script with your preferred name for you new minimal node container.

# Type this in your script directory
# ~/Development/Automate/Node

./build.sh silverbluewebdev-automate

There it is! Test that everything is installed properly and working.

fish -v &&
node -v &&
codium -v

Good luck on your journey and keep learning.