Svelteesp32

Abstract

1. Introduction

Pack any Svelte, React, Angular, or Vue app into a single C++ header. Serve it straight from ESP32/ESP8266 flash — gzip compressed, ETag cached, OTA-ready.

2. Objective

Pack any Svelte, React, Angular, or Vue app into a single C++ header. Serve it straight from ESP32/ESP8266 flash — gzip compressed, ETag cached, OTA-ready.

This project demonstrates how TypeScript, ESP32, Angular can be applied to a real-world Internet of Things (IoT) problem.

4. Technology Stack

5. System Requirements

General requirements for this technology stack — check the README for exact versions.

• Node.js (LTS) and npm / yarn / pnpm
• VS Code or any code editor
• Git (to clone the repository)

6. Installation & Setup

git clone https://github.com/BCsabaEngine/svelteesp32.git
cd svelteesp32

npm install -D svelteesp32

npx svelteesp32 -e psychic -s ./dist -o ./esp32/svelteesp32.h --etag=always

#include <PsychicHttp.h>
#include "svelteesp32.h"

PsychicHttpServer server;

void setup() {
    server.listen(80);
    initSvelteStaticFiles(&server);
}

npm install -D svelteesp32

Full setup instructions are in the project README.

7. Future Enhancements

Suggested extensions you can add to make this your own project.

• Add a mobile dashboard using Blynk or Firebase
• Store readings in a cloud database for history charts
• Add alerts via SMS / Telegram when thresholds are crossed

8. Viva / Review Questions

Common questions examiners ask for projects in this domain.

1. Which microcontroller / board and sensors are used and why?
2. How does the device send data (Wi-Fi, MQTT, HTTP, Bluetooth)?
3. Where is the sensor data stored and visualised?
4. How is power consumption managed?
5. How would you secure the device and its communication?

9. Source Code & License

This project is developed by BCsabaEngine and published on GitHub under the MIT License. Please follow the license terms and credit the original author when you use or modify this code.