The Raspberry Pi 400: Compact Powerhouse for Modern Web Developers

⚠️ Warning: Please be aware that the Raspberry Pi 400, while a capable device, may encounter issues when running multiple processes simultaneously on larger projects. It’s essential to understand its limitations, especially when handling resource-intensive tasks. It’s not advisable to use this configuration in a live production environment. Always prioritize safety and stability when deploying any application or system.

Web development is evolving rapidly with developers now having the flexibility to choose from a plethora of tools and environments. In this milieu, the Raspberry Pi 400 stands out as a compact yet potent machine for web development. Let’s dive deep into its possibilities and how you can set up a versatile web development environment.

So I’m working on a Spring Boot + Angular 16 full-stack project, and I was looking for a way to mock the back-end on a local network. I remembered that I have a Raspberry Pi 400 computer that I haven’t really used since 2020.
I was wondering, as a web developer, what are the possible applications?

Step zero, if you’re using it after several months/years of not using it, is to download the latest Raspberry Pi Imager from the Raspberry Pi OS website and create a copy of the OS on a MicroSD card. I myself upgraded from buster (Debian 10) to bookworm (Debian 12) after 3 years. Unfortunately, I only managed such a big version jump with a complete reinstall.

Setting Up Your Raspberry Pi 400 for Web Development

Before diving into the technicalities, it’s essential to ensure that your Raspberry Pi 400 is set up correctly. As mentioned earlier, updating the OS is crucial. But once that’s done, here are some additional steps to optimize it for web development:

1. Install Essential Development Tools: Depending on your project requirements, you might need tools like Node.js, npm, or even Docker. Ensure you have all the necessary tools installed and updated.
2. Secure Your Device: Since you’ll be using it for development, it’s essential to ensure that your Raspberry Pi is secure. Regularly update your software packages and consider setting up a firewall.
3. Optimize Your Workspace: The Raspberry Pi 400 is compact, but that doesn’t mean you can’t have a robust development environment. Consider using tools like Visual Studio Code, which has a version optimized for the Raspberry Pi.

Adding static IP for Raspberry Pi 400

To ensure network accessibility for servers running on Raspberry Pi 400, you need to follow a few basic steps:

1. Set a static IP address for the Raspberry Pi 400:

• This ensures that you always have access to the same IP address within your local network.
• Modify the /etc/dhcpcd.conf file.

sudo nano /etc/dhcpcd.conf

• Add the following settings:

interface eth0
static ip_address=192.168.x.x/24
static routers=192.168.x.1
static domain_name_servers=192.168.x.1

• (Replace the x values with the corresponding values of your own network.)
• Save and exit: Ctrl + O, Enter, then Ctrl + X.

2. Firewall settings:

• If you have an active firewall on your Raspberry Pi 400, make sure that the ports used for servers are enabled. For example, if you have ufw (Uncomplicated Firewall) installed:

sudo ufw allow 8080  # to Jenkins
sudo ufw allow 3000  # to json-server
sudo ufw allow 3306  # to MySQL
# ... additional ports for the services you use

3. Router settings:

• If you are using the Raspberry Pi on a network where a router controls access, check the router settings to make sure that the ports are forwarded to the Raspberry Pi’s IP address. The port forwarding procedure varies from router to router, so check the router manufacturer’s instructions.

4. Software settings:

• Some servers (e.g. database servers) only accept connections from localhost by default. Some hosts (e.g. localhost) may only accept requests from certain hosts (e.g. hosts that are hosted on your server only).
• Example for MySQL: Edit the file my.cnf or mysqld.cnf (location depends on the distribution) and under the [mysqld] section set the bind-address to 0.0.0.0.

After these steps, the servers running on the Raspberry Pi 400 should be accessible from other devices on your network.

Embrace the Power of an (Almost Fully) Automated JSON Server

Transform a mundane Sunday into a productive one by integrating the json-server into your web development environment on the Raspberry Pi 400. The json-server stands out as a remarkable tool that requires zero-coding, offering a comprehensive fake REST API, ideal for prototyping and mocking. Dive into this engaging task and enhance your web development workflow with a touch of automation and efficiency.

