Deploy a Simple Wasm app on Docker Desktop

Estimated reading: 5 minutes 107 views

How to Deploy a Simple Wasm and Docker App on Docker Desktop:

WebAssembly (Wasm) is a low-level binary format that is designed to be executed in a sandboxed environment, such as web browser. It provides a portable, efficient, and safe way to run code on the web, as well as in other environments outside of the browser.

Docker, on the other hand, is a platform for building, shipping, and running containerised applications. Docker allows you to package your application and its dependencies into a container, which can then be run on any system that has Docker installed, without having to worry about differences in the underlying infrastructure.

So what do Wasm and Docker have to do with each other? Well, since Wasm provides a portable and efficient way to run code, it can be used to create applications that can run anywhere, including in a Docker container. By packaging a Wasm module inside a Docker container, you can create a containerised application that can be run on any system that supports Docker, regardless of the underlying hardware or operating system.

This is particularly useful for web applications that use Wasm, as it allows you to package the Wasm module and the web server that serves it into a single container, which can then be deployed to any environment that supports Docker. This makes it easy to deploy Wasm-based web applications to the cloud, to local servers, or even to IoT devices, without having to worry about differences in the underlying hardware or operating system.

What problems does Wasm solve?

WebAssembly (Wasm) solves a number of problems in the web development space. Here are some of the most important problems that Wasm aims to address:

Performance: WebAssembly provides a way to run code in the browser at near-native speeds, which makes it possible to build high-performance web applications that can match or exceed the performance of native applications.
Portability: WebAssembly is designed to be portable and platform-independent, which means that code compiled to WebAssembly can run on any system that supports it, including browsers, servers, and IoT devices.
Security: WebAssembly is designed to run in a sandboxed environment, which provides a layer of security against malicious code that could harm the user’s system.
Language agnosticism: WebAssembly is designed to be language-agnostic, which means that code can be compiled to WebAssembly from a variety of languages, including C, C++, Rust, and more.
Compatibility: WebAssembly is designed to be backwards-compatible, which means that code compiled to WebAssembly can run on older browsers and systems that don’t support the latest features.

WebAssembly solves the problem of delivering high-performance, secure, and portable code on the web, which opens up a wide range of possibilities for building web applications and services that were previously difficult or impossible to create.

Here’s an example of a simple Wasm + Docker app that you can run and deploy using Docker Desktop:

Pre-requisite:

Install Docker Desktop 4.16

Enable Containerd

Step 1. Create a new directory for your app

mkdir wasm-docker-app && cd wasm-docker-app

Step 2. Create a new file called index.html in the directory

Add the following HTML code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Wasm + Docker App</title>
  </head>
  <body>
    <h1>Hello, WebAssembly!</h1>
    <script>
      const go = new Go();
      WebAssembly.instantiateStreaming(fetch('main.wasm'), go.importObject).then(result => {
        go.run(result.instance);
      });
    </script>
  </body>
</html>

This code sets up a simple web page with a header and a script that loads a WebAssembly module called main.wasm.

Step 3. Create a new file called main.go into the directory

package main

import "fmt"

func main() {
  fmt.Println("Hello, WebAssembly!")
}

This code defines a simple Go program that prints a message to the console.

Step 4. Compile the Go program to WebAssembly using the tinygo tool

Assuming that you already have tinygo installed on your Mac system:

brew tap tinygo-org/tools
brew install tinygo

Let’s compile the Go program:

tinygo build -o main.wasm -target wasm main.go

This will generate a main.wasm file that contains the compiled WebAssembly module.

Step 6. Create a new file called Dockerfile in the directory

FROM envoyproxy/envoy-alpine:v1.18.4

COPY index.html /usr/share/nginx/html/index.html
COPY main.wasm /usr/share/nginx/html/main.wasm

This code sets up a Docker image based on the envoyproxy/envoy-alpine:v1.18.4 image and copies the index.html and main.wasm files into the /usr/share/nginx/html directory, which is the default directory for serving static files with the NGINX web server.

Step 7. Build the Docker image

docker build -t wasm-docker-app .

This will build a Docker image with the name wasm-docker-app.

Step 8. Run the Docker container

docker run -p 8080:80 wasm-docker-app

This will start a Docker container and map port 8080 on the host machine to port 80 inside the container.

Open a web browser and go to http://localhost:8080. You should see a web page with the message “Hello, WebAssembly!” printed on it.

That’s it! You’ve now created a simple Wasm + Docker app that can be run and deployed using Docker Desktop.

Deploy a Simple Wasm app on Docker Desktop

What problems does Wasm solve?

Pre-requisite:

Step 1. Create a new directory for your app

Step 2. Create a new file called index.html in the directory

Step 3. Create a new file called main.go into the directory

Step 4. Compile the Go program to WebAssembly using the tinygo tool

Step 6. Create a new file called Dockerfile in the directory

Step 7. Build the Docker image

Step 8. Run the Docker container

Deploy a Simple Wasm app on Docker Desktop

CONTENTS