In this blog, I will guide you through creating a Simple Web-Based Linux Terminal Playground that enables running Linux commands directly in the browser. We will use technologies such as Podman for containerization, React for the UI, and Express and node-pty for the backend. WebSockets will handle real-time communication between the frontend and backend, creating a seamless, secure, and interactive environment to learn and execute Linux commands. Each connection will be isolated and ephemeral therefore ensuring security and separation between users.

Why Use Podman, React, Express, node-pty, WebSockets, and Alpine?

Why Podman?

Podman is an open-source container engine that focuses on security and flexibility which is an advantage compared to Docker. By default, Podman containers run in rootless mode, meaning they operate without root privileges, thus reducing security risks. In our case, Podman helps in creating isolated environments for us to interact with Linux commands while ensuring that each session to the website is separate from each user and secured.

Why React and XTermJS?

React provided a powerful declarative framework to build interactive UI. XTermJS provided a way to create a terminal emulator for the web which ensures a seamless and fluid user experience which handles the user input and return proper output from the server.

Why Express and node-pty?

ExpressJs is a minimal and flexible web application framework for NodeJS. It provides amazing tooling to setup HTTP requests, Websocket connections, and orchestrating interactions between the frontend and backend. Node-pty utilized in the backend allows to handle pseudo-terminal (PTY) sessions which then is used to interact with the containerized Linux environment in real-time. WebSockets enabled real-time communication, which is a powerful tool that allows for live terminal outputs and receiving user inputs instantly.

Why Alpine Linux as the Base Image for our Linux Playground?

Alpine Linux is used for this Linux Playground for its lightweight and security-focused nature thus making it ideal for running containers especially for our use-case. Due to its focus on being run for containers and can run rootles container runtimes like Podman it ensures that it can run securely without requiring elevated privileges.  Alpine allows to spin up containers faster, with better isolation and security.

Prerequisites

Before diving into how to implement it, make sure that the following prerequisites are installed and set up:

1. Node.js and npm (Node Package Manager)
2. A React project set up (if you don’t have one yet, check out how to set up one using Vite React App)
3. Podman installed and configured to run containers locally. Podman Installation and Setup

How to Build the Web-Based Linux Terminal Playground?

Step 1: Alpine Linux Image

Before coding anything, we must first have a usable image to use for the Linux Playground. Copy and paste the code to a file called Dockerfile.

After copying the Code to the file, run this command to create the linux image podman build -t linux-playground-alpine .

Step 2: Web Terminal

If you haven’t created vite-react project yet, follow these steps

• Run this command to create a new project, npm create vite@latest linux-playground -- --template react-ts
• cd into the created project cd linux-playgroud
• install xtermjs npm install xterm
• Then create a folder inside the src folder called components and create a file called terminal.tsx.
• Copy and paste this code

Step 3: Backend Linux Orchestrator

Next is to create the backend that will work with podman to create linux containers when there is a new user session in the frontend.

• Generate a new node project by running npm init -y
• Install the following npm packages npm install ws node-pty express
• Create a src folder and create a new file inside it called server.js then paste the following code

Note: Make sure that podman is running, to check if it is running, run this command in the terminal podman info

Step 4: Running the Linux Playground

Run the following commands and make sure that you are inside of the folders where the files are 

• For the react app: npm run dev
• For the server: node src/server.js

Then test out the application.

Conclusion

In this blog, we are able to know how to create a web-based Linux Terminal Playground that allows users to run Linux commands in a secure isolated environment. The combination of Podman for containerization, React and XTerm for an amazing UI and seamless interaction, Express and node-pty for managing terminal sessions and orchestration of containers with Podman, and finally WebSockets for real-time communication. With these technologies, we are able to create a powerful and interactive learning environment. Learning and Teaching Linux is much better when we are able to first-hand use and execute Linux specific commands.