Have fun with your Raspberry PI: turn it into your own home web server

If you are one of those people out there that are passionate about digital technologies, love to understand and play around with them, chances are you woke up one day and decided to buy one of those fancy single-board computer named Raspberry Pi.

I will tell you a dirty little secret: I am one of those people, I bought my new shiny Raspberry PI and then I wondered what I could do with it. I know you can do lots of very interesting stuff: you can use it as a home automation system, or turn it into a personal streaming system; I decided to start simple and configure it as a Personal Home Web Server.

In this article I will describe what is needed to accomplish the objective; at the end you should be able to replicate the following tasks on your own Raspberry PI:

• how to install and configure Apache2 on a Raspberry PI;
• how to package and deploy an Angular application to a Raspberry PI web server.

Anatomy and architecture of an application

We will use Angular (https://angular.io/) as the underlying application technology, we will spin up the basic Angular app from the official website and deploy it to Raspberry. I also developed a very simple web application, which also integrate Bootstrap (https://getbootstrap.com/), you can git clone it from this GitHub repo https://github.com/robipozzi/windfire-profile.git

The overall architecture of what we are going to do is something like the following:

Figure 1 — High level architecture

Application deployment process from start to end

The process I will describe in the article is based on an Angular sample application, which I developed on my workstation and deployed on a Raspberry PI I have installed at home.

I used a Raspberry Pi 3 Model B, with Raspbian GNU/Linux 8 (jessie).

I use a Mac Book with macOS 10.14.5 as my development workstation, all the instructions you see reported in the article refer to and work on this system.

The application is based on Angular 8.3.23; Angular CLI requires Node.js, I am using Node 12.14.1 as you can see from the figure below.

Figure 2 — Angular and Node.js versions used to develop the application

You can use whatever IDE, Code or Text editor you prefer, I have used Visual Studio Code 1.42.0.

I do not see any particular reason why these instructions should not work on any other MacOs or Linux based system and on different Raspberry PI board but the stack above is the only configuration I actually tested.

Setup Raspberry PI

First thing first: you need to have your Raspberry Pi plugged in, setup and connected to your home network. If you haven’t already done it, you can follow the detailed instructions from Raspberry official website here.

Once connected to your home gateway, Raspberry PI will get an IP on the WiFi LAN from the DHCP server; I suggest to setup a static IP, you will need to read the manual of your home gateway for the specific instructions on how to do it.

Setup workstation to connect to Raspberry PI

Unless you want to work with keyboard, mouse and video directly plugged into Raspberry PI, you will need to properly setup a workstation and use SSH to connect and work remotely.

• Create an SSH Key Pair

You first need to create a public/private key pair to access Raspberry PI, open a terminal and issue the following command:

ssh-keygen

For our purposes you can accept all the defaults, as you can see in the figure below:

Figure 3 — SSH public/private key pair generation

If you haven’t changed any setting, by default you will find your newly created key pair in your home directory under .ssh subfolder.

• Copy SSH Public Key to Raspberry PI

Once you have generated the key pair, you will need to copy the public key to Raspberry by issuing the following command:

ssh-copy-id -i ~/.ssh/id_rsa pi@<YOUR_RASPBERRY_IP>

where:

1. id_rsa is the name of SSH key you generated in the previous step
2. pi is Raspberry user
3. <YOUR_RASPBERRY_IP> is the IP of your Raspberry PI box

Modify the values according to your specific environment.

You will need to keep the private key on your workstation in order to be able to connect to Raspberry.

• Test ssh connection to Raspberry PI

You should now be able to connect to Raspberry without a password, try the following command:

ssh -i ~/.ssh/id_rsa pi@<YOUR_RASPBERRY_IP>

If everything is fine, you are in and ready to go !!!

Install Apache 2

Once you have setup your Raspberry PI you will need to install Apache HTTP Server: ssh into your box as described in the previous paragraph and follow the instructions on How to install Apache2 on Raspberry PI (for the purpose of this article you can skip PHP installation).

Apache2 gets installed by default in /etc/apache2 where you will find all the relevant configuration files, as you can see from the figure below

Figure 4 — Apache2 configuration files in /etc/apache2

For our purposes you can keep the files as-is and accept all the default configurations for now. If, for whatever reason, you want to change some configuration, you will need to play around at least with the following:

1. apache2.conf is the main configuration file and puts the pieces together by including all remaining configuration files;
2. ports.conf is the configuration file that defines which ports Apache2 listens to, by default it configures it to listen on standard HTTP port 80, as you can see in the figure below:

Figure 5 — Example of Apache2 ports.conf file, which configures ports exposure

3. sites-enabled/000-default.conf is the default configuration file for Virtual Hosts; among other parameters it defines DocumentRoot which is the directory where Apache2 will look for your application files and serve your deployed application (by default is /var/www/html, keep it as is).

Figure 6 — Example sites-enabled/000-default.conf with DocumentRoot configuration

Create an Angular application and deploy it to Raspberry PI

Now that we have setup Apache2 on Raspberry PI, we will need something to deploy and run, to do that we will use a basic Angular application to start from.

Keep the terminal open on Raspberry and open another terminal to work on your workstation directly, we are now going to install Angular on your workstation.

Angular needs Node.js as a prerequisite, go to https://nodejs.org/en/download/ to download and install an appropriate version for your workstation platform.

Once Node.js is installed, go on and install Angular with the following command:

npm install -g @angular/cli

You can follow the detailed instructions at https://angular.io/guide/setup-local to setup Angular on your workstation.

Create a folder (e.g.: raspberry) in your home directory to hold development artifacts and then instantiate your own Angular application with the following commands:

mkdir ~/raspberry
cd ~/raspberry
ng new my-app

The ng new my-appcommand creates my-app folder and populates it with all development artifacts, from now on you can play with Angular and build up your own application.

Starting and testing Angular on local is very easy, just change directory to the Angular folder that has been created before

cd ~/raspberry/my-app

and issue the following command

ng serve --open

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files; adding --open option will make things super easy by automatically launch and open the application in a browser.

After local development and test, we are ready to package the application for deployment with the following command

ng build --prod

The command above creates a /dist/my-app folder under the application root directory, builds the application and packages Angular artifacts for deployment.

To install and run the application on Apache2 you will just need to copy the artifacts to DocumentRoot folder on your Raspberry box (defined in 000-default.conf, as we have seen before) and you can do that by using the Secure Copy (i.e.: scp) utility, just like this:

scp -i ~/.ssh/id_rsa -r ~/raspberry/my-app/dist/my-app pi@<YOUR_RASPBERRY_IP>:~/my-app

The command above connects to Raspberry via ssh (using the private key we created before) and copies the content from ~/raspberry/my-app/dist/my-app folder on your local workstation to ~/my-app remote folder on Raspberry. Adjust the parameters according to your specific environment, run the command and you are done copying the application files to the remote box.

You need just one final step, switch to the terminal on Raspberry (or ssh into Raspberry again if you lost connection) and copy the application files to your Apache2 DocumentRoot folder (if you did not change anything, by default it is /var/www/html):

sudo cp ~/my-app/* /var/www/html/

Open a browser, point to http://<YOUR_RASPBERRY_IP> and you have a shiny new application running on your Raspberry personal home web server.

Conclusion

In this article we have seen how easy is to work with Raspberry and how to:

• Install Apache2 on your Raspberry PI
• Setup your workstation to connect to and work with Raspberry PI
• Setup Angular on your workstation to develop applications
• Create a basic Angular application
• Build, Package and Deploy an Angular application to Raspberry

I hope you had fun following the instructions and hope you have found them useful.

My intention is to build on this foundation and extend with hints around Securization (i.e.: using SSL / HTTPS with Raspberry) and Automation, so watch out !!

Things can always be done differently or better and we can always learn from each other, if you find any mistake or you have any suggestion please let me know.

References

In the writing of this article I used and referred to a bunch of other sites, which is right to mention here and leave for reference:

• Raspberry PI official site (for instructions on how to setup and start with Raspberry PI): https://projects.raspberrypi.org/en/projects/raspberry-pi-setting-up
• ssh.com website (for info and instructions related to ssh) : https://www.ssh.com/ssh/keygen
• Guide to install Apache2 on Raspberry PI: https://www.raspberrypi.org/documentation/remote-access/web-server/apache.md
• Angular official site: (https://angular.io/)
• Bootstrap official site: (https://getbootstrap.com/)