Run Deno Code in the Browser

One of Deno’s selling points is its full compatibility with ECMAScript6. This makes it possible for Deno code to be compiled and run on the browser. This compilation is something made by Deno itself, and the bundler is included in the toolchain.

This feature enables a whole load of possibilities. A lot of them are due to the capacity for sharing code between the API and the client, and that’s what we’ll explore in this lesson.

We’ll build a very simple JavaScript client to interact with the Museums API we just built. This client can then be used by any browser application that wants to connect to the API. We’ll write that client in Deno and bundle it so that it can be used by a client, or even served by the application itself.

Make a request to getClient

The client we’ll write will be a very rudimentary HTTP client, so we won’t focus much on the code. We’re doing this to demonstrate how can we reuse code and types from Deno to generate code that runs on the browser. At the same time, we’ll also explain some advantages of keeping a client and its API together.

Let’s start by creating a new module in the application, which we’ll call client, as follows:

1. Create a folder inside src named client with a file named index.ts inside it.

2. Let’s create an exported method, getClient, which should return an instance of our API client with three functions: login, register, and getMuseums. The code for this is shown in the following snippet: