Giter Site home page Giter Site logo

tharushaudana / esp_react_hosting Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 516 KB

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.

License: MIT License

C++ 81.28% HTML 18.72%
arduino esp32 esp8266 littlefs web web-hosting arduino-react react-esp react-hosting

esp_react_hosting's Introduction

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:

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.

esp_react_hosting's People

Contributors

tharushaudana avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.