bundle()
Part of the @remotion/bundler
package.
Bundles a Remotion project using Webpack and prepares it for rendering using renderMedia()
.
ts
const bundle: (options?: {entryPoint: string;onProgress?: (progress: number) => void;webpackOverride?: WebpackOverrideFn;outDir?: string;enableCaching?: boolean;publicPath?: string;rootDir?: string;publicDir?: string | null;}) => Promise<string>;
ts
const bundle: (options?: {entryPoint: string;onProgress?: (progress: number) => void;webpackOverride?: WebpackOverrideFn;outDir?: string;enableCaching?: boolean;publicPath?: string;rootDir?: string;publicDir?: string | null;}) => Promise<string>;
Arguments
entryPoint
A string
containing an absolute path of the entry point of a Remotion project. In a default Remotion project created with the template, the entry point is located at src/index.tsx
.
onProgress?
A callback function that notifies about the progress of the Webpack bundling. Passes a number between 0
and 100
. Example function:
ts
constonProgress = (progress : number) => {console .log (`Webpack bundling progress: ${progress }%`);};
ts
constonProgress = (progress : number) => {console .log (`Webpack bundling progress: ${progress }%`);};
options
An object containing the following keys:
webpackOverride?
optional
A function to override the webpack config reducer-style. Takes a function which gives you the current webpack config which you can transform and return a modified version of it. For example:
ts
constwebpackOverride :WebpackOverrideFn = (webpackConfig ) => {return {...webpackConfig ,// Override properties};};
ts
constwebpackOverride :WebpackOverrideFn = (webpackConfig ) => {return {...webpackConfig ,// Override properties};};
outDir?
optional
Specify a desired output directory. If no passed, the webpack bundle will be created in a temp dir.
enableCaching?
optional
A boolean
specifying whether Webpack caching should be enabled. Default true
, it is recommended to leave caching enabled at all times since file changes should be recognized by Webpack nonetheless.
publicPath?
optional
The path of the URL where the bundle is going to be hosted. By default it is /
, meaning that the bundle is going to be hosted at the root of the domain (e.g. https://localhost:3000/
). In some cases like rendering on Lambda, the public path might be a subdirectory.
rootDir?
optional, available from v3.1.6
The directory in which the Remotion project is rooted in. This should be set to the directory that contains the package.json
which installs Remotion. By default, it is the current working directory.
The current working directory is the directory from which your program gets executed from. It is not the same as the file where bundle() gets called.
publicDir?
Available from v3.2.13
Set the directory in which the files that can be loaded using staticFile()
are located. By default it is the folder public/
located in the Remotion root folder.
Legacy function signature
Remotion versions earlier than v3.2.17 had the following function signature instead:
ts
const bundle: (entryPoint: string,onProgress?: (progress: number) => void,options?: {webpackOverride?: WebpackOverrideFn;outDir?: string;enableCaching?: boolean;publicPath?: string;rootDir?: string;publicDir?: string | null;}) => Promise<string>;
ts
const bundle: (entryPoint: string,onProgress?: (progress: number) => void,options?: {webpackOverride?: WebpackOverrideFn;outDir?: string;enableCaching?: boolean;publicPath?: string;rootDir?: string;publicDir?: string | null;}) => Promise<string>;
Example:
ts
await bundle("src/index.tsx", () => console.log(progress * 100 + "% done"), {webpackOverride,});
ts
await bundle("src/index.tsx", () => console.log(progress * 100 + "% done"), {webpackOverride,});
It is still supported in Remotion v3, but we encourage to migrate to the new function signature.
Return value
A promise which will resolve into a string
specifying the output directory.