Welcome to our collection of Embedded Web Server tutorials! Here, you'll find everything you need to know about using embedded web servers in a variety of contexts, from tiny event-driven microcontrollers to larger embedded systems like VxWorks, QNX, and Embedded Linux.
Whether you're working with a memory-constrained microcontroller, an RTOS-powered device, or a high-level operating system, our tutorials are here to help. From tips on when not to use an embedded web server to advice on accessing a WebSocket server behind a firewall, we cover a wide range of topics to help you get up and running easily.
Our tutorials and three GitHub-hosted Embedded Web Server projects cover everything from fundamentals to full-scale implementations. If you’re just getting started, scroll down to the beginner projects to build your foundation.
Before embedding a web server in a microcontroller-powered product, think about your goal. Embedding a web server may not be the best solution when using a small microcontroller. To understand why, see the following tutorial:
When Not to Use an Embedded Web Server in a Device
If you're working with a microcontroller with limited memory and need an HTTPS connection, following the Minnow Server's Embedded WebSocket Tutorial may be your only option. This tutorial takes you through the entire process, from designing server-side C code to building a Single Page Application (SPA) front-end with JavaScript.
For microcontrollers with more memory, it's possible to leverage high-level languages better suited for developing web applications. The SPA demo featured in the Minnow Server's Embedded WebSocket Tutorial is provided as an easy-to-digest option in the tutorial Your First Embedded Single Page Application.
Products with embedded web servers are often deployed within private intranets, making them inaccessible from the Internet. When remote access to the user interface is required, the conventional approach involves creating an additional IoT management system alongside the local embedded web interface. But what if you could re-use the local embedded web interface for the IoT management system without writing additional code?
The tutorial Device Management via IoT or Embedded Web Server explores such a solution, explaining how to seamlessly extend a local web interface for remote management while minimizing coding.
We provide a series of hands-on tutorials designed specifically for the ESP32 microcontroller. These tutorials guide you through everything from simple LED blinking to advanced web and IoT projects. What sets these tutorials apart is their focus on the high-level, easy-to-learn Lua programming language. You can explore the full list of Lua tutorials for the ESP32, or if you're interested in embedded web server tutorials, start with these two:
If you have ever Googled "embedded web server" or "embedded web server tutorials," you have likely come across many tutorials on how to create a lightweight webserver to serve static HTML files. Being able to serve static web pages is one of the most fundamental parts of any embedded web server; however, for device management to be practical, we need to look beyond just serving static web pages. In particular, embedded web servers generally must be able to let the web functionality affect the device operation -- the remote browser has to be able to "talk" to the embedded system.
An embeddable application server is a more formalized way of saying an embedded web server that lets you quickly build REST and HTML-based interactive device management applications. See the following to understand the differences between an embedded web server and an embedded application server:
For an embedded developer, the first thing to consider is that the server-side part of the embedded web application must be designed in C code. Although this is very common, it may not be the best solution for many embedded systems. Web applications are very text-heavy, and developing server-side web applications in C code is time-consuming and error-prone. A better solution may be to use an application server that supports a fast and compact scripting language suitable for embedded systems. For efficient scripting in an embedded environment, there’s a scripting language called Lua, and it is specially designed to operate on small (embedded) platforms. It is defined as an extensible language and implemented as a C library that is compiled and linked with your application/firmware. For more information, check out the articles Using Lua for Web Application Development and Why Smart Embedded C Coders Use Lua.
C++ vs. Lua Comparison:
For a practical illustration, consider our C++ WebSocket example on GitHub. The C++ version spans over 200 lines of code, requiring careful management of threads and synchronization. In contrast, the Lua equivalent achieves the same functionality in just 26 lines, thanks to our Cosocket technology, which eliminates the need for complex thread handling. You can review the code yourself; the C++ example includes the Lua version as a comment at the top of the file for easy comparison.
$
Designing a web user interface for embedded devices involves more than just using an embedded web server. For example, besides developing web pages, you will need a menu system with multiple pages for the application to manage navigation and functionality. You will also require secure authentication and many other components. Traditionally, due to the limitations of many embedded web servers, developers have relied on advanced client-side frameworks like React or Angular, communicating with the server using AJAX. While effective, these Single-Page-Application (SPA) frameworks are complex to learn and often require a seasoned web developer. As a result, even a basic embedded web interface can easily cost $50,000 or more to develop.
But what if you, as a C developer, could handle the task without needing expert knowledge of SPA frameworks? That's where the Barracuda App Server comes in. We have developed a free embedded web interface template called the Dashboard App, designed to simplify and fast-track web interface development for embedded devices. This template is suitable for most embedded systems and can easily be customized in terms of style, number of pages, and functionality. With this approach, you can save significant time and money while avoiding the steep learning curve of SPA frameworks. The dashboard also has authentication and an encrypted user database storage solution designed to satisfy the new EU Cyber Resilience Act.
Integration is straightforward when using the Mako Server. The Mako Server is specifically designed to simplify web interface development for embedded Linux environments.
In real-time operating systems (RTOS) environments, the template is typically used via Xedge, a preconfigured Barracuda App Server application environment for deeply embedded systems. Xedge can be compiled for most modern RTOS designs. For further details, visit the Xedge GitHub page.
Some companies opt to offload web interface handling to an ESP32 coprocessor using the precompiled Xedge firmware for ESP32. With this setup, the main processor typically communicates with the ESP32 via a full-duplex serial connection using the ESP32's Lua UART API. Including a coprocessor in the HW design is a good solution if you want to avoid putting time into integrating the Barracuda App Server, you use a bare-metal system, or your device is too limited to run the server.
To help you get started, we provide three tutorials:
When embedding a web server in your device and writing the application, consider these essential requirements:
Our tutorials, and three Embedded Web Server source code projects on GitHub cover everything you need to build a robust, secure, and standards-compliant solution.
Traditional web applications have been processed exclusively on the server side. With the uprising of JavaScript on the client side and many new client-side JavaScript frameworks, many choose to push some or all of the Human Machine Interface (HMI) processing to the client side -- i.e., to the browser. Check out the following tutorial if you are interested in learning more about Single Page Application (SPA) design techniques for device management.
Modern Approach to Embedded Web Server Design
Modern front-end frameworks like ReactJS, Angular, and Vue.js offer powerful tools for building dynamic and user-friendly web applications. This article explores how to integrate these frameworks with any web server, enabling developers to harness the power of SPAs while maintaining a lightweight backend. However, the advantages of these frameworks come with challenges. They often require significant resources, including higher memory and processing power, which may not be ideal for all embedded environments. Additionally, the added complexity of managing a full framework stack can increase development time compared to simpler solutions. This tutorial provides practical guidance for leveraging these tools effectively while addressing the unique considerations of embedded systems.
Using ReactJS, Angular, and Vue.js with any web server
However, using these client frameworks can take months to master. If you've come to realize that modern web development, with all its client-side frameworks, build tools, and state management, often turns even simple projects into complex, time-consuming undertakings, you're not alone. If your goal is to minimize the amount you need to learn while still building responsive, dynamic web interfaces, the htmx + LSP tutorial is precisely what you need. It shows you how to create powerful, interactive web apps using just server-rendered HTML, with no frontend framework required.
You may be looking for a CGI-enabled server if you are old school. In addition to being passé, CGI has several drawbacks, such as several security issues, being slow, and time-consuming development in embedded devices. Older websites were originally implemented using the Common Gateway Interface (CGI). In truth, CGI is only an interface. It is generally cumbersome to manage and requires a full-up OS like Linux that can load external programs, meaning that deep-embedded monolithic systems cannot use CGI. Basic embedded web servers typically specify only function hooks; you must write the functions. With CGI on standard web servers, Perl scripting is very common, but most embedded environments do not support Perl, meaning you must revert to C to get things done. All of this makes CGI an unattractive option. See the following tutorial for more information on why we do not recommend CGI for new design.
Barracuda App Server vs CGI, including CGI security issues
With easy-to-use hacking tools available on Github, anyone can hack your embedded web server-enabled product. Follow along the hack any embedded web server tutorial to learn how shockingly easy it is to hack your devices.
Although the tutorial How to Penetrate MQTT Solutions isn't directly related to embedded web servers, it offers valuable insights on storing credentials on a device, which are highly relevant to embedded web server design.
Shipping products with pre-installed passwords poses a serious security risk, effectively creating a "backdoor" that attackers can exploit. To eliminate this vulnerability, modern authentication solutions like Single Sign-On (SSO) and WebAuthn (FIDO2) offer a more secure and user-friendly alternative.
WebAuthn provides phishing-resistant authentication by replacing passwords with biometric devices and security keys. This ensures strong, hardware-backed security while enhancing user experience. Instead of relying on static passwords that can be compromised, WebAuthn enables multi-factor authentication (MFA) using fingerprints, face scans, or security tokens.
SSO allows users to authenticate once and securely access multiple services without managing separate credentials. By eliminating hardcoded passwords, SSO reduces attack surfaces and simplifies user management for administrators. This centralized approach enhances security, simplifies audits, and ensures compliance with modern cybersecurity standards.
Business logic refers to the higher-level control logic found in most embedded systems, including the logic connecting to IoT services and the server-side components for web and HTTP functionality. While business logic can be implemented in C, it results in considerably longer development times and more complex code than developing in a higher-level language. A more innovative approach is using the Lua programming language, particularly with the Xedge web and IoT framework for embedded systems. Lua simplifies development by reducing the codebase and handling complex logic in high-level, maintainable code, making embedded projects far easier to manage. Many skilled C developers pair C with Lua to streamline embedded programming and achieve more efficient, manageable solutions. To learn more, find out why smart C developers love Lua.
An embedded web server for embedded systems is typically a C library integrated directly into your firmware, enabling devices, such as microcontrollers, to serve web pages and process HTTP requests. However, since Lua is also designed for embedding, we focus on using Lua for device-side development. It dramatically simplifies handling text-based content like HTML and streamlines RESTful and IoT services implementation.
The following tutorials teach essential web fundamentals using ready-to-run example code. They're super easy to set up on your own computer with the Mako Server, or you can run them directly on our ready-to-use Xedge RTOS projects.
The following tutorial is designed for Embedded Linux users.
IoT and embedded web technologies are merging. Learn how to take advantage of both by using a common code base. Our IoT Tutorials explain this in detail.
Our consulting services are your first line of defense when complexities arise in networking, security, or device management. And for those keen to take the reins, our extensive tutorials on embedded web servers and IoT are your perfect companion. With Real Time Logic, expertise meets empowerment. Your vision, our mission.