A template for designing still images with dynamic data with built-in server for deploying to the cloud.
Design mode: Create an image in React
npm run dev
Render it
npm run render
Keep Remotion up to date
npm run upgrade
You can run a server that serves dynamic images based on it's URL. Run
npm run server
And then visit http://localhost:8000/PreviewCard.png?title=Hello+World
in your browser to render an image.
- Specify the ID of the composition you want to render after the
/
. You can edit the compositions insrc/Video.tsx
. - Add either a
.png
or a.jpeg
extension depending on which image format you want. - You can add input props to your React component by adding query strings:
?title=Hello+World&description=foobar
will pass{"title": "Hello World", "description": "foo bar"}
to the component.
In src/server/config.ts
, you can configure three types of caching:
-
"filesystem"
, the default, will cache generated images locally. This is a good way of caching if you host the server on a non-ephemereal platform and have enough storage. -
"none"
will disable all caching and calculate all images on the fly. -
"s3-bucket"
will cache images in a S3 bucket. If you choose this option, you need to provideAWS_ACCESS_KEY_ID
andAWS_SECRET_ACCESS_KEY
environment variables containing AWS credentials which have permission of reading and writing to S3 as well as configure a bucket name and region insrc/server/config.ts
.
How to set up an S3 bucket
- Go to https://s3.console.aws.amazon.com/s3/home and create a new bucket. You can leave the "Deny all public access" checkbox checked.
-
Fill out region and bucket name in
src/server/config.ts
. - Go to https://console.aws.amazon.com/iamv2/home?#/users to create a new user. While creating, enable "Programmatic Access". When adding permissions, choose "Attach existing policies directly" and then search for "AmazonS3FullAccess" and assign it.
-
In the last step you will get a value for
AWS_ACCESS_KEY_ID
andAWS_SECRET_ACCESS_KEY
which you need to set as an environment variable. Locally, you can rename the.env.example
file to.env
. When you deploy the server, you can set the environment variables in the dashboard of your provider.
To deploy the server to Heroku, you need to add the Google Chrome Buildpack. Go to the settings of your Heroku app and in the Buildpacks
section, add https://github.com/heroku/heroku-buildpack-google-chrome
as a buildpack.
The easiest way to deploy to DigitalOcean is to use the dockerized image and run it on the DigitalOcean App Platform. Go to https://cloud.digitalocean.com/apps/new and connect your Github repository and deploy the
Our serverless solution is a work in progress and will be released later in 2021.
Get started with Remotion by reading the fundamentals page.
We provide help on our Discord server.
Found an issue with Remotion? File an issue here.
Note that for some entities a company license is needed. Read the terms here.