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!

Initialize the local directory

With the CLI installed, let's create a new JS service worker! We begin creating a new empty directory - after that, we will need to run a single command.

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

The wasmer deploy --template=js-worker command 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 to choose 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.

The above command will do the following:

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

Let's check it:

$ curl https://<your-app-name>-<you>.wasmer.app
{"success":true,"package":"wasmer/js-worker-starter"}%

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({
	hello: "world", 	// <- New line 
    success: true,
    package: "wasmer/js-worker-starter",
  });
  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
Loading local package (manifest path: <current-working-directory>)
✔ Correctly built package locally
✔ Package correctly uploaded
✔ Succesfully pushed release to namespace <you> on the registry 
Deploying app <your-app-name> (<you>) to Wasmer Edge...
 
App <your-app-name> (<you>) was successfully deployed 🚀
https://<your-app-name>-<you>.wasmer.app
 
→ Unique URL: https://<app_id>.id.wasmer.app
→ Dashboard:  https://wasmer.io/apps/<you>/<your-app-name>
 
Waiting for new deployment to become available...
(You can safely stop waiting now with CTRL-C)
.
𖥔 Deployment complete

Let's check it again:

$ curl https://<your-app-name>-<you>.wasmer.app
{"hello": "world", "success":true,"package":"wasmer/js-worker-starter"}%

Testing your JS service worker locally

To run your worker locally, simply run

$ 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"}

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.

Resources

wasmer-examples/edge-js-service-worker

Static website Python HTTP server