ESP32 MicroPython Tutorial: Serving HTML from the file system in Picoweb

The objective of this ESP32 MicroPython Tutorial is to explain how to serve HTML content from the MicroPython file system, on a Picoweb app. The tests were performed using a DFRobot’s ESP32 module device integrated in a ESP32 development board.

Introduction

The objective of this ESP32 MicroPython Tutorial is to explain how to serve HTML content from the MicroPython file system, on a Picoweb app. You can check how to install Picoweb on the ESP32 and how to get started with it on this previous post. The present tutorial will be easier to follow if you have a previous knowledge about how Picoweb works.

For an explanation on how to read a file from the file system with MicroPython, check this post.

The successful execution of this tutorial assumes that the ESP32 was previously connected to a WiFi network, so we can later make requests using a web browser. You can check here how to do it.

The tests were performed using uPyCraft, a MicroPython IDE. You can check how to use uPyCraft in this previous post. Note that uPyCraft greatly simplifies the process of both running scripts and, in our case, uploading files to the file system.

As development platform, the tests were done on a DFRobot’s ESP-WROOM-32 device integrated in a ESP32 FireBeetle board.

The HTML code

As explained in the introductory section, we are going to serve some HTML content from a file in the MicroPython file system. Thus, we are going to create a very simple file called tables.html (you can name it how you like, as long as you use the correct name in the following section) and put there some simple HTML to render a table.

Note that this is just some very basic HTML code and thus, for simplicity, we are not respecting all the good practices of a well formatted HTML document.

	<table>
  <tr>
    <th>sensor</th>
    <th>value</th>
    <th>timestamp</th>
  </tr> 
  <tr>
    <td>temperature</td>
    <td>10</td>
    <td>10:00</td>
  </tr>
  <tr>
    <td>temperature</td>
    <td>11</td>
    <td>11:00</td>
  </tr>
  <tr>
    <td>luminosity</td>
    <td>11</td>
    <td>11:00</td>
  </tr>  
</table>

Note that if you are using uPyCraft, you can upload the HTML file the same way you would upload a script. The only difference is that uPyCraft will not try to run it afterwards. Don’t forget to use the correct .html extension when saving the file before uploading.

The MicroPython code

We start our code by importing the Picoweb module. Then, as usual, we create our app instance, passing as input a string with the name we want to give it.

	import picoweb
app = picoweb.WebApp("app")

For simplicity, we will just set one route to serve the HTML content. We will use the index route, which corresponds to “/”. On the handling function, we will then call the start_response method, passing as input the StreamWriter object that we received as second argument of the route handling function.

Although this is the default value, we will specify the content-type parameter as “text/html”, since this is the content-type we are going to serve. For more on how to specify the content-type returned in the response on a Picoweb app, please consult thisprevious tutorial.

	@app.route("/")
def index(req, resp):
    yield from picoweb.start_response(resp, content_type = "text/html")
    (...)

	htmlFile = open('tables.html', 'r')

	for line in htmlFile:
      yield from resp.awrite(line)

	import picoweb
app = picoweb.WebApp("app")
@app.route("/")
def index(req, resp):
    yield from picoweb.start_response(resp, content_type = "text/html")
    htmlFile = open('tables.html', 'r')
    for line in htmlFile:
      yield from resp.awrite(line)
app.run(debug=True, host = "192.168.1.87")

Testing the code

To test the code, simply upload the previous script for your ESP32 board and run it. If you are using uPyCraft, the script will run automatically. Then, access the URL that is printed on the MicroPython prompt. You should get an output similar to figure 1, which shows the webpage with our HTML rendered.

Figure 1 – Result of accessing the index route, displaying the HTML content of the file from the file system.