ben

Posted on Mar 9

MAUI Embedded Web Architecture Practice (1) Running PicoServer Local Web Service in MAUI Applications

#maui #dotnet #csharp

In traditional mobile or desktop applications, the client is usually just a consumer that calls remote APIs.
However, with the development of Hybrid App and web technologies, a new architectural pattern has gradually become popular:

Embedding a Web Server in local applications.

In this way, the application itself can provide HTTP services, such as:

Local REST API
Web Admin management backend
WebView Hybrid App
LAN device control
PWA offline system

In the .NET ecosystem, we can implement this architecture using .NET MAUI + PicoServer.

This series will build a complete MAUI embedded web architecture system through practical hands-on implementation.

Through this series, you will learn to:

Run a local Web Server in MAUI
Build a REST API framework
Develop a Web Admin management backend
Construct a Hybrid App architecture
Implement a PWA offline system

As the first article in the series, this piece will first complete the most fundamental step:
Running the PicoServer local HTTP service in a MAUI application.

I. Core Architecture

After embedding a Web Server in MAUI, the application architecture becomes:

Browser / WebView
        │
        │ HTTP
        ▼
   PicoServer
        │
   Local REST API
        │
     MAUI App

In other words:
A MAUI application is not only a client but also a web server.

The advantages of this architecture are very obvious:

Advantage	Description
Cross-platform	Windows / Android / iOS
Local API	Direct calls from WebView
Easy development	UI built with web technologies
High scalability	Can build a complete Web Admin

In subsequent chapters, we will gradually extend this architecture.

II. Technology Introduction

1. .NET MAUI

.NET MAUI (Multi-platform App UI) is a cross-platform application development framework launched by Microsoft, used to build applications for:

Windows
Android
iOS
macOS

Developers can use:

C#
XAML

to build cross-platform UIs and share a large amount of business code.

Core features of .NET MAUI include:

Single project structure with multi-platform compilation
Native performance
Deep integration with the .NET ecosystem
Support for WebView / Blazor / ASP.NET Core

Official website:
https://dotnet.microsoft.com/en-us/apps/maui

2. PicoServer

PicoServer is a lightweight embedded web server component based on .NET.

Its design goal is:

To quickly launch an HTTP service inside an application.

PicoServer is implemented based on HttpListenerand has the following features:

Lightweight embedded Web Server
Support for HTTP route mapping
Suitable for local APIs
Support for Web Admin
Support for LAN access

Typical application scenarios include:

Local device control interfaces
Web management backends
Hybrid App APIs
Debugging interfaces

Official website:
https://picoserver.cn/

III. Embedding PicoServer in MAUI

Below, we will demonstrate how to run PicoServer in a MAUI application through a simple example.

Supporting source code:
https://github.com/densen2014/MauiPicoAdmin

IV. Creating a MAUI Project

First, create a standard MAUI project.

In Visual Studio:

File
→ New Project
→ .NET MAUI App

After creation, you will get a default sample page.

V. Installing PicoServer

Next, install PicoServer via NuGet.

Steps:

Right-click the project
Manage NuGet Packages
Search for PicoServer
Click Install

VI. Starting PicoServer

Next, we run PicoServer when the application starts.

Open the file:
MauiProgram.cs

Add the following code before MauiApp.CreateBuilder():

var picoAdmin = new PicoAdmin();

This will run PicoServer when the application starts.

VII. Creating a PicoServer Service

Next, create a simple server class:

public class PicoAdmin
{
    private readonly WebAPIServer MyAPI = new WebAPIServer();

    public PicoAdmin()
    {
        MyAPI.AddRoute("/", Hello);
        MyAPI.StartServer();
    }

    private async Task Hello(HttpListenerRequest request, HttpListenerResponse response)
    {
        await response.WriteAsync("Hello PicoServer");
    }
}

The code logic is very simple:

Step	Description
Create server	WebAPIServer
Add route	/
Handle request	Hello()
Start service	StartServer()

VIII. Running Tests

First, run on the Windows platform.

After launching the program, access the following address in a browser:
http://127.0.0.1:8090

If the page displays:
Hello PicoServer

It indicates:

The MAUI application started successfully
PicoServer is running successfully
The local HTTP service is working properly

IX. Running on Mobile Platforms

This example can run not only on Windows but also on:

Android
iOS
macOS

After running on Android or iOS, you can access it via:
http://[Device IP]:8090

X. Running Principle

The entire running process is as follows:

MAUI App Start
        │
        ▼
   PicoAdmin
        │
        ▼
   PicoServer
        │
        ▼
 HttpListener
        │
        ▼
   HTTP Request

In other words:
The MAUI application starts a local Web Server at the same time it launches.
All subsequent HTTP requests are processed by PicoServer.

XI. Summary

Through this article, we have completed a key step:
Embedding the PicoServer web service in a MAUI application.

The implemented content includes:

Running an HTTP Server in MAUI
Adding simple routes
Accessing local APIs via a browser
Cross-platform running tests

Although this example is very simple, it lays the foundation for the entire series.

In subsequent articles, we will continue to expand PicoServer's capabilities:

Building REST APIs
Designing a scalable API architecture
Implementing a static file server
Developing a Web Admin management backend

In the next article, we will delve deeper into PicoServer's core capabilities:
PicoServer Routing Mechanism and API Design.

And build the first truly usable API interface.

Keywords:

-.NET MAUI
-PicoServer
-MAUI Web Server
-MAUI HTTP API
-Embedded Web Server
-MAUI Web Admin

Author: Microsoft MVP AlexChow
Translated from: https://www.cnblogs.com/densen2014/p/19670893

DEV Community