Improve Lambda functionality in templates

packages/template-next-app-tailwind/deploy.mjs

@@ -44,6 +44,7 @@ const { functionName, alreadyExisted: functionAlreadyExisted } =
     region: REGION,
     timeoutInSeconds: TIMEOUT,
     diskSizeInMb: DISK,
+    enableV5Runtime: true,
   });
 console.log(
   functionName,

packages/template-next-app/deploy.mjs

@@ -43,6 +43,7 @@ const { functionName, alreadyExisted: functionAlreadyExisted } =
     region: REGION,
     timeoutInSeconds: TIMEOUT,
     diskSizeInMb: DISK,
+    enableV5Runtime: true,
   });
 console.log(
   functionName,

packages/template-next-pages/deploy.mjs

@@ -43,6 +43,7 @@ const { functionName, alreadyExisted: functionAlreadyExisted } =
     region: REGION,
     timeoutInSeconds: TIMEOUT,
     diskSizeInMb: DISK,
+    enableV5Runtime: true,
   });
 console.log(
   functionName,

packages/template-remix/app/deploy.ts

@@ -6,7 +6,7 @@ import {
 } from "@remotion/lambda";
 import dotenv from "dotenv";
 import path from "path";
-import { RAM, TIMEOUT, SITE_NAME } from "./remotion/constants";
+import { RAM, TIMEOUT, SITE_NAME, DISK } from "./remotion/constants";
 
 dotenv.config();
 
@@ -19,7 +19,9 @@ const run = async () => {
     createCloudWatchLogGroup: true,
     memorySizeInMb: RAM,
     region,
+    diskSizeInMb: DISK,
     timeoutInSeconds: TIMEOUT,
+    enableV5Runtime: true,
   });
   console.log(
     `${alreadyExisted ? "Ensured" : "Deployed"} function "${functionName}"`,

packages/template-remix/app/lib/render-video.server.ts

@@ -1,8 +1,15 @@
 import type { AwsRegion } from "@remotion/lambda";
-import { renderMediaOnLambda } from "@remotion/lambda/client";
-import { speculateFunctionName } from "./get-function-name";
+import {
+  renderMediaOnLambda,
+  speculateFunctionName,
+} from "@remotion/lambda/client";
 import type { RenderResponse } from "./types";
-import type { LogoAnimationProps } from "app/remotion/constants";
+import {
+  DISK,
+  RAM,
+  TIMEOUT,
+  type LogoAnimationProps,
+} from "app/remotion/constants";
 
 export const renderVideo = async ({
   serveUrl,
@@ -24,7 +31,11 @@ export const renderVideo = async ({
 
   const { renderId, bucketName } = await renderMediaOnLambda({
     region,
-    functionName: speculateFunctionName(),
+    functionName: speculateFunctionName({
+      diskSizeInMb: DISK,
+      memorySizeInMb: RAM,
+      timeoutInSeconds: TIMEOUT,
+    }),
     serveUrl,
     composition,
     inputProps,
@@ -39,7 +50,11 @@ export const renderVideo = async ({
   return {
     renderId,
     bucketName,
-    functionName: speculateFunctionName(),
+    functionName: speculateFunctionName({
+      diskSizeInMb: DISK,
+      memorySizeInMb: RAM,
+      timeoutInSeconds: TIMEOUT,
+    }),
     region,
   };
 };

packages/template-remix/app/remotion/constants.ts

@@ -6,7 +6,7 @@ export const COMPOSITION_WIDTH = 1920;
 export const COMPOSITION_HEIGHT = 1080;
 export const COMPOSITION_ID = "LogoAnimation";
 export const RAM = 2048;
-export const DISK = 2048;
+export const DISK = 10240;
 export const TIMEOUT = 240;
 export const SITE_NAME = "remotion-remix-example-" + VERSION;
 

packages/template-remix/app/routes/progress.tsx

@@ -1,9 +1,12 @@
 import type { ActionFunction } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import type { AwsRegion } from "@remotion/lambda";
-import { getRenderProgress } from "@remotion/lambda/client";
-import { speculateFunctionName } from "app/lib/get-function-name";
+import {
+  getRenderProgress,
+  speculateFunctionName,
+} from "@remotion/lambda/client";
 import type { StatusResponse } from "../lib/types";
+import { DISK, RAM, TIMEOUT } from "~/remotion/constants";
 
 export const action: ActionFunction = async ({ request }) => {
   const body = await request.formData();
@@ -29,7 +32,11 @@ export const action: ActionFunction = async ({ request }) => {
     {
       renderId,
       bucketName,
-      functionName: speculateFunctionName(),
+      functionName: speculateFunctionName({
+        diskSizeInMb: DISK,
+        memorySizeInMb: RAM,
+        timeoutInSeconds: TIMEOUT,
+      }),
       region,
     },
   );

packages/template-tiktok/README.md

@@ -66,6 +66,11 @@ Captioning will download Whisper.cpp and the 1.5GB big `medium.en` model. To con
 
 To support non-English languages, you need to change the `WHISPER_MODEL` variable in `whisper-config.mjs` to a model that does not have a `.en` sufix.
 
+## Rendering on Lambda
+
+If you plan on deploying this template to Lambda, make sure to enable the [`--enable-v5-runtime`](https://www.remotion.dev/docs/lambda/cli/functions#--enable-v5-runtime) flag.  
+This will enable a Chrome version which supports the `paint-order` CSS property that is required for this template to render properly.
+
 ## Docs
 
 Get started with Remotion by reading the [fundamentals page](https://www.remotion.dev/docs/the-fundamentals).