https://github.com/tharushaudana/esp_react_hosting

Host a React web application using an ESP32 or ESP8266 microcontroller with this project. Utilizes LittleFS for file system management. Access your application over Wi-Fi.
https://github.com/tharushaudana/esp_react_hosting

arduino arduino-react esp32 esp8266 littlefs react-esp react-hosting web web-hosting

Last synced: about 2 months ago
JSON representation

Host a React web application using an ESP32 or ESP8266 microcontroller with this project. Utilizes LittleFS for file system management. Access your application over Wi-Fi.

• Host: GitHub
• URL: https://github.com/tharushaudana/esp_react_hosting
• Owner: tharushaudana
• License: mit
• Created: 2024-05-16T17:07:10.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-06-28T03:49:06.000Z (6 months ago)
• Last Synced: 2024-06-28T04:47:45.463Z (6 months ago)
• Topics: arduino, arduino-react, esp32, esp8266, littlefs, react-esp, react-hosting, web, web-hosting
• Language: C++
• Homepage:
• Size: 503 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Arduino ESP32/ESP8266 Host React with LittleFS

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.

## Getting Started

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](https://randomnerdtutorials.com/arduino-ide-2-install-esp32-littlefs/)

- **Arduino IDE below v2**: [Tutorial for installing ESP8266 NodeMCU LittleFS](https://randomnerdtutorials.com/install-esp8266-nodemcu-littlefs-arduino/)

## Uploading Web Content

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:

1. Build your React application to create the production build files.

2. Create a folder named `data` in your Arduino project directory.

3. Copy all the build files (from the `build` folder of your React project) into the `data` folder in your Arduino project directory. Your `data` folder should now contain all the static files (HTML, CSS, JavaScript) and assets (images, fonts) of your React application.

4. 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.

## Flashing the ESP32/ESP8266

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.

## Usage

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.

## License

This project is licensed under the [MIT License](LICENSE).