How to Build Your Own Web Server on Raspberry Pi Pico W

In this step-by-step guide, I’ll walk you through the process of setting up a web server on a Raspberry Pi Pico W using Phew library

IntermediateProtip2 hours1,327

How to Build Your Own Web Server on Raspberry Pi Pico W

Things used in this project

Hardware components

Raspberry Pi Pico W

Micro-USB to USB Cable (Generic)

Software apps and online services

Thonny IDE

Story

In this step-by-step guide, I’ll walk you through the process of setting up a web server on a Raspberry Pi Pico W using Phew, making this seemingly daunting task straightforward and achievable.

Step 1: Setting Up Your Raspberry Pi Pico W

First, you need to ensure that your Raspberry Pi Pico W has been flashed with the latest MicroPython firmware and is ready to be programmed, You can follow How To Get Started with Raspberry Pi Pico in 2024 step by step guide.

Step 2: Installing and Setting Up Phew

Open Thonny IDE and Go to Tools ->Manage Packages
In the search box type “micropython-phew” and click on Search Micropython-lib and PyPI
Select and Click on Install to start installing the Phew library to your Raspberry Pi Pico W
Once installed you can notice lib folder would be created on Thonny IDE -> Raspberry Pi Pico W Files

Step 3: Creating an HTML File for Your Raspberry Pi Pico W Web Server

To create a functional and interactive webpage that your Raspberry Pi Pico W can serve, you’ll need to write some HTML code. This webpage will allow you to control the LED through your web browser by simply clicking links or buttons.

Download the index.html file from attachments.

Step 4: Creating Web Server and Blink Onboard LED

Now, let’s get to the exciting part—creating your own Web Server on Raspberry Pi Pico W:

You can download the server.py file from the attachment.

If I have provided a real value for you, consider buying me a coffee☕

That's all, you now just need to run server.py from Thonny, checkout the above blog and video if you stuck at any point.

<!doctype html>
<html lang="en">
    <head>
        <title>Raspberry Pi Pico Web Server</title>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />

        <!-- Bootstrap CSS v5.2.1 -->
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
            crossorigin="anonymous"
        />
    </head>

    <body>
        <header>
            <nav
                class="navbar navbar-expand-sm navbar-dark bg-success"
            >
                <a class="navbar-brand" href="#">&nbsp; Pi Pico Web Server</a>
                 
                
            </nav>
            
        </header>
        <main class="container">
            <div class="d-grid gap-3 p-5">
                <a
                    href="/on"
                    class="btn btn-danger"
                >
                    LED ON
            </a>
                <a
                    href="/off"
                    class="btn btn-success"
                >
                   LED OFF
        </a>
            </div>
            
        </main>
        <footer>
            <!-- place footer here -->
        </footer>
        <!-- Bootstrap JavaScript Libraries -->
        <script
            src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
            integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
            crossorigin="anonymous"
        ></script>

        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
            integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
            crossorigin="anonymous"
        ></script>
    </body>
</html>

from phew import server, connect_to_wifi
import machine

ip = connect_to_wifi("Airtel_RAJEEV","00351553")

print(ip)

page = open("index.html","r")
html= page.read()
page.close()

led = machine.Pin("LED", machine.Pin.OUT)

@server.route("/", methods=["GET"])
def home(request):
    return str(html)

@server.route("/<command>", methods=["GET"])
def command(request, command):
    if command == "on":
        led.on()
    elif command == "off":
        led.off()
    return str(html)

@server.catchall()
def catchall(request):
    return "Page not found", 404

server.run()