Full Stack Web Development with Raspberry Pi 3

4.2 (6 reviews total)
By Soham Kamani
    What do you get with a Packt Subscription?

  • Instant access to this title and 7,500+ eBooks & Videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Free Chapter
    Getting Started on the Raspberry Pi
About this book

Modern web technology and portable computing together have enabled huge advances in the Internet of Things (IoT) space,as well as in areas such as machine learning and big data. The Raspberry Pi is a very popular portable computer for running full stack web applications. This book will empower you to master this rapidly evolving technology to develop complex web applications and interfaces.

This book starts by familiarizing you with the various components that make up the web

development stack and that will integrate into your Raspberry Pi-powered web applications. It also introduces the Raspberry Pi computer and teach you how to get up

and running with a brand new one. Next, this book introduces you to the different kinds of

sensor you’ll use to make your applications; using these skills, you will be able to create

full stack web applications and make them available to users via a web interface. Later,

this book will also teach you how to build interactive web applications using JavaScript

and HTML5 for the visual representation of sensor data. Finally, this book will teach you

how to use a SQLite database to store and retrieve sensor data from multiple Raspberry

Pi computers.

By the end of this book you will be able to create complex full stack web applications

on the Raspberry Pi 3 and will have improved your application’s performance and usability.

Publication date:
August 2017


Getting Started on the Raspberry Pi

The Raspberry Pi has become hugely popular as a portable computer, and for good reason. When it comes to what you can do with this tiny piece of technology, the sky's the limit. Back in the day, computers used to be the size of entire neighborhood blocks, and only large corporations doing expensive research could afford them. After that, we went on to embrace personal computers, which were still a bit expensive, but, for the most part, could be bought by the common man. This brings us to where we are today, where we can buy a fully functioning Linux computer, which is as big as a credit card, for under $30. It is truly a huge leap in making computers available to anyone and everyone.

The marvel of the Raspberry Pi, however, doesn't end here. Its extreme portability means we can now do things that were not previously possible with traditional desktop computers. The GPIO pins give us easy access to interface with external devices. This allows the Pi to act as a bridge between embedded electronics and sensors and the power that Linux gives us. In essence, we can run any code in our favorite programming language (which can run on Linux) and interface it directly to outside hardware quickly and easily. Once we couple this with the wireless networking capabilities introduced in the Raspberry Pi 3, we gain the ability to make applications that would not have been feasible to make before this device existed.

Web development and portable computing have come a long way. A few years ago, we couldn't dream of making a rich, interactive, and performant application that runs on the browser. Today, not only can we do that, but we can also do it all in the palm of our hands (quite literally). When we think of developing an application that uses databases, application servers, sockets, and cloud APIs, the picture that normally comes to mind is that of many server racks sitting in a huge room. In this book, however, we are going to implement all of that using only the Raspberry Pi.

In this chapter, we will go through the concept of the Internet of Things and discuss how web development on the Raspberry Pi can help us get there. Following this, you will also learn how to set up your Raspberry Pi and access it from our computer.

We will cover the following topics:

  • The Internet of Things (IoT)
  • Our application
  • Setting up the Raspberry Pi
  • Remote access

The Internet of Things

The web has, until today, been a network of computers exchanging data. The limitation of this was that it was a closed loop. People could send and receive data from other people via their computers but rarely much else.

The IoT, in contrast, is a network of devices or sensors that connect the outside world to the internet. Superficially, nothing is different: the internet is still a network of computers. What has changed is that now, these computers are collecting and uploading data from things instead of people. This now allows anyone who is connected to obtain information that is not collected by a human.

The IoT as a concept has been around for a long time, but it is only now that almost anyone can connect a sensor or device to the cloud, and the IoT revolution was hugely enabled by the advent of portable computing, which was led by the Raspberry Pi.


A brief look at our application

Throughout this book, we are going to go through different components and aspects of web development and embedded systems. These are all going to be held together by our central goal of making an entire web application capable of sensing and displaying the surrounding temperature and humidity.

In order to make a properly functioning system, we have to first build the individual parts. More difficult still is making sure all the parts work well together. Keeping this in mind, let's take a look at the different components of our technology stack and the problems that each of them solves:

The sensor interface - perception

The sensor is what connects our otherwise isolated application to the outside world. The sensor will be connected to the GPIO pins of the Raspberry Pi. We can interface with the sensor through various different native libraries, which we will be looking into in the later chapters.

