🐸Frog

Learn how to integrate the Airstack Frog Recipes into your existing Frog project in less than 5 minutes.

Integrating the Airstack Frog Recipes into your existing Frog project is very simple and takes less than 5 minutes.

Step 1: Install Airstack Frog Recipes

First, install the Airstack Frog Recipes to your project:

npm install @airstack/frog

Step 2: Change Imports

Then, simply by change all the frog imports to @airstack/frog.

// Initially: import { Frog } from "frog";
import { Frog } from "@airstack/frog";

The Airstack Frog Recipes is built on top of the Frog framework and contains all the functionality offered by the Frog framework, therefore any functions available in frog should also be available in @airstack/frog.

Step 3: Add Airstack API Key

Once all imports are converted, add an Airstack API key to your Frog instance's apiKey(required) field:

import { Frog } from "@airstack/frog";

export const app = new Frog({
  apiKey: process.env.AIRSTACK_API_KEY as string,
});

Step 4: TypeScript JSX Configuration

Ensure that the jsxImportSource in your tsconfig.json is as follows:

tsconfig.json
{
  "compilerOptions": {
    // other options
    "jsxImportSource": "@airstack/frog/jsx",
  }
}

Step 5: Modify Scripts In package.json

Lastly, you can replace frog dev with npx @airstack/frog dev:

package.json
{
  "scripts": { 
    "dev": "npx @airstack/frog dev",
  },
}

πŸ₯³ Congratulations! You just integrated Airstack Frog Recipe to your Frog Framework!

Developer Support

If you have any questions or need help regarding integrating Airstack Frog Recipe to your existing Frog project, please join our Airstack's Telegram group.

More Resources

Last updated