Setup Remotion

The kit comes with all required utilities to have Compositions, preview Player, and Render right inside the NextJS app along with all other core business logic of your product. It uses AWS Lambda to render the videos.

It comes with required database models, webhook callbacks, and React contexts to build an editor for your product.

Requirements

• AWS Account
• Remotion License (If required)

Setup AWS

You need to create set of policies, roles, and users on AWS. Remotion has a guide to setup AWS. It takes you just 5 minutes to setup.

At high level, you need to complete following steps:

1. Create role policy - Docs
2. Create role - Docs
3. Create user - Docs
4. Create access key - Docs and set the credentials in the .env file.
5. Add permissions to the user - Docs
6. Set the AWS_REGION in the .env file.

Deploy a render function

After completing the above steps, you can deploy a render function (Lambda function) that ultimately renders the video. Find the docs to deploy a render function.

Set the function name and S3 bucket name in the .env file as below:

REMOTION_FUNCTION_NAME=
REMOTION_BUCKET_NAME=

Deploy a site

Next step is to deploy the remotionn site. This is the compilation of all your compositions. The above lambda uses this site to render the video. You need to update the site whenever you change your compositions. Run the following command to deploy the site:

npm run remotion:build-site

Set the site name as REMOTION_SERVE_URL in the .env file. This is one time setup. Also setup the REMOTION_WEBHOOK_SECRET in the .env file for the webhook callback to work.

That’s it! You are all set. Ultimately, you need to set the following environment variables in the .env file:

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
REMOTION_FUNCTION_NAME=
REMOTION_SERVE_URL=
REMOTION_WEBHOOK_SECRET=
REMOTION_BUCKET_NAME=
AWS_REGION=