The web's omnipresence goes into every corner of our modern life. Very often you will find web based user interfaces for microcontroller powered products and devices. If you are a full stack developer, why not learn a few additional skills and broaden your consulting opportunities.
This hands on tutorial shows how to get started with Embedded Web Server development in 30 minutes using a low cost device.
Web interfaces for the typical industrial device are powered by what is known as an Embedded Web Server, and if you Google this term you will find many servers requiring developing everything on the server side using the C language. Most full stack developers I work with are not C coders. In addition, the typical Embedded Web Server is not a good fit for the modern complex reactive HTML5 based user interfaces. What you need is an Embedded Web Server that supports a high level server side language and server side framework, and that can run on a microcontroller.
Without wasting any time, let's go into the parts you need for getting started.
- ESP32 Wrover (development board cost is in the range $8 to $20)
- USB Cable (use your phone cable)
- The Free SharkSSL IDE
The SharkSSL IDE is tailored towards C programmers; however, you do not need any C programming experience. The SharkSSL IDE includes many examples, but you will only use it to upload the Embedded Web Server example to the ESP32. In a nutshell, you use the SharkSSL IDE to compile and upload another IDE to the ESP32. When uploaded, the ESP32 will present you with a web based IDE that enables full stack development directly on the ESP32 microcontroller. How cool is that!
The Embedded Web Server compiled and uploaded to the ESP32 is the Barracuda App Server and you could download the C source code directly from GitHub, but the ESP32 installation process is difficult if you are not used to embedded programming. The SharkSSL IDE, with its one button click, makes it super easy to compile and upload the server to the ESP32, and you only need to upload it one time.
The Barracuda App Server is like a Swiss army knife since it can be tailored for many different purposes, including embedded web development . The IDE you compile and upload to the ESP32 is called the LSP Application Manager , which includes an IDE that lets full stack developers create server side business logic in the Lua Scripting language. Check out the online interactive LSP and Lua Tutorial for a quick introduction to using the Barracuda App Server. There's also a desktop version of the Barracuda App Server called the Mako Server, and you may want to initially test your first Lua scripts using this server.
The GitHub repo includes several scripts designed for the ESP32. The following video shows some of the things you can do using the ready to run scripts; however, skip the installation process in the video (1:00 to 2:00) since this is taken care of by the SharkSSL IDE. If you watch the video to the end, you will see that you can also edit files directly on the ESP32 using Visual Studio Code (or any editor).