-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4705 from hunxjunedo/main
- Loading branch information
Showing
17 changed files
with
578 additions
and
406 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| /** | ||
| * @description Simplifies the process of setting up a Lambda Webhook in your Next.js app which is using App Router. | ||
| * @see [Documentation](https://www.remotion.dev/docs/lambda/approuterwebhook) | ||
| */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| /** | ||
| * @description Simplifies the process of setting up a Lambda Webhook in your Next.js app which is using Pages Router. | ||
| * @see [Documentation](https://www.remotion.dev/docs/lambda/pagesrouterwebhook) | ||
| */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,100 +1,112 @@ | ||
| import React from "react"; | ||
| import { Grid } from "./Grid"; | ||
| import { TOCItem } from "./TOCItem"; | ||
| import React from 'react'; | ||
| import {Grid} from './Grid'; | ||
| import {TOCItem} from './TOCItem'; | ||
|
|
||
| export const TableOfContents: React.FC = () => { | ||
| return ( | ||
| <div> | ||
| <Grid> | ||
| <TOCItem link="/docs/lambda/estimateprice"> | ||
| <strong>estimatePrice()</strong> | ||
| <div>Estimate the price of a render</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/deployfunction"> | ||
| <strong>deployFunction()</strong> | ||
| <div>Create a new function in AWS Lambda</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/deletefunction"> | ||
| <strong>deleteFunction()</strong> | ||
| <div>Delete a function in AWS Lambda</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/getfunctioninfo"> | ||
| <strong>getFunctionInfo()</strong> | ||
| <div>Gets information about a function</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/getfunctions"> | ||
| <strong>getFunctions()</strong> | ||
| <div>Lists available Remotion Lambda functions</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/getcompositionsonlambda"> | ||
| <strong>getCompositionsOnLambda()</strong> | ||
| <div>Gets list of compositions inside a Lambda function</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/deletesite"> | ||
| <strong>deleteSite()</strong> | ||
| <div>Delete a bundle from S3</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/deploysite"> | ||
| <strong>deploySite()</strong> | ||
| <div>Bundle and upload a site to S3</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/getawsclient"> | ||
| <strong>getAwsClient()</strong> | ||
| <div>Access the AWS SDK directly</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/getregions"> | ||
| <strong>getRegions()</strong> | ||
| <div>Get all available regions</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/getsites"> | ||
| <strong>getSites()</strong> | ||
| <div>Get all available sites</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/downloadmedia"> | ||
| <strong>downloadMedia()</strong> | ||
| <div>Download a render artifact from S3</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/getuserpolicy"> | ||
| <strong>getUserPolicy()</strong> | ||
| <div>Get the policy JSON for your AWS user</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/getrolepolicy"> | ||
| <strong>getRolePolicy()</strong> | ||
| <div>Get the policy JSON for your AWS role</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/getorcreatebucket"> | ||
| <strong>getOrCreateBucket()</strong> | ||
| <div>Ensure a Remotion S3 bucket exists</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/getrenderprogress"> | ||
| <strong>getRenderProgress()</strong> | ||
| <div>Query the progress of a render</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/presignurl"> | ||
| <strong>presignUrl()</strong> | ||
| <div>Make a private file public to those with the link</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/rendermediaonlambda"> | ||
| <strong>renderMediaOnLambda()</strong> | ||
| <div>Trigger a video or audio render</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/renderstillonlambda"> | ||
| <strong>renderStillOnLambda()</strong> | ||
| <div>Trigger a still render</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/simulatepermissions"> | ||
| <strong>simulatePermissions()</strong> | ||
| <div>Ensure permissions are correctly set up</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/speculatefunctionname"> | ||
| <strong>speculateFunctionName()</strong> | ||
| <div>Get the lambda function name based on its configuration</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/validatewebhooksignature"> | ||
| <strong>validateWebhookSignature()</strong> | ||
| <div>Validate an incoming webhook request is authentic</div> | ||
| </TOCItem> | ||
| </Grid> | ||
| </div> | ||
| ); | ||
| return ( | ||
| <div> | ||
| <Grid> | ||
| <TOCItem link="/docs/lambda/estimateprice"> | ||
| <strong>estimatePrice()</strong> | ||
| <div>Estimate the price of a render</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/deployfunction"> | ||
| <strong>deployFunction()</strong> | ||
| <div>Create a new function in AWS Lambda</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/deletefunction"> | ||
| <strong>deleteFunction()</strong> | ||
| <div>Delete a function in AWS Lambda</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/getfunctioninfo"> | ||
| <strong>getFunctionInfo()</strong> | ||
| <div>Gets information about a function</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/getfunctions"> | ||
| <strong>getFunctions()</strong> | ||
| <div>Lists available Remotion Lambda functions</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/getcompositionsonlambda"> | ||
| <strong>getCompositionsOnLambda()</strong> | ||
| <div>Gets list of compositions inside a Lambda function</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/deletesite"> | ||
| <strong>deleteSite()</strong> | ||
| <div>Delete a bundle from S3</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/deploysite"> | ||
| <strong>deploySite()</strong> | ||
| <div>Bundle and upload a site to S3</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/getawsclient"> | ||
| <strong>getAwsClient()</strong> | ||
| <div>Access the AWS SDK directly</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/getregions"> | ||
| <strong>getRegions()</strong> | ||
| <div>Get all available regions</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/getsites"> | ||
| <strong>getSites()</strong> | ||
| <div>Get all available sites</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/downloadmedia"> | ||
| <strong>downloadMedia()</strong> | ||
| <div>Download a render artifact from S3</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/getuserpolicy"> | ||
| <strong>getUserPolicy()</strong> | ||
| <div>Get the policy JSON for your AWS user</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/getrolepolicy"> | ||
| <strong>getRolePolicy()</strong> | ||
| <div>Get the policy JSON for your AWS role</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/getorcreatebucket"> | ||
| <strong>getOrCreateBucket()</strong> | ||
| <div>Ensure a Remotion S3 bucket exists</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/getrenderprogress"> | ||
| <strong>getRenderProgress()</strong> | ||
| <div>Query the progress of a render</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/presignurl"> | ||
| <strong>presignUrl()</strong> | ||
| <div>Make a private file public to those with the link</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/rendermediaonlambda"> | ||
| <strong>renderMediaOnLambda()</strong> | ||
| <div>Trigger a video or audio render</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/renderstillonlambda"> | ||
| <strong>renderStillOnLambda()</strong> | ||
| <div>Trigger a still render</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/simulatepermissions"> | ||
| <strong>simulatePermissions()</strong> | ||
| <div>Ensure permissions are correctly set up</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/speculatefunctionname"> | ||
| <strong>speculateFunctionName()</strong> | ||
| <div>Get the lambda function name based on its configuration</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/validatewebhooksignature"> | ||
| <strong>validateWebhookSignature()</strong> | ||
| <div>Validate an incoming webhook request is authentic</div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/approuterwebhook"> | ||
| <strong>appRouterWebhook()</strong> | ||
| <div> | ||
| Handle incoming webhooks specifically for the Next.js app router | ||
| </div> | ||
| </TOCItem> | ||
| <TOCItem link="/docs/lambda/pagesrouterwebhook"> | ||
| <strong>pagesRouterWebhook()</strong> | ||
| <div> | ||
| Handle incoming webhooks specifically for the Next.js pages router | ||
| </div> | ||
| </TOCItem> | ||
| </Grid> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| --- | ||
| image: /generated/articles-docs-lambda-approuterwebhook.png | ||
| id: approuterwebhook | ||
| title: appRouterWebhook() | ||
| slug: /lambda/approuterwebhook | ||
| crumb: 'Lambda API' | ||
| --- | ||
|
|
||
| Simplifies the process of setting up a [Lambda Webhook](/docs/lambda/webhooks) in your Next.js app which is using App Router. Refer to [`pagesRouterWebhook()`](/docs/lambda/pagesrouterwebhook) for doing the same in apps using Pages Router. | ||
|
|
||
| ## API | ||
|
|
||
| The function accepts an object with six key-value pairs: | ||
|
|
||
| ### `secret` | ||
|
|
||
| Your webhook secret, must be a `string` | ||
|
|
||
| ### `testing` | ||
|
|
||
| Whether or not to allow requests intending to test the endpoint, useful while using Webhook endpoint tester on [Webhooks Page](/docs/lambda/webhooks). Should be a `boolean`. | ||
|
|
||
| ### `extraHeaders` | ||
|
|
||
| Add your own custom headers to the outgoing response. Provide key-value pairs where both the key and value are strings. | ||
|
|
||
| ### `onSuccess()` | ||
|
|
||
| A function that is called with a [`WebhookSuccessPayload`](/docs/lambda/webhooks#response) object as an argument when the incoming request indicates a successful event. | ||
|
|
||
| ### `onError()` | ||
|
|
||
| A function that is called with a [`WebhookErrorPayload`](/docs/lambda/webhooks#response) object as an argument when the incoming request indicates an error. | ||
|
|
||
| ### `onTimeout()` | ||
|
|
||
| A function that is called with a [`WebhookTimeoutPayload`](/docs/lambda/webhooks#response) object as an argument when the incoming request indicates a timeout. | ||
|
|
||
| ## Example | ||
|
|
||
| Setting up a webhook endpoint in a Next.js app which uses App Router. This will listen on the endpoint: `mydomain.com/api` | ||
|
|
||
| ```tsx twoslash title="app/api/route.ts" | ||
| import {appRouterWebhook} from '@remotion/lambda/client'; | ||
|
|
||
| export const POST = appRouterWebhook({ | ||
| secret: 'mysecret', | ||
| testing: true, | ||
| extraHeaders: { | ||
| region: 'south-asia', | ||
| }, | ||
| onSuccess: () => console.log('Rendering Completed Successfully'), | ||
| onError: () => console.log('Something went wrong while rendering'), | ||
| onTimeout: () => console.log('Timeout occured while rendering'), | ||
| }); | ||
|
|
||
| export const OPTIONS = POST; | ||
| ``` | ||
|
|
||
| See [Webhooks](/docs/lambda/webhooks) for an Express example. | ||
|
|
||
| ## See also | ||
|
|
||
| - [Webhooks](/docs/lambda/webhooks) | ||
| - [Source code for this function](https://github.com/remotion-dev/remotion/blob/main/packages/lambda/src/api/app-router-webhook.ts) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| --- | ||
| image: /generated/articles-docs-lambda-pagesrouterwebhooks.png | ||
| id: pagesrouterwebhook | ||
| title: pagesRouterWebhook() | ||
| slug: /lambda/pagesrouterwebhook | ||
| crumb: 'Lambda API' | ||
| --- | ||
|
|
||
| Simplifies the process of setting up a [Lambda Webhook](/docs/lambda/webhooks) in your Next.js app which is using Pages Router. Similar to [`appRouterWebhook()`](/docs/lambda/approuterwebhook). | ||
|
|
||
| ## API | ||
|
|
||
| The function accepts an object with six key-value pairs: | ||
|
|
||
| ### `secret` | ||
|
|
||
| Your webhook secret, must be a `string` | ||
|
|
||
| ### `testing` | ||
|
|
||
| Whether or not to allow requests intending to test the endpoint, useful while using Webhook endpoint tester on [Webhooks Page](/docs/lambda/webhooks). Should be a `boolean`. | ||
|
|
||
| ### `extraHeaders` | ||
|
|
||
| Add your own custom headers to the outgoing response. Provide key-value pairs where both the key and value are strings. | ||
|
|
||
| ### `onSuccess()` | ||
|
|
||
| A function that is called with a [`WebhookSuccessPayload`](/docs/lambda/webhooks#response) object as an argument when the incoming request indicates a successful event. | ||
|
|
||
| ### `onError()` | ||
|
|
||
| A function that is called with a [`WebhookErrorPayload`](/docs/lambda/webhooks#response) object as an argument when the incoming request indicates an error. | ||
|
|
||
| ### `onTimeout()` | ||
|
|
||
| A function that is called with a [`WebhookTimeoutPayload`](/docs/lambda/webhooks#response) object as an argument when the incoming request indicates a timeout. | ||
|
|
||
| ## Example | ||
|
|
||
| Setting up a webhook endpoint in a Next.js app which uses Pages Router. This will listen on the endpoint: `mydomain.com/api/webhook` | ||
|
|
||
| ```tsx twoslash title="pages/api/webhook.ts" | ||
| import {pagesRouterWebhook} from '@remotion/lambda/client'; | ||
|
|
||
| const handler = pagesRouterWebhook({ | ||
| secret: 'mysecret', | ||
| testing: true, | ||
| extraHeaders: { | ||
| region: 'south-asia', | ||
| }, | ||
| onSuccess: () => console.log('Rendering Completed Successfully'), | ||
| onError: () => console.log('Something went wrong while rendering'), | ||
| onTimeout: () => console.log('Timeout occured while rendering'), | ||
| }); | ||
| export default handler; | ||
| ``` | ||
|
|
||
| See [Webhooks](/docs/lambda/webhooks) for an Express example. | ||
|
|
||
| ## See also | ||
|
|
||
| - [Webhooks](/docs/lambda/webhooks) | ||
| - [Source code for this function](https://github.com/remotion-dev/remotion/blob/main/packages/lambda/src/api/pages-router-webhook.ts) |
Oops, something went wrong.