Learn how to create a basic web server with the Raspberry Pi Pico W programmed with Arduino IDE using the ESPAsyncWebServer library. In this tutorial, we’ll cover how to serve a simple HTML page.
This example serves as a base that can be expanded into more practical, complex web server applications, using buttons or text fields to control and monitor the RPi Pico pins remotely. We’ll cover that in future tutorials.
This tutorial is only compatible with Raspberry Pi Pico W and Raspberry Pi Pico 2W that come with Wi-Fi support.
Table of Contents
In this tutorial, we’ll cover the following topics:
- Raspberry Pi Pico with Arduino IDE
- Introducing Basic Concepts
- Installing Libraries
- Raspberry Pi Pico Basic Web Server – Hello World
Raspberry Pi Pico with Arduino IDE
You need to install the Raspberry Pi Pico boards in the Arduino IDE and know how to upload code to the board. Check out one of the following tutorials first if you haven’t already:
- Programming Raspberry Pi Pico and Pico W with Arduino IDE
- Programming Raspberry Pi Pico 2 and 2 W with Arduino IDE
Introducing Basic Concepts
Already familiar with basic web server concepts? Jump to the Project Overview section.
The Raspberry Pi Pico as a Web Server
In simple terms, a web server is a “computer” that provides web pages. It stores the website’s files, including all HTML documents and related assets such as images, CSS stylesheets, fonts, and other files. It also brings those files to the user’s web browser device when the user makes a request to the server.
When using the Raspberry Pi Pico as a web server, you’re essentially turning it into a small computer that stores and provides web pages. As users access a web page, their browsers send requests to the Pico using Hypertext Transfer Protocol (HTTP). The Pico then responds by sending back the requested web page.
The Raspberry Pi Pico’s GPIO pins can be controlled or monitored using a web server. When you use a web browser, it sends requests to the Pico, which can then control specific GPIO pins, for example, to turn an LED on or off.
In the same way, the Pico can send responses to the browser with information from its GPIO pins, such as data from a sensor connected to them.
Client and Server
When you type a URL in your browser, in the background, you (the client) send a request via Hypertext Transfer Protocol (HTTP) to a server. When the server receives the request, it sends an HTTP response, and you will see the requested web page in your browser. Clients and servers communicate over a computer network.
In simple terms, clients make requests to servers. Servers handle the clients’ requests. In this particular tutorial, the Raspberry Pi Pico will be the server, and you (your browser) will be the client.
Ip Address
An IP address is a numerical label assigned to each device connected to a computer network. It is a series of four values separated by periods, with each value ranging from 0 to 255. Here’s an example:
192.168.1.75At home, your devices are connected to a private network through your router (local network). All devices connected to your router are part of your local network. Inside this network, each device has its own IP address.
Devices that are connected to the same router can access each other via the IP address. Devices outside your local network can’t access your local devices using their local IP address.
When you connect your Raspberry Pi Pico to your router, it becomes part of your local network. So, it will be assigned a unique local IP address, and you can access it from your computer on your local network.
Installing Libraries
To create a web server (asynchronous) with the Raspberry Pi Pico programmed with Arduino IDE, we’ll use the ESPAsyncWebServer library that is compatible with ESP32, ESP8266, and also RPi Pico (RP2040 and RP2350) and other related boards. For the RPi Pico, you also need to install the RPAsyncTCP library.
So, these are the libraries you need to install in Arduino IDE:
Follow the next instructions to install them.
1) Go to Sketch > Include Library > Manage Libraries or click on the Library Manager icon at the left sidebar.
2) Search for ESPAsyncWebServer and install the ESPAsyncWebServer by ESP32Async.
3) Search for RPAsyncTCP and install the RPAsyncTCP library by Ayush Sharma.
Raspberry Pi Pico Basic Web Server – Hello World
In this example, we’ll create a simple web server that displays some simple HTML text. It shows how to serve simple HTML to create a web page.
- When you access the Raspberry Pi Pico IP address on your web browser -> you’re making a request to the server (the Pico) on the root / URL.
- The Pico responds with some HTML text to build a simple web page (as shown in the picture below).
Raspberry Pi Pico Web Server (serve an HTML page) – Code
The following code builds the web server that serves the web page shown in the previous screenshot.
/*********
Rui Santos & Sara Santos - Random Nerd Tutorials
Complete project details at https://RandomNerdTutorials.com/raspberry-pi-pico-web-server-arduino/
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*********/
// Import required libraries
#include <WiFi.h>
#include <RPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<title>Pico Web Server</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Raspberry Pi Pico Web Server</h1>
<p>Hello, World!</p>
</body>
</html>
)rawliteral";
void setup(){
Serial.begin(115200);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
// Print Pico Local IP Address
Serial.println(WiFi.localIP());
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(200, "text/html", index_html);
});
// Start server
server.begin();
}
void loop() {
}
You need to insert your network SSID and password in the following lines. Then, you can upload the code to your board.
// Replace with your network credentials
const char* ssid = "";
const char* password = "";How Does the Code Work?
Let’s take a quick look at the code to see how it works.
Include Libraries
First, include the required libraries to connect the Pico to your network and create the web server: WiFi, RPAsyncTCP, and ESPAsyncWebServer.
// Import required libraries
#include <WiFi.h>
#include <RPAsyncTCP.h>
#include <ESPAsyncWebServer.h>Network Credentials
Insert your network credentials in the following lines so that the Pico can connect to your network.
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";AsyncWebServer on port 80
Create an AsyncWebServer object called server on port 80.
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);HTML Text
The index_html variable stores the HTML to build the web page and it’s a raw string literal. It goes between R”rawliteral and rawliteral”. This allows you to write a string across multiple lines without the need for escape characters (\n) or “ in each line. This is very convenient to add the HTML text as it is.
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<title>Pico Web Server</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Raspberry Pi Pico Web Server</h1>
<p>Hello, World!</p>
</body>
</html>
)rawliteral";This variable is stored in flash memory (PROGMEM).
We’ll serve the HTML text saved in the index_html variable to build the web page.
setup()
In the setup(), initialize the Serial Monitor at a baud rate of 115200.
void setup(){
Serial.begin(115200);Connect the Pico to your local network using the credentials you’ve added earlier in the code.
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}Print the RPi Pico IP address. Later, you’ll use its IP address to access the web page.
// Print Pico Local IP Address
Serial.println(WiFi.localIP());Handle Requests
The following lines handles the requests made to the Pico on the route / URL. This happens when you write the Pico IP address in the web browser.
When the Pico receives that request, it sends the text saved in the index_html variable to the client.
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(200, "text/html", index_html);
});The parameters of the send() function are as follows:
- 200 HTTP code: indicates the request was received
- text/html: we’re sending a web page in HTML format
- index_html: the content of the web page
Finally, start the web server.
// Start server
server.begin();loop()
Because this web server is asynchronous (the server.on() function will run when a request is received) then we don’t need to add anything to the loop(). However, you can add more code, if that’s needed for your project.
void loop() {
}Uploading the Code to the RPi Pico
To upload code to the Raspberry Pi Pico W, it needs to be in bootloader mode.
If the Raspberry Pi is currently running MicroPython firmware, you need to manually put it into bootloader mode. For that, connect the Raspberry Pi Pico to your computer while holding the BOOTSEL button at the same time. A new mass storage device window will open on your computer. You can ignore it and close that window.
For future uploads using Arduino IDE, the board should go automatically into bootloader mode without the need to press the BOOTSEL button.
Now, open the top drop-down menu and click on Select other board and port…
For the board, select Raspberry Pi Pico W or Raspberry Pi Pico 2W depending on the board you’re using.
The COM port might not show up on your first upload, so you need to tick the Show all ports option. Then, select the UF2 Board UF2 Devices option.
Now, you can upload the code.
You should get a success message.
Serial Monitor
Now, you need to get the Pico IP address. It will be printed in the Serial Monitor.
Open the Serial Monitor at a baud rate of 115200.
Then, unplug the Pico board and plug it back into your computer. It will establish a connection with the Serial Monitor and show its IP address after a few seconds. In my case, it’s 192.168.1.83.
Accessing the Web Server
Now, open a window in your web browser. Type the Pico’s IP address. It will serve the content saved in the index_html variable to build the following web page.
Wrapping Up
In this tutorial, you learned how to create a web server with the Raspberry Pi Pico programmed with Arduino IDE and the ESPASyncWebServer library.
This library is the one we usually use for ESP32 and ESP8266 web servers. The methods and functions for handling the web server on the ESP boards are the same for the RPi Pico.
The only difference is that the RPi Pico also requires you to install the RPAsyncTCP library. So, you can apply most of our ESP32 web server examples to the RPi Pico. Nonetheless, we’ll create more web server projects for the RPi Pico programmed with Arduino IDE.
Learn more about the RPi Pico with our resources:
