Deploy Remotion Studio as static site - Remotion

available from v4.0.97

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

You can deploy the Remotion Studio as a static site, for example to Vercel or Netlify.
Server-side rendering will not be available, but if you enable client-side rendering, you can render videos directly in the browser.
The deployed URL may also be used as a Serve URL to pass to rendering APIs.
Make sure you are on at least v4.0.97 to use this feature - use npx remotion upgrade to upgrade.

Export the Remotion Studio as a static site

To export the Remotion Studio as a static site, run the remotion bundle command:

bash

npx remotion bundle

The output will be in the build folder.
We recommend to add build to your .gitignore file. The command will offer to do it for you when you run it.

Deploy to Vercel

To deploy to Vercel, connect your repository to Vercel.

In the "Build and Output" settings, enable "OVERRIDE" and set the following:

Build Command: bunx remotion bundle
Output Directory: build
Installation Command: Leave default

:::note Using bunx as a script runner is slightly faster than using npx. :::

Deploy to Netlify

Connect your repository to Netlify.

Base directory: Leave default
Build command: npx remotion bundle
Publish directory: build
Functions directory: Leave default

Deploy to GitHub Pages

<Step>1</Step> Create the following file in your repo:

yaml

name: Deploy Remotion studio
on:
  workflow_dispatch:
  push:
    branches:
      - 'main'
permissions:
  contents: write
jobs:
  render:
    name: Render video
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@main
      - name: install packages
        run: npm i
      - name: Bundle Studio
        run: npx remotion bundle --public-path="./"
      - name: Deploy Studio
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: build

The above code will deploy the bundled Remotion Studio to a branch gh-pages.

:::note The --public-path flag for npx remotion bundle is available only from remotion version 4.0.127 :::

<Step>3</Step> Go to the settings of your repository (github.com/[username]/[repo]/settings/pages)

<Step>4</Step> In the Branch section, select the <code>gh-pages</code> branch and click save.

Rendering from a URL

The deployed URL is a Serve URL can also be used to render a video:

If you open a deployed Studio in read-only mode, you can open the Render modal and click Copy command to get the CLI command for the current settings.

Minimal example:

bash

npx remotion render https://remotion-helloworld.vercel.app

Specify "HelloWorld" composition ID and input props:

bash

npx remotion render https://remotion-helloworld.vercel.app HelloWorld --props '{"titleText":"Hello World"}'

</TabItem> <TabItem value="ssr">

tsx

const outputLocation = '/path/to/frames';

import {renderMedia, selectComposition} from '@remotion/renderer';

// ---cut---
const inputProps = {
  titleText: 'Hello World',
};

const serveUrl = 'https://remotion-helloworld.vercel.app';

const composition = await selectComposition({
  serveUrl,
  id: 'HelloWorld',
  inputProps,
});

await renderMedia({
  composition,
  serveUrl,
  codec: 'h264',
  inputProps,
});

Refer to renderMedia() to see all available options.

</TabItem> <TabItem value="lambda">

bash

npx remotion lambda render https://remotion-helloworld.vercel.app HelloWorld --props '{"titleText":"Hello World"}'

tsx

// ---cut---
import {renderMediaOnLambda} from '@remotion/lambda/client';

const {bucketName, renderId} = await renderMediaOnLambda({
  region: 'us-east-1',
  functionName: 'remotion-render-bds9aab',
  composition: 'HelloWorld',
  serveUrl: 'https://remotion-helloworld.vercel.app',
  codec: 'h264',
  inputProps: {
    titleText: 'Hello World',
  },
});

You need to complete the Remotion Lambda Setup first.

</TabItem> <TabItem value="cloudrun">

bash

npx remotion cloudrun render https://remotion-helloworld.vercel.app HelloWorld --props '{"titleText":"Hello World"}'

tsx

// ---cut---
import {renderMediaOnCloudrun} from '@remotion/cloudrun/client';

const result = await renderMediaOnCloudrun({
  region: 'us-east1',
  serviceName: 'remotion-render-bds9aab',
  composition: 'HelloWorld',
  serveUrl: 'https://remotion-helloworld.vercel.app',
  codec: 'h264',
  inputProps: {
    titleText: 'Hello World!',
  },
});

if (result.type === 'success') {
  console.log(result.bucketName);
  console.log(result.renderId);
}

You need to complete the Remotion Cloud Run Setup first.

</TabItem> </Tabs>