This project demonstrates how to host a React web application using an ESP32 or ESP8266 microcontroller, along with using LittleFS to manage the file system for storing web content.
To get started with this project, you'll need to install the LittleFS uploader plugin for the Arduino IDE. Follow the appropriate instructions based on your Arduino IDE version:
- Arduino IDE v2: Tutorial for installing ESP32 LittleFS
- Arduino IDE below v2: Tutorial for installing ESP8266 NodeMCU LittleFS
After installing the LittleFS uploader plugin, you can use it to upload the web content for your React application to the ESP32 or ESP8266 file system. Follow these steps:
- Build your React application to create the production build files.
- Create a folder named
data
in your Arduino project directory. - Copy all the build files (from the
build
folder of your React project) into thedata
folder in your Arduino project directory. Yourdata
folder should now contain all the static files (HTML, CSS, JavaScript) and assets (images, fonts) of your React application. - Use the LittleFS uploader plugin to upload the contents of the
data
folder to the ESP32 or ESP8266 file system. This will transfer all your React build files to the microcontroller's file system.
Once you have uploaded the web content to the ESP32 or ESP8266 file system, you can flash the microcontroller with the Arduino sketch provided in this project. The sketch will serve the web content to clients accessing the ESP32 or ESP8266.
To access the React application hosted on the ESP32 or ESP8266, connect to the microcontroller's Wi-Fi network and open a web browser. Enter the IP address of the microcontroller to access the web application.
This project is licensed under the MIT License.