React and ESP32

Projects General Guidance
1

Hi,

I want to have a website where I can see my ESP32 live, and read it's data and the sensors as well on that website, preferably a react application
Is there an easy way to do that ?

Thank you,

2

would the client also be connected to the Internet? (getting the react stuff is not practical from the ESP itself)

3

I was thinking of connecting the esp32 to the wifi, and from the wifi to the server or whatever it would be

4

React itself does not require a specific server-side environment. It's a JavaScript library primarily designed for building user interfaces in web browsers. React applications can be served by any web server capable of serving static files so it includes an ESP32 but the sheer size of the resources does not make that realistic

So if you have internet access on the browser, the JavaScript code for React could be hosted elsewhere, such as on a separate web server or a content delivery network and the ESP32 would then serve HTML pages that reference the React JavaScript files hosted externally and the client's web browser then downloads the JavaScript files from the specified URLs and executes them locally to render the React application

if you do something like

    <!-- Include React and ReactDOM from CDN -->
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

that should be sufficient to get started with React (include the React and ReactDOM libraries to define and render React components in the browser

and add the Babel standalone script is included to enable JSX compilation in the browser).

    <!-- Include Babel standalone for JSX compilation -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

to be tested, I don't use that with my Arduino

5

Thank you very much for your time, ill take a look at it

6

You could also use Adafruit IO (or any of a number of other services with a free level) to display your ESP32 data without having to write any server-side code.

7

Thank you ill take a look at it

8

Have you tried Arduino Cloud?
You can actually do what you are describing. You can create interactive dashboards where you can see your variables or change remotely your variables from the dashboards. All that using a wide palette of widgets.

9

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.