ESP32 WebServer with Svelte

Example project demonstrating how to use Svelte with an ESP32 web server using the svelteesp32 library.

Repository author: Bence Csaba

GitHub: https://github.com/BCsabaEngine/svelteesp32

Installation

Install the npm package for development:

pnpm add svelteesp32

Or using npm:

npm install svelteesp32

Arduino IDE Setup

Before using this library, you need to install the following external libraries in Arduino IDE:

Required Libraries

1. ESPAsyncWebServer (v3.8.1 or higher)

   • URL: https://github.com/ESP32Async/ESPAsyncWebServer
   • Install via Arduino Library Manager or download from GitHub

2. AsyncTCP (v3.4.9 or higher)

   • URL: https://github.com/ESP32Async/AsyncTCP
   • Install via Arduino Library Manager or download from GitHub

Installation Steps

1. Open Arduino IDE
2. Go to Sketch → Include Library → Manage Libraries
3. Search for "ESPAsyncWebServer" and install version 3.8.1+
4. Search for "AsyncTCP" and install version 3.4.9+

Alternatively, you can download the libraries directly from GitHub and place them in your Arduino libraries folder.

Usage Example

1. Install and Setup Svelte Project

npm create svelte@latest my-esp32-project
cd my-esp32-project
npm install
npm install -D svelteesp32

2. Build Your Svelte App

npm run build

3. ESP32 Arduino Code

##include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include "svelteesp32.h"

AsyncWebServer server(80);

const char* ssid = "**********";
const char* pass = "**********";

void setup() {
  Serial.begin(115200);
  
  // Conectar WiFi
  WiFi.begin(ssid, pass);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nWiFi conectado");
  Serial.print("IP: ");
  Serial.println(WiFi.localIP());
  
  // Inicializar archivos estáticos
  initSvelteStaticFiles(&server);
  
  // Iniciar servidor
  server.begin();
  
  Serial.println("Servidor iniciado");
}

void loop() {
  // Tu código aquí
}

4. Svelte Component Example

// src/routes/+page.svelte
<script lang="ts">
  import svelteLogo from './assets/svelte.svg'
  import viteLogo from '/vite.svg'
  import Counter from './lib/Counter.svelte'
</script>

<main>
  <div>
    <a href="https://vite.dev" target="_blank" rel="noreferrer">
      <img src={viteLogo} class="logo" alt="Vite Logo" />
    </a>
    <a href="https://svelte.dev" target="_blank" rel="noreferrer">
      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
    </a>
  </div>
  <h1>Vite + Svelte</h1>

  <div class="card">
    <Counter />
  </div>

  <p>
    Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Vite!
  </p>

  <p class="read-the-docs">
    Click on the Vite and Svelte logos to learn more
  </p>
</main>

<style>
  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
  }
  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
  .logo.svelte:hover {
    filter: drop-shadow(0 0 2em #ff3e00aa);
  }
  .read-the-docs {
    color: #888;
  }
</style>

Features

• Easy integration between Svelte frontend and ESP32 backend
• RESTful API support
• Real-time status monitoring
• Responsive web interface
• SPIFFS file system support for serving static files