Guides
JS service worker

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 .
    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