Skip to content

Latest commit

 

History

History
54 lines (36 loc) · 2.84 KB

hosting.md

File metadata and controls

54 lines (36 loc) · 2.84 KB
Raw

Hosting on Azure Static Sites

How to run on Azure

  • Push this repository to GitHub
  • Create a new Azure Static Web App
  • Link it to your GitHub repository
  • Azure will add a build task to your repository and deploy the app

You'll need to add your API key into a a Configuration setting in the Azure management portal.

Click:

  • Click Configuration
  • Add a setting named ABLY_API_KEY with your API key as the value
  • Save the settings.

How it works

Azure static web apps don't run traditional "server side code", but if you include a directory with some Azure functions in your application, Azures deployment engine will automatically create and manage Azure functions for you, that you can call from your static application.

For local development, we'll just use the Azure functions SDK to replicate this, but for production, we can use static files (or files created by a static site generator of your choice) and Azure will serve them for us.

In the Azure function

We have a folder called API which contains an Azure functions JavaScript API. There's a bunch of files created by default (package.json, host.json etc) that you don't really need to worry about, and are created by the Functions SDK. If you wanted to expand the API, you would use npm install and the package.json file to manage dependencies for any addtional functions.

There's a directory api/createTokenRequest - this is where all our "server side" code lives.

Inside it, there are two files - index.js and function.json. The function.json file is the Functions binding code that the Azure portal uses for configuration, it's generated by the SDK and you don't need to pay attention to it. Our Ably code is inside the index.js file.

const Ably = require('ably/promises');

module.exports = async function (context, req) {
    const client = new Ably.Realtime(process.env.ABLY_API_KEY);
    const tokenRequestData = await client.auth.createTokenRequest({ clientId: 'ably-azure-static-site-demo' });    
    context.res = {
        headers: { "content-type": "application/json" },
        body: JSON.stringify(tokenRequestData) 
    };
};

This is all of our server side code. We're using the Ably JavaScript SDK, and exporting a default async function. The function.json file configures this to be our entrypoint, and the functions runtime. By default, configures this API to be available on https://azure-url/api/createTokenRequest

Using the client we created earlier, we create a token request.

The TokenRequest that is generated by this SDK call happens without calling the Ably servers, and allows the client side SDK to authenticate because the TokenRequest is signed with your API key on the server before it's sent to Ably.

The permissions applied to the temporary token Ably returns to your client are inherited from your API key, and configured in your Ably dashboard.