Let’s say you want to put your coding and tinkering skills to the test with the help of your SBC. Designing a LAMP web server that’s capable of displaying dynamic PHP pages on top of saving important records to a database using MariaDB is a good way to flex your thinking muscles.

However, if you’re only well-versed in Python or just want to deploy a simple website without all the bells and whistles of the Apache web server, you might want to go the Flask route instead. So, here’s an in-depth guide on how to set up a simple Flask web server on your SBC.

What you’ll need

It goes without saying that an SBC is essential for the Flask server. I’ve used a Raspberry Pi 5 for this tutorial, though the overall procedure isn't different if you’re on other SBCs. Luckily, hosting a Flask-based web server isn’t very taxing on these tiny systems, so you can save money by going for cheaper boards.

You’ll also require a microSD card to store both the OS and project files. For a relatively simple website, you’ll need a card with a minimum storage of 8GB to avoid running into performance or space issues.

Speaking of the operating system, we’ll assume you already have one pre-installed on your Raspberry Pi. I’ve used the Raspberry Pi OS for this tutorial, though you should be fine with other distros like Ubuntu. If you're following along on a Raspberry Pi, you can use our beginner's guide on how to program the SBC as a reference.

• Raspberry Pi 5

  CPU

  Arm Cortex-A76 (quad-core, 2.4GHz)

  Memory

  Up to 8GB LPDDR4X SDRAM

  Operating System

  Raspberry Pi OS (official)

  Ports

  2× USB 3.0, 2× USB 2.0, Ethernet, 2x micro HDMI, 2× 4-lane MIPI transceivers, PCIe Gen 2.0 interface, USB-C, 40-pin GPIO header

  GPU

  VideoCore VII

  Starting Price

  $60

  $60 at Adafruit $60 at CanaKit

• SanDisk 256GB Ultra microSDXC card

  $20 at Amazon

Setting up Flask on your SBC

Once you've booted into the operating system on your SBC, you can start things off by installing Python and Flask before creating some folders to organize the files.

1. Open the terminal app.

2. If your OS doesn’t already include Python3, install it using this command:

sudo apt install python3 -y

3. Execute the following command to install Flask:

sudo apt-get install python3-flask -y

4. Create a new directory to save your project files with the help of the mkdir command:

mkdir flask_web_server

5. Switch to the newly created folder using the cd command.

cd flask_web_server

6. Run mkdir to create a new folder called templates.

mkdir templates

This is where you’ll save all the HTML files of your website.

7. Once again, execute the mkdir command to the static folder.

mkdir static

We'll use this folder to store the CSS files.

8. If your operating system doesn't include a Python IDE, you'll have to install one before you can start working on the web server. I've used Thonny throughout the guide, and you can set it up on your OS with the help of the Snap Store.

sudo apt install snapd

sudo snap install thonny

Creating a web server

Now that you’ve installed Flask and created all the necessary directories, it’s time to get your hands dirty with some coding.

1. Launch Thonny or another Python IDE of your choice.

2. Paste the following code in the app:

from flask import Flask
app = Flask(__name__)
@app.route('/')
def mypage():
 return 'Hi there, XDA!'
if __name__ == '__main__':
 app.run(host='0.0.0.0')

Be sure to add a space before the return 'Hi there, XDA!' and app.run(host='0.0.0.0') statements. Otherwise, the script will produce indentation errors when you try to execute it.

3. Click on the Save button, give the script a name, and press OK after ensuring the Python files option is chosen as the file extension.

4. Head back to the terminal, and run the web_server.py script you just created with this command:

sudo python3 web_server.py

If you're not in the flask_web_server folder, be sure to switch to this directory with the help of the cd command.

5. Switch to your PC, and type the IP address of your SBC, followed by a colon and port 5000.

The IP address of your device should be visible in the terminal once you’ve run the command to initialize the web server.

6. If you wish to access it from your SBC instead, you can type 127.0.0.1:5000 in the URL Bar of your favorite web browser.

7. By default, the Flask web server will be accessible via port 5000, though you can add the port=port_number snippet within the app.run statement if you’re using port 5000 for some other service.

Adding HTML files to the web server

With that, you’ve set up a bare-bones Flask server. However, the Flask-powered website is rather lacking in terms of content and UI at the moment. You can add more static content to the website with the help of HTML files.

1. Head to the templates folder using the File Manager.

2. Create an HTML file inside this folder.

Be sure to switch the file type to all files before adding the .html extension at the end of the file name.

3. Reopen the web_server.py file using Thonny and import the render_template function by declaring it at the beginning of the file.

from flask import Flask, render_template

4. Add a return statement under mypage() to invoke the render_template function. Doing so will display the HTML file on the web page.

return render_template ('xda.html')

5. Save all the changes and type restart the web server by running this command once again:

sudo python3 web_server.py

Adding CSS files to the web server

Although we have added more content to the website, you may have noticed that it looks rather bland. You can technically modify the HTML file to make it a bit less of an eyesore, but I suggest using CSS scripts to improve the UI and make the website more aesthetically pleasing.

1. Head to the static folder.

2. Create a new CSS file in this location.

As with the HTML file, be sure to change the file extension to .css before you save it.

3. Reopen the HTML file you created earlier.

4. Add the following snippet under the tag to link to your CSS file.

5. Finally, restart the web server from the terminal.

sudo python3 web_server.py

Improving the SBC-powered Flask web server

Assuming you followed all the steps correctly, you’ll have a fully functioning website running on your SBC. For those who’re up to the challenge, I suggest adding multiple web pages and interlinking them with the help of the snippet inside the HTML files. Likewise, you may want to play around with CSS codes to enhance the appearance of the website.

If you’re interested in coding, be sure to check out our other guide on creating a LAMP server with a Raspberry Pi. Alternatively, you might want to go through some simple project ideas if you’re new to the SBC and want to get your bearings before tackling the more complex projects.