Piece Together a Repeatable Frontend Dev Environ on Linux

Development environments are very personal in that every developer and every project has its own specific tools they either require or prefer. Once you get the perfect environment built, you’ll want to be able to make it such that it can be easily repeatable.

What do I mean?

Think of it this way: If you could create a sort of template environment that could easily be built, copied, and spun up, that would save you considerable time. No longer would you have to first deploy the operating system (OS) and then install all of the required software. It would just be a matter of re-using the “template” for your environment.

Sounds great, right?

Fortunately, there are a couple of easy ways to do this. The first obvious method would be to use a virtual machine technology, such as Oracle‘s VirtualBox, build your base VM and then clone it as needed. Another method would be to create a base container image that you can then deploy as needed. Either way you go, this is a great way of creating a repeatable front-end (or back-end) dev environment with Linux.

What I’m going to do is demonstrate how to do this using Linux Server 20.04 and a Docker container. Although we’ve already walked through the process of creating an image from a container, the important thing here is demonstrating how this can be done by installing certain dev tools on the OS (and then creating the “template” image to be later used).

Install Docker

Before we do anything, you must first install Docker. To do that, log into your Ubuntu instance and install the necessary dependencies with the command:

sudo apt-get install ca-certificates curl gnupg lsb-release -y

Add the Docker GPG key:

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

Add the Docker repository with the command:

echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

Update apt and install Docker Community Edition with:

sudo apt-get update

sudo apt-get install docker-ce docker-ce-cli containerd.io -y

Add your user to the docker group (to avoid security issues associated with deploying containers with sudo):

sudo usermod -aG docker $USER

Log out and log back in for the changes to take effect.

Create the ‘Template’ Container

We’ll now deploy a container that will serve as our template. We’ll do this with the latest version of the official Ubuntu image:

docker run -ti --name=ubuntu-dev-base ubuntu:latest

When this command completes, you’ll find yourself at the bash prompt of the container.

Install Our ‘Base’ Software

The software you need will obviously depend on the project and/or how you work. But let’s install a few fairly common pieces of software for front-end development. From the container’s bash prompt, update apt with:

apt-get update

Let’s first install Node.js and npm (Node.js Package Manager) with the command:

apt-get install nodejs npm -y

Answer the locale questions (where you are located and your time zone) and the installation will complete. With the npm package manager, we can then install SaSS (Syntactically Awesome Style Sheets) using the command:

npm install -g sass

Let’s now install git with:

apt-get install git -y

You can then install any other tools you’d need (so long as they don’t have a GUI) onto the running container. After you’ve completed that process, exit from the container with the command:

exit

We’ll now commit the changes with the command:

docker commit ubuntu-dev-base

This will create an untagged image. If you issue the command docker images, you’ll see an image listed with both the Repository and Tag fields listed as < None >. We need to tag that image, so it can be used. For that, copy the image ID associated with the untagged image and then tag it with:

docker tag ID ubuntu-dev-base

Where ID is the image ID for the untagged image.

You should now have an image listing that looks something like this:

You can then deploy a brand new container, using that new “template” with a command like:

docker run -it -d --name ubuntu-projectX ubuntu-dev-base

Once the container is running, you can access it with a command like this:

docker exec -it ubuntu-projectX bash

You can spin up as many of those environments as you like, knowing the original “template” will remain unchanged.

What if You Need GUI Tools?

If you need GUI tools for your development environment, your best bet is to use a Virtual Machine tool, like VirtualBox. You’d create a new VM (using your desktop of choice), install the necessary software, and then clone that VM as needed.

For example, to clone a VM in VirtualBox, you’d to the following. Select the VM to be cloned in the left navigation and click Clone. In the resulting window (Figure 1), give the clone a name (such as Dev Base), select a location, and click Next.

Figure 1: Cloning an instance of Ubuntu 22.04 Daily.

In the next window, select Full clone and click Clone. The cloning will take some time (2-5 minutes, depending on the size of the VM and the speed of the host machine). When it finishes, launch the clone, log into the desktop, and start installing the software you need. This process will be the same as outlined above, only you’ll need to use sudo with the commands.

After you’ve installed all of the software you need, power off the operating system. You can then clone this new VM as needed for a repeatable dev environment that perfectly meets your needs.