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

This guide was first published on Mar 10, 2022. It was last updated on 2022-03-10 10:48:47 -0500.

This page (Create the Web Server) was last updated on May 20, 2022.

Text editor powered by tinymce.