https://github.com/r48n34/esp32-simple-react-server

💻 Hosting a web server with esp32 wrover module with SPIFFS, WiFi, ESPAsyncWebServer and ArduinoJson.
https://github.com/r48n34/esp32-simple-react-server

arduino esp32 react server wifi

Last synced: about 2 months ago
JSON representation

💻 Hosting a web server with esp32 wrover module with SPIFFS, WiFi, ESPAsyncWebServer and ArduinoJson.

• Host: GitHub
• URL: https://github.com/r48n34/esp32-simple-react-server
• Owner: r48n34
• Created: 2023-04-07T10:55:38.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-11-12T06:05:02.000Z (over 1 year ago)
• Last Synced: 2025-02-07T20:44:43.269Z (over 1 year ago)
• Topics: arduino, esp32, react, server, wifi
• Language: TypeScript
• Homepage:
• Size: 105 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# esp32-simple-react-server

Hosting a web server with react vite with esp32 wrover module with SPIFFS, WiFi, ESPAsyncWebServer and ArduinoJson.

## Hardware

Module: Teyleten Robot ESP32 30P  

Can be obtain in amazon for around 5.6 USD each.

![ESP32](https://m.media-amazon.com/images/I/71T9th3I59L._AC_SL1500_.jpg)

## Setup

0. Clone the project with:

```bash

git clone https://github.com/r48n34/esp32-simple-react-server.git

```

1. Install the following stuff in your Arduino-IDE Library:    

- `arduino-esp32fs-plugin` For SPIFFS  

https://github.com/me-no-dev/arduino-esp32fs-plugin  

- `ESPAsyncWebServer` For Hosting a simple web server  

https://github.com/lacamera/ESPAsyncWebServer  

- `ArduinoJson` For respond JSON  

https://arduinojson.org/?utm_source=meta&utm_medium=library.properties  

- `HTTPClient` For Fetching  

https://github.com/amcewen/HttpClient  

2. Open the `WiFiCredentials.h` and change the `WIFI_SSID` and `WIFI_PASSWORD` to your local wifi informations.  

3. Install `SPIFFS.h` for the esp32 and upload the website to the SP32 Filesystem.    

https://github.com/me-no-dev/arduino-esp32fs-plugin  

4. Verify the code from `esp32-react.ino` with adruino IDE and complie in the IDE.

## File structure

```

.

└── esp32-react/

    ├── data/ (SPIFFS folder for feeding HTML)

    │   └── react/

    │       └── Stuff that generated with `yarn build` in `src`

    ├── reactWeb/ (React project)

    │   ├── public

    │   ├── src

    │   │   └── ...

    │   ├── index.html

    │   ├── package.json

    │   ├── tsconfig.json

    │   ├── tsconfig.node.json

    │   └── vite.config.ts

    ├── esp32-react.ino   (Main program)

    └── WiFiCredentials.h (Input wifi ssid and password)

```

## References

1. ESP32 Filesystem Uploader  

https://randomnerdtutorials.com/esp32-web-server-spiffs-spi-flash-file-system/