This is the starting point of our data. It is where all the data that is used by our application is created. If you think about it, every other component of our technology stack exists only to manage, manipulate, and display the data collected from the sensor.

The database - persistence

Data is the name we give to raw information, which is information that we cannot easily aggregate or understand. Without a way to store and meaningfully process and retrieve this data, it will always remain data and never information, which is what we actually want.

If we just hook up a sensor and display whatever data it reads, we are missing out on a lot of additional information. Let's take the example of temperature: what if we wanted to find out how the temperature was changing over time? What if we wanted to find the maximum and minimum temperatures for a particular day, or a particular week, or even within a custom duration of time? What if we wanted to see temperature variation across locations? There is no way we could do any of this with only the sensor. We also need some sort of persistence and structure to our data, and this is exactly what the database provides for us.

If we structure our data correctly, getting the answers to these questions is just a matter of a simple database query.

The user interface - presentation

The user interface is the layer that connects our application to the end user. One of the most challenging aspects of software development is making information meaningful and understandable to regular users of our application.

The UI layer serves exactly this purpose: it takes relevant information and shows it in such a way that it is easily understandable to humans. How do we achieve such a level of understandability with such a large amount of data? We use visual aids, such as colors, charts, and diagrams (just like how the diagrams in this book make the information easier to understand).

An important thing for any developer to understand is that your end user actually doesn't care about any of the backend stuff. The only thing that matters to them is a good experience. Of course, all the other components serve to make the users experience better, but it's really the user facing interface that leaves the first impression, and that's why it's so important to do it well.

The application server - middleware

This layer consists of the actual server-side code we are going to write in order to get the application running. It is also called middleware. In addition to being in the exact center of the architecture diagram, this layer also acts as the controller and middle-man for the other layers.

The HTML pages that form the UI are served through this layer. All the database queries that we were talking about earlier are made here. The code that runs in this layer is responsible for retrieving the sensor readings from our external pins and storing the data in our database. As you will see in later chapters, the middleware can also be further broken down into individual components, each with its own function.


Setting up our Raspberry Pi

So far, we've been reading a lot of theory. Now let's actually get our Raspberry Pi working. Before we get started, here is a list of things you need at the bare minimum to get your Pi up-and-running:

  • The Raspberry Pi (duh)
  • An SD card (8 GB or higher)
  • A micro USB power source (many phone chargers are of this type so you might have one already)
  • A keyboard and mouse
  • Any screen or display with an HDMI port and cable
  • A laptop (optional)

Have everything? Awesome! Let's move on...

There are lots of operating systems and lots of ways to install them on the Pi. However, the easiest way by far is to use the official NOOBS installer. NOOBS, which stands for New Out Of Box Software, is the officially recommended way to install a fresh OS on the Pi for newcomers, and it's terribly easy.