Installing json-server

1. Node.js and npm: If you haven’t already, you’ll first need Node.js and npm:

sudo apt-get install -y nodejs npm

2. Install json-server globally:

sudo npm install -g json-server

Setting Up Automatic Execution

For auto-starting json-server, we'll utilize systemd, which is a system and service manager for Linux.

1. Create a systemd service file:

sudo nano /etc/systemd/system/json-server.service

2. Add the following content:

[Unit]
Description=JSON Server
After=network.target

[Service]
ExecStart=/usr/local/bin/json-server --watch /path_to_your/db.json --host your_raspberry_pi_IP
Restart=always
User=pi
Group=pi
Environment=PATH=/usr/bin:/usr/local/bin
WorkingDirectory=/path_to_directory_containing_db_json
[Install]
WantedBy=multi-user.target

Replace /path_to_your/db.json with the path to your db.json file and your_raspberry_pi_IP with the IP address of your Raspberry Pi.

3. Reload systemd to recognize the new service and enable it:

sudo systemctl daemon-reload
sudo systemctl enable json-server.service

4. Start the service:

sudo systemctl start json-server.service

With this setup, json-server will watch your db.json file for changes and will automatically restart if the file is modified or if the Raspberry Pi is rebooted. The Restart=always directive ensures that the server will attempt to restart if it crashes or exits for any reason.

To check the status of your json-server, you can use:

sudo systemctl status json-server.service

This will allow you to have a robust mock REST API on your Raspberry Pi 400 for rapid web development and testing.

It is just the beginning. We should automatize it further.

To automatically restart json-server upon changes to the db.json file, we'll use a tool called inotify-tools.

inotify-tools provides a set of command-line programs for using inotify, a Linux kernel feature to monitor changes to files and directories. Specifically, we'll use the inotifywait command to watch for changes to the db.json file and then restart the json-server service when a change is detected.

Installing inotify-tools

1. Install inotify-tools:

sudo apt-get install inotify-tools

Setting Up the Watcher Service

2. Create a script that watches for changes and restarts json-server:

nano ~/json-watcher.sh

3. Add the following content:

#!/bin/bash

while inotifywait -e modify /path_to_your/db.json; do
    sudo systemctl restart json-server.service
done

• Make sure to replace /path_to_your/db.json with the actual path to your db.json file.

3. Make the script executable:

chmod +x ~/json-watcher.sh

4. Create a systemd service file for the watcher:

sudo nano /etc/systemd/system/json-watcher.service

5. Add the following content:

[Unit]
Description=JSON Server Watcher
After=network.target

[Service]
ExecStart=/home/pi/json-watcher.sh
Restart=always
User=pi
Group=pi
Environment=PATH=/usr/bin:/usr/local/bin
[Install]
WantedBy=multi-user.target

6. Reload systemd, enable and start the watcher service:

sudo systemctl daemon-reload
sudo systemctl enable json-watcher.service
sudo systemctl start json-watcher.service

Now, every time you modify the db.json file, the watcher service will detect the change and restart the json-server service, ensuring your mock REST API reflects the latest data changes immediately.

SSH Setup

1. SSH server control on Raspberry Pi:

Verify that the SSH server is running on the Raspberry Pi:

sudo systemctl status ssh

If it is not running, start it and enable autostart:

sudo systemctl start ssh
sudo systemctl enable ssh

2. Checking the firewall settings:

If you have a firewall installed on your Raspberry Pi (such as ufw), check if SSH access is enabled:

sudo ufw status

If port 22 is not enabled, enable it:

sudo ufw allow 22

3. Check network settings:

Check your Raspberry Pi’s IP address. You can do this with the following command:

ip a

4. Check SSH settings:

Check the SSH configuration file:

sudo nano /etc/ssh/sshd_config

Make sure the following settings are set correctly:

Port 22
PermitRootLogin no
AllowUsers <username>

