ESP Reactle

I wanted a friendly replacement for the adafruit wordle clone and be able to upload it using drag and drop through circuit python.

Getting started

Table of Contents

• Quick Start
• From Scratch
• Configuration
• File Structure

Intro

Inspired by a port of wordle on adafruit with broken link and github user rabinkaspal. We have simple vite react wordle clone with chunking enabled;

Quick Start

# clone project
gh repo clone FriendlyNGeeks/esp-reactle
# install dependancies
npm install
# run local test server
npm run dev
# build for deployment(esp32)
npm run build

From Scratch

Template Examples

# scaffolding
npm create vite@latest my-vue-app -- --template preact

Configuration

\circuitpy\config.json MODE [WIFI/AP] swaps between connecting to existing network and AD-HOC(Stand-alone)

App.css contains stylization for the entire app.

\src\data\dictionary.js contains all words and definitions (trimmed for chunk size to fit esp32)

vite.config.ts contains splitVendorChunkPlugin rollupOptions REQUIRED, which splits node_modules, components, hooks, views, and data files to keep them small enough to upload to an ESP32 chip with 8MB Flash.

• vite.config.ts

import { defineConfig, splitVendorChunkPlugin } from "vite";
import preact from "@preact/preset-vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [preact(), splitVendorChunkPlugin()],
  build:{
    emptyOutDir: true,
    manifest: true,
    minify: true,
    polyfillModulePreload: false,
    rollupOptions: {
      output: {
        manualChunks(id:any) {
          if (id.includes('node_modules')) {
            return 'vendor'; // Split vendor libraries
          }
          if (id.includes('src/components/')) {
            return 'components'; // Split components into their own chunk
          }
          if (id.includes('src/hooks/')) {
            return 'hooks'; // Split hooks into their own chunk
          }
          if (id.includes('src/views/')) {
            return 'views'; // Split views into their own chunk
          }
          if (id.includes('src/data/')) {
            return 'data'; // Split data into their own chunk
          }
        },
      },
    },
    sourcemap: false,
  },
  resolve: {
    alias: {
      react: "preact/compat",
      "react-dom": "preact/compat",
    },
  },
  server: {
    proxy: {
      "/api": "http://my-esp32.local",
    },
  },
});

On Device File Structure

CIRCUITPY:{
  _www:{
    assets: [...]
    index.html
  }
  captive_portal: {
    __init__.py
    server.py
  }
  esp_portal: {
    __init__.py
    server.py
  }
  lib: {
    adafruit_httpserver: [...]
  }
  utils: {
    __init__.py
    mdns.py
    wifi.py
  }
  config.json
  settings.toml 
}