Run a Web Server on the Arduino Portenta H7 with WebAssembly

Want to run a full HTTP server on embedded hardware using WebAssembly? With Atym, you can. In this tutorial, we’ll walk you through building and deploying a simple yet powerful web server using the Mongoose networking library—all within an Atym container.

If you’d like to see this in action first, check out this YouTube demo where I showcase the deployed web server running on an Arduino Portenta H7!

Pre-requisites:

Before continuing, make sure you’ve followed the Getting Started with Atym on Arduino Portenta H7 guide on Hackster. This walkthrough will help you set up your hardware, install the Atym CLI, and sign up for a free evaluation account.

Step 1: Download Source Code and Set Up Your Development Environment

1.Download the source code from the "Code" section at the bottom of this page.

2.Extract the archive to your preferred development directory, and cd into it.

unzip webserver.zip
cd webserver/

3. Download the Mongoose source files, `mongoose.h`, and `mongoose.c` from the official Mongoose repository at the commit used for this demo (fc551ec2e97b236d25e66538386fa4c03d3795d4).

curl -o src/mongoose.h https://raw.githubusercontent.com/cesanta/mongoose/fc551ec2e97b236d25e66538386fa4c03d3795d4/mongoose.h && \

curl -o src/mongoose.c https://raw.githubusercontent.com/cesanta/mongoose/fc551ec2e97b236d25e66538386fa4c03d3795d4/mongoose.c

3. Download the appropriate WASI-SDK (Release 25) package for your system. Then install it, or extract it and place it in the directory of your liking.

4. Update the CMAKE_TOOLCHAIN_FILE variable in the CMakeLists.txt file to point to the location of the `wasi-sdk.cmake` file with your wasi-sdk installation.

# Set the WASI SDK toolchain file
set(CMAKE_TOOLCHAIN_FILE /opt/wasi-sdk/share/cmake/wasi-sdk.cmake)

Step 2: Build the Web Server Application

Now that you've got your development environment set up, let's get to the fun stuff!

1. Create a build directory, cd into it, and compile the application.

mkdir build && cd build
cmake ..
make

This step builds your application and exports it as a WebAssembly module (webserver.wasm), which is used by the atym build command in the next step.

2. Build the Container​

Return to the project root directory and build the Atym container:

cd ..
atym build

By default, atym build will look for build.yaml in the top-level of your project to understand how to build your container.

If everything went well, you've just built the Web Server application! The next step is to deploy our container to our Atym-enabled device.

Step 3: Deploy the Web Server Application

1. Push your container to the Atym Hub:

atym push webserver

This command essentially pushes your container to a docker-like registry in the Atym Hub. In fact, Atym containers are oci-compliant and can be pushed to any registry that you'd put docker containers into!

2. Deploy the Container to your Device​

Next, deploy the container to your device by running the following command, where the first webserver is what you want the container to be named on your device, and the second is the container name in the Atym Hub:

atym run webserver webserver -n <deviceId>

Your deviceId can be found by simply running atymlistdevices from the cli, and then copying the appropriate deviceId for your device.

Step 4: Verify the Web Server Works

The Atym Hub will deploy your container to the device. You should see output in your console indicating the Web Server is running and ready to accept connections, similar to the following:

**********************************************
Web server listening on port: 8000
**********************************************
To connect:
1. Find this device's IP using: net iface
2. Open your web browser
3. Navigate to: http://<IP>:8000
**********************************************

Follow the instructions above to connect to your Web Server. When you visit the address in your browser, you should see the webpage served by your container!

Next Steps: Make it Your Own

You’ve just deployed a full-featured web server—complete with HTTP and WebSocket support—to embedded hardware using Atym and Mongoose. Nice work!

From here, you can start customizing the project to fit your own use case. Modify the HTML it serves, add new REST-style endpoints, extend the WebSocket behavior, or integrate it with other hardware features like GPIO or sensors. The web server project gives you a flexible foundation to build on.