I'm working on many different ESP8266 projects, and because I'm a front end developer I'd like to use react on daily bases to update the UI of my devices. I'd looked around, and found that there isn't any real React based web server tutorial. Here you can find my quick solution. The current build is around .5MB GZIPped. Small enough for an ESP device.
I've created a minimal implementation of a casual ESP8266 UI based on:
-
Skeleton a minimal UI boilerplate also attached if needed
2020-02-14 - Version 0.2.0:
- New build pipeline.
- Using the fully refactored backend, moved to esp-rest. All service calls modified based on this, mostly in the Home view.
- WiFi network connection implemented
- Separate wifi setup routing from the other views. While the ESP8266 in AP mode, only the wifi setup view should be shown.
- Authentication and user management
- SSL/HTTPS integration frontent side
- rjwats for his project: esp8266-react
-
Build Hacking DEPRECATED
To get the base package clone the git library:
git clone https://github.com/montyx99/espReact.git
Step into the cloned folder:
cd espReact
Install the packages:
yarn install
Then run:
yarn start
I'm implemented a backend solution too to host the current files. You can use to test the espReact.
UPDATE Moved the backend to a new repo.
React router is used to handle PWA/SPA like routing. I've thought about many different routers to use, but all of them have issues, that I didn't like, so I've made my decision to use the robust (I know this is huge) router. If someone has the capability to integrate another router, just contribute, and provide a good solution
This is very important in case of ESP devices. The webserver, that I use is a modified ESP8266Webserver. This cannot handle normal browser routing as I experienced. This is the reason why I use the HashRouter in the code
You can find a very beginner API call in the Config component.
I've tried many different UI framework, like Preact, Skeleton, etc. Finally I've chosen the UIkit, because this is:
-
Lightweight enough for ESP devices
-
Modular. You need to import the needed modules with SCSS
-
Easy to customize with SCSS
You can find great examples in index.scss, and other SCSS files both on global, and component level. The UI currently is ugly, and most of the functionality are useless. These are for only demo reasons. Demonstrate, how can you use the SCSS customization in case of UIkit
This is a very important topic. The React uses an excellent bundling solution during the build process.
BUT this is really bad in case of SPIFFS usage of the ESP8266. The SPIFFS can store files which has no longer full path than 32 characters. Also there is no possible way to create folders on the SPIFFS storage. So I had to hack the webpack.config.js of the react-scripts package. You can find the custom webpack.config.js file in the root of my repo. You need to overwrite that you can find in the node_modules/react-scripts/config
folder. This will eliminate the chunk string and the hash from the name of every affected files, and all files will be built into the same folder level. !!! You need to update this manually later. Do not forget about it !!!
I've learned about a reliable solution from a marvelous React base project from a great mind rjwats. His project is the esp8266-react. He has done a great job, and a useful react app with similar ESPAsyncWebserver backend. Just it was done with a different mindset. He attached the backend with the frontend, and I like to handle them separated, so in this case I can replace both of them in the future easily.
The new pipeline uses the react-app-rewired solution. This will make the chunks and the hashes to a short name. You don't need to modify your react webplack config anymore. This is working in an automated way.
Also you can configure your build folder path in the local.settings file
. You just need to create your copy about the local.default.settings file, and remove the .default
from it's name. You can use alternate path, such as ../your_esp8266_repo/data
, so the build pipeline will move the built files directly into your webserver data folder. No more manual copy needed.
This is very important to know, all modern browser (including mobile browsers) can handle gzipped files. My backend can provide gzip files. You can run the following commands to build and gzip all files:
yarn build
will build the files into the build
folder
gzip -r ./build
from the root of the espReact folder will gzip all files one-by-one. This can be served by the backend. Check how to test it in the next chapter
If someone knows how can it be done on Windows, please let me know and I'm going to update Readme :)
The dev dependecies contains an easy to use simple http server, called http-serve
. Use the following command to test your application from the espReact root folder:
http-serve --gzip
Then follow the instructions given by the http-serve
.
I know only the steps for my devices, the ESP8266. My ordered ESP32 devices are not arrived yet, so I cannot test it. But I think (hope) this will be the same.
-
First you need to create a
data
folder in the root of your arduino project. -
Copy over the gzipped files to the
data
folder, except the preacache-manifest file. This is too long, and not used in our case. -
Use the steps from the tutorial of Steve Quinn. Thanks Steve, great job! :)
I know, this is not the prettiest codebase on the Earth. This was done in one single night, but I thought that this will be a great starting point to work together on a better final package for the Makers. I hope that this will be a great help for everyone. I appreciate every feedback, new found issues, and contribution.
Happy coding
-
Solve every opened issues will come
-
API calls (in progress, backend ready)
-
Authentication (backend code in progress)
-
Find contributors to clean up and maintain the code
-
Modularization
-
- Find easy way to change UIkit to another UI framework
-
- Solve to use another routers
Please send a mail, or find me on discord: MonitQ#7059
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject
, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject
at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject
will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject
. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.