What if the Internet suddenly vanished? Want to be a hero, like Kevin Costner, and bring the Before-Times Wordle to the people wherever you roam? Now you can carry a tiny server in your pocket and bring a web page to the people wherever you are, even if the entire Internet is down!

The ESP32-S2 Feather TFT Web Server can provide a web page to be shared over a local WiFi network or even ad hoc if no network is present. You can serve up the preserved Wordle or any other page you like.

The ESP32-S2 has built in 1MB of storage and USB disk drive access so you can just drag and drop the 'website' right onto the drive for serving - no SD card or special uploader tool required

Add a small battery, switch, and 3D printed case and you're ready to save the day.

Parts

Adafruit ESP32-S2 TFT Feather powered on by a USB- C power source displaying the product tittle in a red, yellow, green, white and blue.
We've got a new machine here at Adafruit, it can uncover your deepest desires. Don't believe me? I'll turn it on right now to prove it to you! What, you want unlimited...
Slim Lithium Ion Polymer Battery 3.7v 400mAh with JST 2-PH connector and short cable
Lithium-ion polymer (also known as 'lipo' or 'lipoly') batteries are thin, light, and powerful. The output ranges from 4.2V when completely charged to 3.7V. This...
Mini Panel Mount SPDT Toggle Switch
This or that, one or the other, perhaps or perhaps not! So hard to make decisions these days without feeling like you're just going back and forth constantly. Deciding whether or...
Black Nylon Screw and Stand-off Set with M2.5 Threads, kit box
Totaling 380 pieces, this M2.5 Screw Set is a must-have for your workstation. You'll have enough screws, nuts, and hex standoffs to fuel your maker...

We've created a drag-and-drop UF2 file to make it easy to get your server up and running right away. If you'd like to tweak the code and upload via Arduino IDE, check out the source code here.

First, you will put CircuitPython on the Feather to create a file system accessible as a USB drive. This way, you can add the web page content and a secrets.json file with login information for the local router. The firmware doesn't have the WiFi access point data, instead its separated out into a json file that can be easily modified

Then, you'll drag on the UF2 file of the compiled Arduino code.

Create Filesystem, Add Files

  1. Plug in Feather to your computer with a known good data cable.
  2. Double-click the Feather board reset button to get to bring up the bootloader FTHRS2BOOT drive in your computer File Explorer/Finder.
  3. Download the latest release version of CircuitPython for this board
  4. Drag the CircuitPython .uf2 file onto FTHRS2BOOT drive (more info here)
  5. After a moment CIRCUITPY drive will show up
  6. Drag on contents of the unzipped reactle folder (linked below) onto the CIRCUITPY drive
  7. Edit secrets.json to use your SSID (name) and password for your WiFi router and save the file to the CIRCUITPY drive

wget Reactle

Reactle is an excellent Wordle clone created with React, Typescript, and Tailwind. You can play it online here, reactle.vercel.app/ 

You can ignore the following and just use the .zip file linked above, or dive in for a bit more info!

In order to serve it from the Feather web server, it needed to first be downloaded. This was the command used:

wget -E -H -k -K -p https://reactle.vercel.app

Note, some operating systems don't ship with wget, so you may need to first install. On a Mac this is typically done with homebrew by typing brew install wget

Once you've wgotten the files, rename the reactle.vercel.app directory to reactle, then copy its contents to the Feather's CIRCUITPY drive. You don't need to copy the index.html.orig file, as it contains absolute paths that were converted by wget's -k (--convert-links) option.

A sample secrets.json is below. You can edit to put your WiFi credentials. Use any text editor to make the changes, just be sure to change the WiFi credentials to those where you are. Then copy them to the board.

{
    "ssid" : "MY_SSID",
    "password" : "MY_PASSWORD",
    "ap" : "wordguesser",
    "ap_password" : "guessing",
    "hostname" : "wordguesser"
}

You drive will look like this:

Flash Drive with Web Server UF2

  • Double-click the Feather's reset button to go to bootloader mode
  • Download the UF2 file linked below
  • Drag the wordguesser.UF2 to the FTHRS2BOOT drive

 

When the Feather restarts it will automatically connect to the WiFi router and launch the Web Server!

Images here were created using a wgotten Wordle, but yours should show Reactle instead. This is normal.

Connect

Now, point any computer or mobile device on your network at wordguesser.local to connect to the server.

Access Point

If the Feather can't connect to a network it will create an ad hoc network with the access point: wordly  (as displayed on the screen) password: guessing

Gameplay

For a complete mobile server solution, you'll want to add a rechargeable LiPo battery and on/off switch to the Feather. The simplest switching solution is to use the Enable pin on the Feather.

You can also 3D print a case to neaten it all up. Or just put it loose in your pocket or backpack.

Enable Switch

Use two short wires to solder the switch to the Enable pin and GND pin on the Feather. When these are shorted, the Feather will power off.

Case

Download and print the two case models linked below.

Insert Switch, Feather, and Battery

Insert the switch into the case and screw on a hex nut to secure it.

Connect the battery to the Feather and then add them to the case.

Fasten Feather to Case

Use M2.5 screws and standoffs to secure the Feather in the case.

Close Case

Screw the base lid into the standoffs.

 

This guide was first published on Mar 10, 2022. It was last updated on Mar 08, 2024.