feat: dockerize the application

Author: robinroy03

.dockerignore

@@ -1,4 +1,11 @@
-.react-router
-build
 node_modules
-README.md
+build
+.react-router
+out
+*.log
+.env
+.git
+.gitignore
+README.md
+docker-compose.yml
+Dockerfile*

Dockerfile

@@ -0,0 +1,41 @@
+# Backend Dockerfile
+
+FROM node:22-bookworm-slim
+WORKDIR /app
+
+# Install Chrome dependencies
+RUN apt-get update
+RUN apt install -y \
+  libnss3 \
+  libdbus-1-3 \
+  libatk1.0-0 \
+  libgbm-dev \
+  libasound2 \
+  libxrandr2 \
+  libxkbcommon-dev \
+  libxfixes3 \
+  libxcomposite1 \
+  libxdamage1 \
+  libatk-bridge2.0-0 \
+  libpango-1.0-0 \
+  libcairo2 \
+  libcups2
+
+# Install pnpm
+RUN npm install -g pnpm
+
+# Copy package files and install dependencies
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install --frozen-lockfile
+
+# Copy source code
+COPY . .
+
+# Create output directory for rendered videos
+RUN mkdir -p /app/out
+
+# Expose port
+EXPOSE 8000
+
+# Start the backend
+CMD ["pnpm", "dlx", "tsx", "app/videorender/videorender.ts"] 

Dockerfile.backend

@@ -0,0 +1,21 @@
+# Frontend Dockerfile
+
+FROM node:20-bookworm-slim
+WORKDIR /app
+
+# Install pnpm
+RUN npm install -g pnpm
+
+# Copy package files and install dependencies
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install --frozen-lockfile
+
+# Copy source code and build
+COPY . .
+RUN pnpm run build
+
+# Expose port
+EXPOSE 3000
+
+# Start the application
+CMD ["pnpm", "run", "start"] 

Dockerfile.frontend

@@ -1,5 +1,5 @@
 import React from "react"
-import { VideoPlayer } from "~/remotion/VideoPlayer"
+import { VideoPlayer } from "~/video-compositions/VideoPlayer"
 import type { PlayerRef } from "@remotion/player"
 import { type TimelineDataItem } from "./types"
 

app/components/timeline/VideoPlayerSection.tsx

@@ -4,4 +4,4 @@ export const MyComposition = () => {
             <p>hello world</p>
         </>
     )
-};
+}; 

app/remotion/Root.tsx

@@ -1,4 +1,4 @@
-import { Sequence, OffthreadVideo } from "remotion";
+import { OffthreadVideo } from "remotion";
 
 
 export const MyComp: React.FC<{ videoURL: string }> = ({ videoURL }) => {
@@ -10,4 +10,4 @@ export const MyComp: React.FC<{ videoURL: string }> = ({ videoURL }) => {
             </div>
         </>
     )
-};
+}; 

app/remotion/Composition.tsx app/video-compositions/Composition.tsxapp/remotion/Composition.tsx renamed to app/video-compositions/Composition.tsx

@@ -0,0 +1,10 @@
+import { Composition } from 'remotion';
+import { MyComp } from './MyComp';
+
+export const MyVideo = () => {
+    return (
+        <>
+            <Composition component={MyComp} durationInFrames={120} width={1920} height={1080} fps={30} id="my-comp" defaultProps={{ text: 'World' }} />
+        </>
+    );
+}; 

app/remotion/MyComp.tsx app/video-compositions/MyComp.tsxapp/remotion/MyComp.tsx renamed to app/video-compositions/MyComp.tsx

@@ -1,5 +1,3 @@
-// this is the video player component. It basically takes the JSON representation of the timeline and renders it.
-
 import { Player, type PlayerRef } from '@remotion/player';
 import { Sequence, AbsoluteFill, Img, Video } from 'remotion';
 import React from 'react';
@@ -56,7 +54,7 @@ export function TimelineComposition({ timelineData, durationInFrames }: VideoPla
                                     textShadow: '2px 2px 4px rgba(0,0,0,0.5)',
                                     margin: 0,
                                     padding: '20px'
-                                }}>{scrubber.id}</p> {/* Using scrubber.id as placeholder for text content, update if actual text is available */}
+                                }}>{scrubber.id}</p>
                             </div>
                         </AbsoluteFill>
                     );
@@ -80,7 +78,6 @@ export function TimelineComposition({ timelineData, durationInFrames }: VideoPla
                     }
                     break;
                 default:
-                    // Optionally handle unknown media types or log a warning
                     console.warn(`Unknown media type: ${scrubber.mediaType}`);
                     break;
             }
@@ -119,4 +116,4 @@ export function VideoPlayer({ timelineData, durationInFrames, ref }: VideoPlayer
             controls
         />
     );
-}
+}