🐳 Improve docker support

.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*

.gitignore

@@ -4,4 +4,7 @@ out/
 
 # React Router
 /.react-router/
-/build/
+/build/
+
+# pnpm
+.pnpm-store

Dockerfile.backend

@@ -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.frontend

@@ -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"] 

app/components/timeline/VideoPlayerSection.tsx

@@ -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/remotion/Composition.tsx → app/video-compositions/Composition.tsx

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

app/remotion/MyComp.tsx → app/video-compositions/MyComp.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/video-compositions/Root.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/VideoPlayer.tsx → app/video-compositions/VideoPlayer.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
         />
     );
-}
+} 

app/remotion/index.ts → app/video-compositions/index.ts

@@ -1,4 +1,4 @@
 import {registerRoot} from 'remotion';
 import {MyVideo} from './Root';
- 
-registerRoot(MyVideo);
+
+registerRoot(MyVideo); 

app/videorender/Composition.tsx

@@ -1,5 +1,5 @@
 import { Composition, getInputProps } from 'remotion';
-import { TimelineComposition } from '../remotion/VideoPlayer';
+import { TimelineComposition } from '../video-compositions/VideoPlayer';
 
 export default function RenderComposition() {
     const inputProps = getInputProps();

docker-compose.yml

@@ -0,0 +1,34 @@
+services:
+  frontend:
+    build:
+      context: .
+      dockerfile: Dockerfile.frontend
+    container_name: videoeditor-frontend
+    ports:
+      - "3000:3000"
+    environment:
+      - VITE_API_URL=http://backend:8000
+    networks:
+      - videoeditor-network
+    depends_on:
+      - backend
+
+  backend:
+    build:
+      context: .
+      dockerfile: Dockerfile.backend
+    container_name: videoeditor-backend
+    ports:
+      - "8000:8000"
+    volumes:
+      - ./out:/app/out
+    networks:
+      - videoeditor-network
+    # Memory configuration for video rendering
+    mem_limit: 2g
+    memswap_limit: 2g
+    shm_size: 1g
+
+networks:
+  videoeditor-network:
+    driver: bridge

eslint.config.js

@@ -69,7 +69,7 @@ export default [
     }
   },
   {
-    files: ['app/remotion/*.{ts,tsx}'],
+    files: ['app/video-compositions/*.{ts,tsx}'],
     plugins: {
       '@remotion': remotionPlugin
     },