After verifying and modifying the above settings as necessary, save the file and restart the SSH server:

sudo systemctl restart ssh

Now try to connect again with the scpcommand.

You can use it on another computer with the following command. Let’s enter the folder of the given file.

scp <fileName>.json <username>@<raspberry-pi-IP>:<jsonserver/db.json path>

Make a PostgreSQL and MySQL server for our local network

Adminer with PostgreSQL

After setting up the Raspberry Pi OS, the next step is to introduce database management. While many developers gravitate towards MySQL or SQLite, PostgreSQL offers robust features, making it an attractive option.

sudo apt-get update
sudo apt-get install postgresql postgresql-contrib

Once PostgreSQL is installed and running, managing the database becomes paramount. Here, Adminer steps in. It’s a lightweight database management tool, which seamlessly integrates with PostgreSQL, offering a user-friendly web interface.

sudo apt-get install adminer
sudo ln -s /usr/share/adminer/adminer.php /var/www/html/adminer.php

I have had a problem after installation: the style sheet of the Admin page does not appear, and I got 404’s on the console. In this case, you must download the full source code from adminer.org and copy the /adminer/static folder from the ZIP file to /var/www/html/adminer.

MySQL and PHPMyAdmin

MySQL is undeniably one of the most popular database solutions. Setting it up on Raspberry Pi 400 is straightforward:

sudo apt-get install mysql-server

For managing MySQL databases via a web interface, PHPMyAdmin is an excellent choice:

sudo apt-get install phpmyadmin

This setup ensures you have both PostgreSQL and MySQL at your disposal, providing the flexibility to choose the right database for your projects.

Node.js and npm

Modern web development is incomplete without the Node.js environment. Along with npm (Node Package Manager), it offers a potent combination to run server-side JavaScript and manage dependencies.

sudo apt-get install -y nodejs npm

Local Web Servers

To run and test websites locally, setting up a web server is essential. Both Apache and Nginx are viable options:

# For Apache
sudo apt-get install apache2

# For Nginx
sudo apt-get install nginx

Version Control with Git

Managing and tracking your code changes is fundamental in web development. Installing Git offers this capability:

sudo apt-get install git

Expanding Possibilities

Beyond these setups, Raspberry Pi 400 can be equipped with:

• Web Development Frameworks: Tools like Flask or Express can be installed to accelerate backend development.
• Text Editors: Lightweight editors like Nano or Vim come pre-installed. For a GUI-based solution, Geany is an excellent option.
• File Transfer: Tools like scp can be used to securely transfer files between your Raspberry Pi and other devices.
• Using it as a Learning Platform: The Raspberry Pi 400 is a great tool for practicing and learning web development skills. You can install development tools like Visual Studio Code and study the workings of HTML, CSS, JavaScript, and other technologies.
• Prototyping Web Applications or APIs: If you have an idea for a web application or an API, the Raspberry Pi 400 is a great tool for creating a prototype.
• Hosting Static Websites: If you want to run simple, static websites, the Raspberry Pi 400 is perfectly suitable.
• Web-based IoT Projects: You can integrate the Raspberry Pi 400 into IoT (Internet of Things) projects, creating web-based interfaces for managing and monitoring various sensors or devices.
• Testing Web Applications in Different Browsers: You can install various browsers on the Raspberry Pi 400, allowing you to test your applications’ compatibility and performance on these platforms.
• Using it as a Portable Web Development Station: Given the compact size of the Raspberry Pi 400, you can make it portable, taking your development environment anywhere you go.
• Monitoring Servers and Databases: You can install software like Grafana or Prometheus to monitor your web applications and their backend infrastructure.

Concluding Thoughts

The Raspberry Pi 400 is an excellent choice for web development projects, especially if you’re looking for a cost-effective and compact solution. Its capabilities, especially in the realm of web development, are immense. From setting up databases to running local servers to coding, this pocket-sized marvel is reshaping how we perceive and approach web development. With just a few commands, it’s ready to serve as your mini workstation, making web development efficient, portable, and more fun.