Remotion + Remix Starter Kit

This is a Remix starter kit with Remotion, @remotion/player and @remotion/lambda built in.
It lets you render a video from a Remix app with AWS Lambda.

Here is the output video:

logo-animation.mp4

Getting started

Install dependencies using

npm install

Run the Remix app

Run the example app using:

npm run dev

Edit the video

Start the Remotion Preview (the editor interface) using:

npm run remotion:studio

Render videos with AWS Lambda

Follow these steps to set up video rendering:

Follow the steps in Remotion Lambda setup guide.
Rename the .env.example file to .env.
Fill in the REMOTION_AWS_REGION with the region that you would like to use, e.g. us-east-1.
Fill in the REMOTION_AWS_ACCESS_KEY_ID and REMOTION_AWS_SECRET_ACCESS_KEY values that you got from the first step.
Run the following to deploy your Lambda function and Remotion site:

npm run remotion:deploy

Rerun this command whenever you have upgraded to a new Remotion version.

Restart the Remix server.

Commands

Start the app in development mode:

npm run dev

Build the app for production:

npm run build

Start the app in production mode (after build is done):

npm start

Start the Remotion preview:

npm run remotion:preview

Render the example video locally:

npm run remotion:render

Upgrade all Remotion packages:

npm run remotion:upgrade

Render the example video on AWS Lambda:

npm run remotion:renderlambda

Deploy/Update the Remotion video on S3 and the Lambda function:

npm run remotion:deploy

Upgrading Remotion

When upgrading Remotion to a newer version, you will need to redeploy your function and update your site using the commands above.
If your functions or sites are already used in production, make sure to not overwrite them - read here for more details about upgrading.

Docs

Get started with Remotion by reading the fundamentals page.
See the Remix Docs to read about the framework.

Help

Join the Remotion Discord server to chat with other Remotion builders.

Issues

Found an issue with Remotion? File an issue here.

License

Note that for some entities a Remotion company license is needed. Read the terms here.

Can't launch

What

Can't get the remix template to work at all (tried npm, pnpm, bun)

✘ [ERROR] Could not resolve "react/jsx-dev-runtime"

    app/routes/index.tsx:99:4:
      99 │         <Player
         ╵         ^

  The Yarn Plug'n'Play manifest forbids importing "react" here because it's not listed as a dependency of this package:

    ../.pnp.cjs:38:33:
      38 │           "packageDependencies": [\
         ╵                                  ~~

  You can mark the path "react/jsx-dev-runtime" as external to exclude it from the bundle, which will remove this error.


💿 Rebuilt in 384ms
Remix App Server started at http://localhost:3000 (http://10.191.0.102:3000)
Error: Cannot find module '/home/thecmdrunner/remix-test/api/index.js'
Require stack:
- /home/thecmdrunner/remix-test/node_modules/@remix-run/serve/dist/index.js
- /home/thecmdrunner/remix-test/node_modules/@remix-run/dev/dist/devServer/serve.js
- /home/thecmdrunner/remix-test/node_modules/@remix-run/dev/dist/cli/commands.js
- /home/thecmdrunner/remix-test/node_modules/@remix-run/dev/dist/cli/run.js
- /home/thecmdrunner/remix-test/node_modules/@remix-run/dev/dist/cli/index.js
- /home/thecmdrunner/remix-test/node_modules/@remix-run/dev/dist/index.js
- /home/thecmdrunner/remix-test/node_modules/@remix-run/dev/dist/cli.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
    at Function.Module._load (node:internal/modules/cjs/loader:920:27)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at /home/thecmdrunner/remix-test/node_modules/@remix-run/serve/dist/index.js:43:17
    at Layer.handle [as handle_request] (/home/thecmdrunner/remix-test/node_modules/express/lib/router/layer.js:95:5)
    at next (/home/thecmdrunner/remix-test/node_modules/express/lib/router/route.js:144:13)
    at next (/home/thecmdrunner/remix-test/node_modules/express/lib/router/route.js:140:7)
    at next (/home/thecmdrunner/remix-test/node_modules/express/lib/router/route.js:140:7)
    at next (/home/thecmdrunner/remix-test/node_modules/express/lib/router/route.js:140:7)
GET / 500 - - 2.311 ms

How to reproduce

npm create video - select remix template
npm run dev

remotion-dev / template-remix Goto Github PK

template-remix's Introduction

Remotion + Remix Starter Kit

Getting started

Run the Remix app

Edit the video

Render videos with AWS Lambda

Commands

Upgrading Remotion

Docs

Help

Issues

License

template-remix's People

Contributors

Stargazers

Watchers

Forkers

template-remix's Issues

What

How to reproduce

Recommend Projects

Recommend Topics

Recommend Org