Quickstart guide for a JS service worker

In this guide, you'll learn the process of deploying a JS service worker on Wasmer Edge. We will cover installation of the CLI, setting up a new Javascript worker, and deploying it.

Deploying a JS service worker

Install Wasmer

Click here for instructions on how to install Wasmer if you haven't done it already!

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

Deploy!

We begin creating a new empty directory.

mkdir my-new-js-worker
cd my-new-js-worker

Then, running a single command, we can setup a js worker:

wasmer deploy --template=js-worker

This will prompt you for the following:

App owner: This is the owner of the app. It can be your username or an organization; if you're logged in, the command will prompt you tochoose from your namespaces: by default, it will be your username.
App name: This is the name of your app. By default, it will be the name of the current directory.

Expect to see output similar to this:

It seems you are trying to create a new app!
✔ Who should own this app? · wasmer-user
✔ What should be the name of the app? · jsworker
✔ Unpacked template
✔ Do you want to deploy the app now? · yes
Loading local package (manifest path: ~/wasmer-user/Projects/jsworker/.)
✔ Correctly built package locally
✔ Package correctly uploaded
✔ Succesfully pushed release to namespace wasmer-user on the registry
Deploying app jsworker (wasmer-user) to Wasmer Edge...
 
App jsworker (wasmer-user) was successfully deployed 🚀
https://jsworker-wasmer-user.wasmer.app
 
→ Unique URL: https://48xhpiqcq3mg.id.wasmer.app
→ Dashboard:  https://wasmer.io/apps/wasmer-user/jsworker
 
Waiting for new deployment to become available...
(You can safely stop waiting now with CTRL-C)
.
𖥔 Deployment complete

The above command will do the following:

Download the template from the registry
Deploy it to Wasmer Edge with the user-provided information

Let's check it:

curl https://jsworker-wasmer-user.wasmer.app

ℹ

The deployment URL follows the format https://<app-name>-<app-owner>.wasmer.app

Expect output similar to:

{
  "env": {
    ...
  },
  "headers": {
    ...
  }
}

Update the app

Your directory should now look like this:

index.js

wasmer.toml

README.md

app.yaml

To illustrate the lifecycle of an app, let's edit the index.js file in the public folder:

src/index.js

async function handler(request) {
  const out = JSON.stringify({
    env: process.env,
    headers: Object.fromEntries(request.headers),
    hello: "world", // 👈 Add this
  }, null, 2);
  return new Response(out, {
    headers: { "content-type": "application/json" },
  });
}
 
addEventListener("fetch", (fetchEvent) => {
  fetchEvent.respondWith(handler(fetchEvent.request));
}

Now, simply run wasmer deploy again:

wasmer deploy

Wait for the deployment to be ready, then check it again:

curl https://jsworker-wasmer-user.wasmer.app

Expect output:

{
  "env": {
    ...
  },
  "headers": {
    ...
  },
  "hello": "world"
}

Testing your JS service worker locally

To run your worker locally, simply run

wasmer run .

ℹ️

You can see all the available options with wasmer run --help or click here to see the full documentation.

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

Expect:

{
  "env": {
    ...
  },
  "headers": {
    ...
  },
  "hello": "world"
}

Conclusion

Congratulations! You have successfully deployed a JS service worker on Wasmer Edge 🚀.

Tip: To make changes to your JS service worker, simply modify the index.js file in the src directory and run wasmer deploy again to deploy the changes.

Following up

Try running:

time curl -o /dev/null -s -w '%{time_total}\n' https://<app-name>-<your-user>.wasmer.app

Note how the cold-start isn't so cold! 🔥 Compare this to some of the alternatives.

Resources

wasmer-examples/edge-js-service-worker

Static website Python HTTP server