HowTo: Host SPA project on Raspberry Pi (using Lighttpd server)

If you are trying to learn Single-Page Application(SPA) development, it’s always a good idea to take reviews for whatever UI/UX idea you are trying to implement that the end-users like. To get a first response, you can always go to your near and dear ones to test it out and get feedback about how it’s being done, the usual issue is, how you make it available to the people in your local network without much hassle. This solution is quite simple if you own a Raspberry Pi device.

Any Raspberry Pi device after 2B has sufficient power and capabilities to host a SPA site, and with the power consumption of a cell phone, it’s also really efficient. To begin with, let’s start by updating the Raspberry Pi OS by using the following command.

sudo apt-get update && apt-get upgrade -y
Installation

After the update is done, let’s install the Lighttpd server on the device as it’s really lightweight and perfect for our purpose. You can use other servers as well, but we will cover that in future articles. Use, the following command to install the Lighttpd server (also make sure there are no other servers installed to avoid any conflicts.)

sudo apt-get install lighttpd -y

Now just put the IP address of the Raspberry Pi into any browser of any device in the local network, and you should be able to see the default page.

If you can see the above page, it means the installation is done and we are good to move to the next step. Now, compile your SPA project and copy the file to the “/var/www/html/” location in the Linux directory (Learn more about the Linux Directories).

Configuration

By default, Lighttpd only supports HTML, CSS, and javascript. It does not have any SPA support out of the box. To add support for the SPA application, you need to modify the lighttpd configuration. You can do that by doing he following modifications:

sudo nano /etc/lighttpd/lighttpd.conf

and add the following line after the server.document-root line (you can also modify the server.document-root to point to a different directory, but it’s usually kept to this by Linux norms.)

server.error-handler-404 = "/index.html"

Now do a simple Lighttpd service restart by executing the following command and you should be done.

sudo service lighttpd restart

This should you up and running with your SPA application in your network without any hassle.

You can follow this article to make this application available in secure remote network. To learn about making it available over the internet in a secure way, follow this article.

Uninstalling

To uninstall lighttpd server, you can do the following commands

sudo apt-get remove lighttpd -y
sudo apt-get autoremove -y

Leave a Comment