Embedded Web Server Tutorials

The Ultimate Guide to Embedded Web Server (HTTP Server) and IoT Technology

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.

Definitions:

  • Metal: Applicable to bare-metal devices
  • RTOS: Applicable to Real Time Operating System powered devices
  • HLOS: Applicable to High-Level Operating Systems such as Embedded Linux, QNX, and VxWorks

When Not to Use an Embedded Web Server in a Microcontroller (RTOS/Metal)

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

Embedding a Web Server in a Microcontroller (RTOS/Metal)

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.

IoT & WebSockets Behind Firewall (RTOS/Metal)

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?

Embedded Web Server and WebSockets Behind Firewall

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.

ESP32 Tutorials (RTOS) - FreeRTOS & LwIP

The Embedded Web Server Xedge32

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:

ESP32 Embedded Web Server Tutorials

Embedded Web Server vs. Embedded Application Server (HLOS/RTOS)

Embedded Web Server vs. Embedded Application Server

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:

Develop the web application using C, C++, or by using a high level language? (HLOS/RTOS)

Using Lua for Embedded Web Server Development

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.

The Cost of Developing a Web Interface for Embedded Devices (HLOS/RTOS/Metal)

$

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.

How to Integrate the Dashboard App

Option 1: Embedded Linux and other HLOS

Integration is straightforward when using the Mako Server. The Mako Server is specifically designed to simplify web interface development for embedded Linux environments.

Option 2: RTOS

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.

Dashboard Tutorials

To help you get started, we provide three tutorials:

  1. How the Dashboard Works and How to Customize It
    Learn the ins and outs of the Dashboard template and how to tailor it to your specific needs.
  2. Using the Dashboard with Embedded Linux
    A step-by-step guide to integrating the Dashboard App in an embedded Linux environment.
  3. Controlling a servo in real time using a microcontroller
    Explains what an embedded web interface is and shows how to use the Dashboard App for web-based real-time servo control using an ESP32.

Key Considerations for Embedded Web Server Development

When embedding a web server in your device and writing the application, consider these essential requirements:

  • Login and Authorization: How will you implement secure login and authorization logic?
  • Regulatory Compliance: How will you manage new government mandates, such as prohibiting default credentials?
  • User Management: How many users need access, and how will you securely store and maintain this data?
  • Navigation: How will you design the web-based navigation menu if your application has multiple pages?
  • Site Architecture: Will you create a server-side generated site or a Single Page Application (SPA)?
  • Concurrency: Are you using an RTOS? If not, how will you handle the concurrent nature of network programming?
  • Synchronization: How will you manage synchronization in an RTOS environment using C code?
  • Programming Language: Is C the best choice, or can you use alternative languages that offer a more intuitive and safer API that can coexist with your C code?

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.

Reactive Single Page Application and WebSockets (HLOS/RTOS)

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

Using Modern Web Frameworks such as AngularJS, ReactJS, and Vue.js (HLOS/RTOS)

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

What about CGI? (HLOS)

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


The elephant in the room for embedded web server security (HLOS/RTOS/Metal)

Hacking your embedded web server

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.

Eliminating Pre-Installed Password Risks with Modern Authentication (HLOS/RTOS)

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 (FIDO2) - A Passwordless Future

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.

Biometric Authentication for Embedded Web Servers
  • To see how WebAuthn (FIDO2) can be integrated into embedded systems, check out our WebAuthn & Biometric Authentication Introduction. This guide walks you through implementing passwordless authentication in embedded web servers and microcontrollers.

Single Sign-On (SSO) - Secure & Centralized Access

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.

Single Sign On for Embedded Web Servers and Microcontrollers

Why do we promote the Lua programming language? (HLOS/RTOS)

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.

C business logic

Easy Embedded Web Server Beginner Projects

What Is an Embedded Web Server?

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 Tutorials and Web of Things (HLOS/RTOS/Metal)

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.


Posted in Whitepapers

Want Expert Eyes on Your Project?

Navigating the world of embedded web servers and IoT can be daunting. Our consulting services are here to provide instant expertise. But our tutorials are ready if you're looking for a self-paced journey. Every challenge, every ambition, we've got your back.



OPC-UA

OPC-UA Client & Server

An easy to use OPC UA stack that enables bridging of OPC-UA enabled industrial products with cloud services, IT, and HTML5 user interfaces.

Edge Controller

Edge Controller

Use our user programmable Edge-Controller as a tool to accelerate development of the next generation industrial edge products and to facilitate rapid IoT and IIoT development.

On-Premises IoT

On-Premises IoT Platform

Learn how to use the Barracuda App Server as your On-Premises IoT Foundation.

Embedded Web Server

Barracuda Embedded Web Server

The compact Web Server C library is included in the Barracuda App Server protocol suite but can also be used standalone.

WebSocket Server

Microcontroller Friendly

The tiny Minnow Server enables modern web server user interfaces to be used as the graphical front end for tiny microcontrollers. Make sure to check out the reference design and the Minnow Server design guide.

WebDAV Server

Network File System

Why use FTP when you can use your device as a secure network drive.

HTTP Client

Secure HTTP Client Library

PikeHTTP is a compact and secure HTTP client C library that greatly simplifies the design of HTTP/REST style apps in C or C++.

WebSocket Client

Microcontroller Friendly

The embedded WebSocket C library lets developers design tiny and secure IoT applications based on the WebSocket protocol.

SMTP Client

Secure Embedded SMTP Library

Send alarms and other notifications from any microcontroller powered product.

Crypto Library

RayCrypto C Library

The RayCrypto engine is an extremely small and fast embedded crypto library designed specifically for embedded resource-constrained devices.

Embedded PKI Service

Automatic SSL Certificate Management for Devices

Real Time Logic's SharkTrust™ service is an automatic Public Key Infrastructure (PKI) solution for products containing an Embedded Web Server.

Modbus

Modbus TCP client

The Modbus client enables bridging of Modbus enabled industrial products with modern IoT devices and HTML5 powered HMIs.


OSZAR »