# Personal and Portable ESP32-S2 Web Server

## Overview

![](https://cdn-learn.adafruit.com/assets/assets/000/109/523/medium800/gaming_wordle-7520.jpg?1646785118)

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.

![](https://cdn-learn.adafruit.com/assets/assets/000/109/521/medium800/gaming_wordleman.jpg?1646784863)

## Parts
### Adafruit ESP32-S2 TFT Feather - 4MB Flash, 2MB PSRAM, STEMMA QT

[Adafruit ESP32-S2 TFT Feather - 4MB Flash, 2MB PSRAM, STEMMA QT](https://www.adafruit.com/product/5300)
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 mozzarella sticks? OK well, that's not something we can provide. But we can provide your...

Out of Stock
[Buy Now](https://www.adafruit.com/product/5300)
[Related Guides to the Product](https://learn.adafruit.com/products/5300/guides)
![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. ](https://cdn-shop.adafruit.com/640x480/5300-06.jpg)

### Lithium Ion Polymer Battery Ideal For Feathers - 3.7V 400mAh

[Lithium Ion Polymer Battery Ideal For Feathers - 3.7V 400mAh](https://www.adafruit.com/product/3898)
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 battery has a capacity of **400mAh** for a total of about 1.9 Wh. If you need a larger (or smaller!)...

In Stock
[Buy Now](https://www.adafruit.com/product/3898)
[Related Guides to the Product](https://learn.adafruit.com/products/3898/guides)
![Slim Lithium Ion Polymer Battery 3.7v 400mAh with JST 2-PH connector and short cable](https://cdn-shop.adafruit.com/640x480/3898-05.jpg)

### Mini Panel Mount SPDT Toggle Switch

[Mini Panel Mount SPDT Toggle Switch](https://www.adafruit.com/product/3221)
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 not to use this mini toggle switch? That's the easiest decision you'll make all day!

This...

In Stock
[Buy Now](https://www.adafruit.com/product/3221)
[Related Guides to the Product](https://learn.adafruit.com/products/3221/guides)
![Angled shot of blue, mini, SPDT toggle switch.](https://cdn-shop.adafruit.com/640x480/3221-01.jpg)

### Black Nylon Machine Screw and Stand-off Set – M2.5 Thread

[Black Nylon Machine Screw and Stand-off Set – M2.5 Thread](https://www.adafruit.com/product/3299)
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 tendencies for days on end! M2.5 size screws fit almost all of the Adafruit breakout/dev board mounting holes...

Out of Stock
[Buy Now](https://www.adafruit.com/product/3299)
[Related Guides to the Product](https://learn.adafruit.com/products/3299/guides)
![Black Nylon Screw and Stand-off Set with M2.5 Threads, kit box](https://cdn-shop.adafruit.com/640x480/3299-00.jpg)

# Personal and Portable ESP32-S2 Web Server

## Create the Web Server

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](https://github.com/adafruit/Adafruit_Learning_System_Guides/blob/main/Adafruit_ESP32S2_TFT_WebServer/Adafruit_ESP32S2_TFT_WebServer.ino).**

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](https://circuitpython.org/board/adafruit_feather_esp32s2_tft/)
4. Drag the CircuitPython .uf2 file onto **FTHRS2BOOT** drive ([more info here](https://learn.adafruit.com/adafruit-esp32-s2-tft-feather/circuitpython))
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](https://github.com/cwackerfuss/react-wordle) is an excellent Wordle clone created with React, Typescript, and Tailwind. You can play it online here, [reactle.vercel.app/](https://reactle.vercel.app/ "https://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.

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

You drive will look like this:

![](https://cdn-learn.adafruit.com/assets/assets/000/109/603/medium800/projects_drive2.jpg?1646877920)

## 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

 

[wordguesser.UF2](https://cdn-learn.adafruit.com/assets/assets/000/109/577/original/wordguesser.UF2?1646791725)
When the Feather restarts it will automatically connect to the WiFi router and launch the Web Server!

![](https://cdn-learn.adafruit.com/assets/assets/000/109/567/medium800/gaming_wordle-7520.jpg?1646789306)

Info: 

## Connect

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

![gaming_wordle-7503.jpg](https://cdn-learn.adafruit.com/assets/assets/000/109/569/medium640/gaming_wordle-7503.jpg?1646789728)

![gaming_wordle-7506.jpg](https://cdn-learn.adafruit.com/assets/assets/000/109/570/medium640/gaming_wordle-7506.jpg?1646789774)

## 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`

![gaming_IMG_5751.jpg](https://cdn-learn.adafruit.com/assets/assets/000/109/576/medium640/gaming_IMG_5751.jpg?1646790754)

## Gameplay
![](https://cdn-learn.adafruit.com/assets/assets/000/109/575/medium800thumb/gaming_wrdl_anim.jpg?1646789880)

# Personal and Portable ESP32-S2 Web Server

## Build the Server Case

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.

![gaming_wordle-7534.jpg](https://cdn-learn.adafruit.com/assets/assets/000/109/524/medium640/gaming_wordle-7534.jpg?1646785381)

![gaming_wordle-7533.jpg](https://cdn-learn.adafruit.com/assets/assets/000/109/525/medium640/gaming_wordle-7533.jpg?1646785390)

## Case

Download and print the two case models linked below.

![gaming_case.jpg](https://cdn-learn.adafruit.com/assets/assets/000/109/532/medium640/gaming_case.jpg?1646785796)

[wrdl_case.stl](https://cdn-learn.adafruit.com/assets/assets/000/109/526/original/wrdl_case.stl?1646785519)
[wrdl_base.stl](https://cdn-learn.adafruit.com/assets/assets/000/109/531/original/wrdl_base.stl?1646785522)
![](https://cdn-learn.adafruit.com/assets/assets/000/109/535/medium800/gaming_wordle-7532.jpg?1646785829)

## 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.

![gaming_wordle-7531.jpg](https://cdn-learn.adafruit.com/assets/assets/000/109/537/medium640/gaming_wordle-7531.jpg?1646785855)

![gaming_wordle-7530.jpg](https://cdn-learn.adafruit.com/assets/assets/000/109/538/medium640/gaming_wordle-7530.jpg?1646785890)

![gaming_wordle-7529.jpg](https://cdn-learn.adafruit.com/assets/assets/000/109/539/medium640/gaming_wordle-7529.jpg?1646785920)

![gaming_wordle-7528.jpg](https://cdn-learn.adafruit.com/assets/assets/000/109/540/medium640/gaming_wordle-7528.jpg?1646785928)

## Fasten Feather to Case

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

![gaming_wordle-7527.jpg](https://cdn-learn.adafruit.com/assets/assets/000/109/541/medium640/gaming_wordle-7527.jpg?1646785961)

![gaming_wordle-7526.jpg](https://cdn-learn.adafruit.com/assets/assets/000/109/542/medium640/gaming_wordle-7526.jpg?1646786001)

![](https://cdn-learn.adafruit.com/assets/assets/000/109/548/medium800/gaming_wordle-7525.jpg?1646786027)

## Close Case

Screw the base lid into the standoffs.

 

![gaming_wordle-7524.jpg](https://cdn-learn.adafruit.com/assets/assets/000/109/553/medium640/gaming_wordle-7524.jpg?1646786041)

![gaming_wordle-7521.jpg](https://cdn-learn.adafruit.com/assets/assets/000/109/554/medium640/gaming_wordle-7521.jpg?1646786092)

![](https://cdn-learn.adafruit.com/assets/assets/000/109/563/medium800/gaming_wordle-7523.jpg?1646786129)


## Featured Products

### Adafruit ESP32-S2 TFT Feather - 4MB Flash, 2MB PSRAM, STEMMA QT

[Adafruit ESP32-S2 TFT Feather - 4MB Flash, 2MB PSRAM, STEMMA QT](https://www.adafruit.com/product/5300)
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 mozzarella sticks? OK well, that's not something we can provide. But we can provide your...

Out of Stock
[Buy Now](https://www.adafruit.com/product/5300)
[Related Guides to the Product](https://learn.adafruit.com/products/5300/guides)
### Lithium Ion Polymer Battery Ideal For Feathers - 3.7V 400mAh

[Lithium Ion Polymer Battery Ideal For Feathers - 3.7V 400mAh](https://www.adafruit.com/product/3898)
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 battery has a capacity of **400mAh** for a total of about 1.9 Wh. If you need a larger (or smaller!)...

In Stock
[Buy Now](https://www.adafruit.com/product/3898)
[Related Guides to the Product](https://learn.adafruit.com/products/3898/guides)
### Mini Panel Mount SPDT Toggle Switch

[Mini Panel Mount SPDT Toggle Switch](https://www.adafruit.com/product/3221)
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 not to use this mini toggle switch? That's the easiest decision you'll make all day!

This...

In Stock
[Buy Now](https://www.adafruit.com/product/3221)
[Related Guides to the Product](https://learn.adafruit.com/products/3221/guides)
### Black Nylon Machine Screw and Stand-off Set – M2.5 Thread

[Black Nylon Machine Screw and Stand-off Set – M2.5 Thread](https://www.adafruit.com/product/3299)
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 tendencies for days on end! M2.5 size screws fit almost all of the Adafruit breakout/dev board mounting holes...

Out of Stock
[Buy Now](https://www.adafruit.com/product/3299)
[Related Guides to the Product](https://learn.adafruit.com/products/3299/guides)

## Related Guides

- [Adafruit ESP32-S2 TFT Feather](https://learn.adafruit.com/adafruit-esp32-s2-tft-feather.md)
- [Robotic AI Bear using ChatGPT](https://learn.adafruit.com/robotic-ai-bear-using-chatgpt.md)
- [RP2040 RunCPM Emulator with USB Keyboard & HDMI screen](https://learn.adafruit.com/rp2040-runcpm-emulator-with-usb-keyboard-hdmi-screen.md)
- [Arcade Bonnet Controller](https://learn.adafruit.com/arcade-bonnet-controller.md)
- [Feather Fingerboard](https://learn.adafruit.com/feather-fingerboard.md)
- [Adabot Toy Robot Friend](https://learn.adafruit.com/adabot-rp2040.md)
- [Adafruit IO Basics: Analog Input](https://learn.adafruit.com/adafruit-io-basics-analog-input.md)
- [USB to Eurorack Power Supply](https://learn.adafruit.com/usb-to-eurorack-power-supply.md)
- [Qualia S3 Compass](https://learn.adafruit.com/qualia-s3-compass.md)
- [Solderless Robot Toy Xylophone](https://learn.adafruit.com/solderless-robot-toy-xylophone.md)
- [Mini LED Matrix Audio Visualizer](https://learn.adafruit.com/mini-led-matrix-audio-visualizer.md)
- [Homefruit FeatherWing Tester](https://learn.adafruit.com/homefruit-featherwing-tester.md)
- [New Years Eve Ball Drop](https://learn.adafruit.com/new-years-eve-ball-drop.md)
- [RGB LED Matrix Cube with 25,000 LEDs](https://learn.adafruit.com/rgb-led-matrix-cube-for-pi.md)
- [USB C Power Delivery Monitor](https://learn.adafruit.com/usb-c-benchtop-power-supply.md)
- [Remote Control Candy Dispenser Ghost](https://learn.adafruit.com/ble-claw.md)