Download the NOOBS archive from official website (https://www.raspberrypi.org/downloads/noobs/). Once the archive is downloaded, unzip it into a new folder anywhere on your computer.

If you are using NOOBS v2.3.0, the directory structure, once you unzip the archive, should look like this:


Most of these files have no meaning to us except the INSTRUCTIONS-README.txt file. Open this file in any text editor (such as Notepad), and you will find instructions on how to format your SD card.

After formatting your SD card, transfer all these files and folders to the root directory of the SD card. As described in the instructions, all files and folders should be copied in such a way that the INSTRUCTIONS-README.txt file is at the root.

Once your SD card is ready and loaded, connect everything to your Pi:

  1. Insert the SD card into the slot.
  2. Using the HDMI cable, connect the HDMI port of the Pi with the external display.
  3. Connect the keyboard and mouse to the USB ports of the Pi
  4. Connect the power cable to the Micro USB port of the Pi

Once all the connections are made, switch on the power supply to your Pi. You should now see the monitor light up. After a few boot screens, you should see a friendly little GUI that will lead you to this:

It's here that you can select the OS you want in order to install to your Pi. For this book, we will be working with Raspbian.

Raspbian is a port of the Debian Linux OS, that has been optimized for the Pi. It is currently the most popular OS that runs on the Pi. Follow the installation wizard, and you should be done with the installation in a few minutes.

Once your installation is done, your Pi will boot into the OS, and you should now see a complete desktop on your monitor screen, something that looks like this:

Congratulations! You have successfully set up your Raspberry Pi computer. Amazingly, there are a lot of things you can do like you're using a regular desktop computer. The Raspberry Pi, along with the Raspbian OS, comes with a variety of programs, such as a text editor, a file explorer, and even an HTML5 web browser!


Remote access

The setup we have here is perfectly sufficient for moving on with the rest of the chapters. You now have a fully functioning Raspberry Pi running and now have the capability to run a fully functioning web application on it.

Yet, for those who prefer programming on their laptop (and most people do), it would make sense to be able to remotely access and program on the Raspberry Pi using our computer of choice.

Fortunately for us, it's really easy to do this. Sometimes, I even prefer remotely programming my Pi from my laptop because it's much easier and more convenient to do that.

To access our Pi, we are going to use SSH (secure shell) to access its shell from any computer on the network:

  1. First things first, make sure your Pi is connected to the same network as your computer. If you are using a wired router, connect the Pi through it using a LAN cable:
A better option, though, is to connect the Pi wirelessly through WLAN.

If you already have a wireless network running, connect your Pi to the network by clicking on the wireless network icon on the desktop:

Select your wireless network and connect to it.

  1. The next step is to find the private IP address of your Pi. Open the Terminal application by clicking on the icon, as shown in the following screenshot:

Execute the ifconfig command in the Terminal window. The ifconfig command, if executed with no other arguments, will display the status of all network interfaces on the device. You should get an output that looks like this:

Your private IP address can be found by looking at the inet addr field (as highlighted in the preceding figure). Depending on the interface you are connected to, this address can appear either under wlan0 (if you are connected using Wi-Fi) or eth0 (if you connect with a LAN cable). My IP address, in this case, is

  1. We need to now enable the SSH server on our Pi. This is the service that allows us to access our Pi's command line remotely. To do this, open the system configuration by running the following command:
     sudo raspi-config

You should see a GUI-like configuration screen, as follows:

Go to the Interfacing Options section, and then go to P2 SSH.

You will then need to give a confirmation to start the SSH server.

  1. All that's left is to finally connect to the Raspberry Pi using our laptops or desktops.

If you are working on a Windows machine, you will need to download and install PuTTY (http://www.putty.org/), which is a free SSH client for Windows. Enter the IP address of the Raspberry Pi, which we obtained in the previous step, with the port as 22 (the default SSH port).

If you are using a Unix system (Mac or Linux), you can ssh into the Pi by entering the following command:
ssh pi@

Remember to replace with your own Pi's IP address.

In both cases, you will be asked for a password. The default username for the Raspbian OS after installation is pi, with the default password being raspberry. If you are able to establish an SSH session with the Pi, you should see its Command Prompt:

You can now remotely access your Raspberry Pi device from any computer on the network. Awesome!

What's even more awesome is that there is no need to connect any peripheral device to the Pi anymore. That means no mouse, no keyboard, and no monitor required! All you need is the power supply, and with SSH, you're good to go!

As I stated earlier, you need not go through the hassle of remotely accessing the Pi from your own computer. The Pi is a perfectly good standalone computer on its own. Many of your favorite text editors can also be run on the Pi, which means that you can write and execute code on the same Raspberry Pi device.



We are just warming up! In this chapter, we got a brief introduction to the concept of the Internet of Things. We then went on to look at an overview of what we were going to build throughout the rest of this book and saw how the Raspberry Pi can help us get there.
The next section showed us how to get up and running with our Pi by installing and running the Raspbian OS.

Finally, you learned how to make life easier by being able to access the Pi remotely through our desktop or laptop.

This chapter essentially forms the base for us moving forward. It is important to make sure that you get the installation right, as we are going to rely solely on the Raspberry Pi's environment for the execution of our code. Our laptop is simply going to assist us in writing the code.

In the next chapter, we will dive deep into the web development stack and look at how each layer plays its role and how we can build them it forward.

About the Author
Latest Reviews (6 reviews total)
This is an excellent book. Perhaps I'm biased because it is exactly what I was looking for as it explained in detail how to use the powerful Raspberry Pi with cloud services, specifically Google's Firebase platform. Although the internet has some tutorials on this subject, this book is a complete start to finish guide in one book. It is a fast paced book and the coding examples are easy to follow. I bought the printed book a while ago, but only recently found the time to dive into it. I enjoyed it so much that I had to get the PDF version. Now, I can take it with me on the go.
Good Good Good Good Good Good
I had expected the ebook to provide a more general coverage.
Full Stack Web Development with Raspberry Pi 3
Unlock this book and the full library FREE for 7 days
Start now