Gadget framework
Glossary
FAQ

Extending Gadget 

Gadget has a set of built-in plugins supported by the Gadget team, but you can also extend Gadget yourself to connect to other systems. Because Gadget is built on top of standard node.js, Fastify, and React, you can use existing libraries and tools for these ecosystems to extend your Gadget app.

Integrating with 3rd party APIs 

Gadget apps are built with node.js and Fastify, so you can use any npm package that is compatible with these technologies. To connect to third party APIs, you can install the package and use it in your Gadget app. For example, to connect to the Anthropic API, you can install the anthropic package and use it in your Gadget app:

terminal
yarn add @anthropic-ai/sdk
api/boot/anthropic.js
JavaScript
import Anthropic from "@anthropic-ai/sdk"; export const anthropic = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY, });
import Anthropic from "@anthropic-ai/sdk"; export const anthropic = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY, });

You can then use the anthropic client in your Gadget app:

api/actions/generateText.js
JavaScript
import { anthropic } from "../boot/anthropic"; export const run: ActionRun = async () => { const response = await anthropic.messages.create({ model: "claude-3-5-sonnet-20240620", messages: [{ role: "user", content: "Hello, world!" }], }); return response.content[0].text; };
import { anthropic } from "../boot/anthropic"; export const run: ActionRun = async () => { const response = await anthropic.messages.create({ model: "claude-3-5-sonnet-20240620", messages: [{ role: "user", content: "Hello, world!" }], }); return response.content[0].text; };

Running code at application boot 

Boot plugins allow customizing your backend nodejs process every time it boots. Boot plugins are registered before any other route plugins, or your backend routes themselves, so they can be used to set up global state. Boot plugins must reside in the api/boot folder, and will be automatically loaded at boot.

Boot plugins can export an async function that will be called with the server instance. This function can be used to register Fastify plugins, set up global state, or handle errors and missing routes. Boot plugins don't need to export this function.

For example, you can use a boot plugin to register a global Fastify error handler that will be used by all your routes:

api/boot/errors.js
JavaScript
import type { Server } from "gadget-server"; export default async function (server: Server) { server.setNotFoundHandler(async ({ request, reply }) => { await reply.send(`couldn't find ${request.path}`); }); server.setErrorHandler(async (error, request, reply) => { await reply.send(`something failed: ${error.message}`); }); }
import type { Server } from "gadget-server"; export default async function (server: Server) { server.setNotFoundHandler(async ({ request, reply }) => { await reply.send(`couldn't find ${request.path}`); }); server.setErrorHandler(async (error, request, reply) => { await reply.send(`something failed: ${error.message}`); }); }

Registering Fastify plugins 

Boot plugins can also be used to register Fastify plugins. For example, you can add the @fastify/view plugin for rendering server side HTML templates if you don't want to use React for your frontend:

api/boot/fastify.js
JavaScript
import fastifyView from "@fastify/view"; import type { Server } from "gadget-server"; export default async function (server: Server) { server.register(fastifyView, { engine: { ejs: require("ejs"), }, root: path.join(__dirname, "views"), }); }
import fastifyView from "@fastify/view"; import type { Server } from "gadget-server"; export default async function (server: Server) { server.register(fastifyView, { engine: { ejs: require("ejs"), }, root: path.join(__dirname, "views"), }); }

Setting up global state 

Boot plugins can also be used for setting up other global server-side objects, like error handlers or persistent connections to third-party services.

For example, if you want to use an error handling service like Bugsnag (instead of Gadget's Sentry integration), you can use a boot plugin to set up the Bugsnag client:

api/boot/bugsnag.js
JavaScript
import bugsnag from "@bugsnag/js"; bugsnag.start({ apiKey: process.env.BUGSNAG_API_KEY, });
import bugsnag from "@bugsnag/js"; bugsnag.start({ apiKey: process.env.BUGSNAG_API_KEY, });

Running more infrastructure 

Gadget doesn't support running server side containers beyond the node.js serverless hosting. You can however connect to supplementary infrastructure like databases, message queues, and other services. Gadget recommends hosting infrastructure within Google Cloud us-central1 where possible for minimal latency, or using managed services that host in GCP.

Community plugins 

There's currently no self-serve support for adding new plugins to the Gadget plugin list. If you are interested in creating a Gadget plugin or partnering with Gadget, please reach out to us!

Was this page helpful?