Extending Observable to the backend with a custom serverless runtime.
Innovative live-coding workflows against production traffic.
Published
Edited
Feb 4, 2022
12 stars
server = endpoint("server", async (request, response, ctx) => {
const API_KEY = ctx.secrets["AIRTABLE_API_KEY"];
const base = new Airtable({ apiKey: API_KEY }).base("app2lD79fJnGQVTiP");
// PUT for submitting a new notebook to the database
if (request.method === "PUT") {
const submission = JSON.parse(request.body);
if (!/^https:\/\/observablehq.com\/@[^/]*\/[^/]*$/.exec(submission.url))
return response.status(400).send("URL is not an Observable notebook");
base("notebooks").create(
[
{
fields: submission
}
],
function (err, records) {
if (err) return response.status(500).send(err.message);
else response.send("OK");
}
);
}
// GET for listing notebooks in the database
else if (request.method === "GET") {
const results = [];
base("notebooks")
.select({
maxRecords: 20,
view: "Grid view"
})
.eachPage(
function page(records, fetchNextPage) {
// This function (`page`) will get called for each page of records.
records.forEach(function (record) {
results.push(record.fields);
});
// To fetch the next page of records, call `fetchNextPage`.
// If there are more records, `page` will get called again.
// If there are no more records, `done` will get called.
fetchNextPage();
},
function done(err) {
if (err) return response.status(500).send(err.message);
else response.json(results);
}
);
} else {
response.status(400).send("Unknown method", request.method);
}
})
submitNotebook = async (record) => {
const response = await fetch(server.href, {
method: "PUT",
body: JSON.stringify(record)
});
if (response.status !== 200) throw new Error(await response.text());
}
listNotebooks = async () => {
const response = await fetch(server.href, {
method: "GET"
});
if (response.status !== 200) throw new Error(await response.text());
return await response.json();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
