How to use Ably with Netlify

This guide shows you how to use Ably in projects hosted on Netlify. It consists of a Github starter template and Netlify serverless functions.

Step 1 – Create your Ably app and API key

To follow this tutorial, you will need an Ably account. Sign up for a free account if you don’t already have one.

Access to the Ably global messaging platform requires an API key for authentication. API keys exist within the context of an Ably application and each application can have multiple API keys so that you can assign different capabilities and manage access to channels and queues.

You can either create a new application for this tutorial, or use an existing one.

To create a new application and generate an API key:

1. Log in to your Ably account dashboard
2. Click the “Create New App” button
3. Give it a name and click “Create app”
4. Copy your private API key and store it somewhere. You will need it for this tutorial.

To use an existing application and API key:

1. Select an application from “Your apps” in the dashboard
2. In the API keys tab, choose an API key to use for this tutorial. The default “Root” API key has full access to capabilities and channels.
3. Copy the Root API key and store it somewhere. You will need it for this tutorial.
   
   
   

Step 2 – Access our Netlify template

First, visit the Ably Netlify template on Github.

Then, click the Use this template button:

Step 3 – Create a new repository

Give your new repository a name and click the Create repository from template button:

Step 4 – Connect Netlify to your Github account

Click the Deploy to Netlify button in your new repository’s README.

The “Welcome to Netlify” page displays and asks you to connect your Github account. Click the Connect to Github button and follow the prompts:

Step 5 – Configure your Ably API key

In the “Welcome to Netlify” page, paste in the Ably API key you created in Step 1 in the text field shown below:

Step 6 – Deploy to Netlify

In the “Welcome to Netlify” page, click the Save & Deploy button. Wait a few minutes for your site to deploy. You can monitor the progress of your deployment from the Deploys tab in the Netlify dashboard.

Once your site has been successfully deployed, you can access it via the link that Netlify provides:

The sample app connects to an Ably channel, publishes a message to the channel, and displays the raw message data on the page: