Quickstart guide for deploying a JS Service Worker

In this guide, you'll learn the process of deploying a javascript service worker on Wasmer Edge.

Deploying a JavaScript Service Worker

Install Wasmer CLI

Install the latest version of Wasmer CLI following the instructions here.

ℹ️

You can see all commands available with wasmer --help. You can also read the CLI documentation online.

⚠️

Please check that you have the latest version of wasmer runtime as this tutorial depends on version 4.2.3 or higher.

Log in into Wasmer

Create a new account in Wasmer (opens in a new tab). Then, log in into the Wasmer CLI and follow the provided steps to provide the CLI access to your Wasmer account.

wasmer login

Step 3.1: Initialize the JavaScript Service Worker Starter template

$ wasmer app create
App type:
  Static website
  HTTP server
  Browser shell
> JS Worker (experimental)
  Python Application

ℹ️

This is an interactive command. You can also use the --type flag to specify the app type.

Further you will be prompted to enter your package name and app name. You can choose any name you like.

🚧

The app names should be globally unique across all apps on the registry.

You directory composition should look like this:

src

index.js

wasmer.toml

app.yaml

You index.js file should look like this:

src/index.js

async function handler(request) {
  const out = JSON.stringify({
    success: true,
    package: "wasmer/js-service-worker",
  });
  return new Response(out, {
    headers: { "content-type": "application/json" },
  });
}
 
addEventListener("fetch", handler); // Don't change this line

You can change the content of the index.js file to your liking. But don't change the addEventListener("fetch", handler); line.

Step 3.2: Testing your JavaScript Service Worker locally

Run the commands below to initialize files for Wasmer Edge:

$ wasmer run . --net
2023-10-05T09:46:19.513568Z  INFO wasmer_winter: starting webserver
2023-10-05T09:46:19.514089Z  INFO wasmer_winter::server: starting server on 0.0.0.0:8080 listen=0.0.0.0:8080

The above command will start a web server on http://127.0.0.1:8080.

Let's try to cURL the server:

$ curl http://127.0.0.1:8080
"success":true,"package":"wasmer/js-service-worker"

Step 3.3: Deploying your JavaScript Service Worker

Deploying is the easiest part. Just run the following command:

$ wasmer deploy
Deploying app wasmer/js-service-worker...
 
 ✅ App wasmer/js-service-worker was successfully deployed!
 
> App URL: https://wasmer-js-service-worker-worker.wasmer.app
> Versioned URL: https://rkkh7ikcgv1r.id.wasmer.app
> Admin dashboard: https://wasmer.io/apps/wasmer/wasmer-js-service-worker-worker

ℹ️

You must be in the directory holding the wasmer.toml and app.yaml config files.

💁

You can view the above info again using wasmer app info.

Conclusion

Congratulations! You have successfully deployed your javascript service worker on Wasmer Edge.

Resources

wasmerio/edge-js-service-worker

HTTP Server Python