From 298c753eea171ca3205ce04c62a9ab48c8000e40 Mon Sep 17 00:00:00 2001 From: Emanuele Toma Date: Sat, 31 May 2025 20:54:20 +0200 Subject: [PATCH 1/2] update Dockerfile and add docker-compose.yml --- .gitignore | 5 ++++- Dockerfile | 48 +++++++++++++++++++++++++++++++++++----------- docker-compose.yml | 14 ++++++++++++++ 3 files changed, 55 insertions(+), 12 deletions(-) create mode 100644 docker-compose.yml diff --git a/.gitignore b/.gitignore index c4fb88d..2c0e09f 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,7 @@ out/ # React Router /.react-router/ -/build/ \ No newline at end of file +/build/ + +# pnpm +.pnpm-store \ No newline at end of file diff --git a/Dockerfile b/Dockerfile index 207bf93..7dc1fc9 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,22 +1,48 @@ -FROM node:20-alpine AS development-dependencies-env -COPY . /app +FROM node:23-slim AS pnpm-base +# Install pnpm +RUN npm install -g pnpm +# Install dependencies for remotion +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 +RUN apt-get clean && rm -rf /var/lib/apt/lists/* + +# Development dependencies +FROM pnpm-base AS development-dependencies-env +COPY package.json pnpm-lock.yaml /app/ WORKDIR /app -RUN npm ci +RUN pnpm install -FROM node:20-alpine AS production-dependencies-env -COPY ./package.json package-lock.json /app/ +# Production dependencies +FROM pnpm-base AS production-dependencies-env +COPY package.json pnpm-lock.yaml /app/ WORKDIR /app -RUN npm ci --omit=dev +RUN pnpm install --frozen-lockfile --prod -FROM node:20-alpine AS build-env +# Build +FROM pnpm-base AS build-env COPY . /app/ COPY --from=development-dependencies-env /app/node_modules /app/node_modules WORKDIR /app -RUN npm run build +RUN pnpm run build -FROM node:20-alpine -COPY ./package.json package-lock.json /app/ +# Final image +FROM pnpm-base +COPY package.json pnpm-lock.yaml /app/ COPY --from=production-dependencies-env /app/node_modules /app/node_modules COPY --from=build-env /app/build /app/build WORKDIR /app -CMD ["npm", "run", "start"] \ No newline at end of file +CMD ["pnpm", "run", "start"] \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..3a88550 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,14 @@ +services: + videoeditor: + image: node:23-slim + container_name: videoeditor + ports: + - "5173:5173" + volumes: + - ./:/app + working_dir: /app + environment: + - CI=1 + - COREPACK_ENABLE_AUTO_PIN=0 + command: > + sh -c "npm i -g pnpm install && pnpm run dev --host" \ No newline at end of file From b3d98cb9d608c3bd00bd748a09e4ff3053d09e48 Mon Sep 17 00:00:00 2001 From: robinroy03 Date: Mon, 2 Jun 2025 17:16:40 +0530 Subject: [PATCH 2/2] feat: dockerize the application --- .dockerignore | 13 +++-- Dockerfile | 48 ------------------- Dockerfile.backend | 41 ++++++++++++++++ Dockerfile.frontend | 21 ++++++++ .../timeline/VideoPlayerSection.tsx | 2 +- app/remotion/Root.tsx | 29 ----------- .../Composition.tsx | 2 +- .../MyComp.tsx | 4 +- app/video-compositions/Root.tsx | 10 ++++ .../VideoPlayer.tsx | 7 +-- app/{remotion => video-compositions}/index.ts | 4 +- app/videorender/Composition.tsx | 2 +- docker-compose.yml | 42 +++++++++++----- eslint.config.js | 2 +- 14 files changed, 123 insertions(+), 104 deletions(-) delete mode 100644 Dockerfile create mode 100644 Dockerfile.backend create mode 100644 Dockerfile.frontend delete mode 100644 app/remotion/Root.tsx rename app/{remotion => video-compositions}/Composition.tsx (97%) rename app/{remotion => video-compositions}/MyComp.tsx (81%) create mode 100644 app/video-compositions/Root.tsx rename app/{remotion => video-compositions}/VideoPlayer.tsx (92%) rename app/{remotion => video-compositions}/index.ts (74%) diff --git a/.dockerignore b/.dockerignore index 9b8d514..919559f 100644 --- a/.dockerignore +++ b/.dockerignore @@ -1,4 +1,11 @@ -.react-router -build node_modules -README.md \ No newline at end of file +build +.react-router +out +*.log +.env +.git +.gitignore +README.md +docker-compose.yml +Dockerfile* \ No newline at end of file diff --git a/Dockerfile b/Dockerfile deleted file mode 100644 index 7dc1fc9..0000000 --- a/Dockerfile +++ /dev/null @@ -1,48 +0,0 @@ -FROM node:23-slim AS pnpm-base -# Install pnpm -RUN npm install -g pnpm -# Install dependencies for remotion -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 -RUN apt-get clean && rm -rf /var/lib/apt/lists/* - -# Development dependencies -FROM pnpm-base AS development-dependencies-env -COPY package.json pnpm-lock.yaml /app/ -WORKDIR /app -RUN pnpm install - -# Production dependencies -FROM pnpm-base AS production-dependencies-env -COPY package.json pnpm-lock.yaml /app/ -WORKDIR /app -RUN pnpm install --frozen-lockfile --prod - -# Build -FROM pnpm-base AS build-env -COPY . /app/ -COPY --from=development-dependencies-env /app/node_modules /app/node_modules -WORKDIR /app -RUN pnpm run build - -# Final image -FROM pnpm-base -COPY package.json pnpm-lock.yaml /app/ -COPY --from=production-dependencies-env /app/node_modules /app/node_modules -COPY --from=build-env /app/build /app/build -WORKDIR /app -CMD ["pnpm", "run", "start"] \ No newline at end of file diff --git a/Dockerfile.backend b/Dockerfile.backend new file mode 100644 index 0000000..39f2d9f --- /dev/null +++ b/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"] \ No newline at end of file diff --git a/Dockerfile.frontend b/Dockerfile.frontend new file mode 100644 index 0000000..2a98a7c --- /dev/null +++ b/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"] \ No newline at end of file diff --git a/app/components/timeline/VideoPlayerSection.tsx b/app/components/timeline/VideoPlayerSection.tsx index 870dbe2..efdad74 100644 --- a/app/components/timeline/VideoPlayerSection.tsx +++ b/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" diff --git a/app/remotion/Root.tsx b/app/remotion/Root.tsx deleted file mode 100644 index a45d0cf..0000000 --- a/app/remotion/Root.tsx +++ /dev/null @@ -1,29 +0,0 @@ -// import React from 'react'; -// import { Composition } from 'remotion'; -// import { MyComposition } from './Composition'; - -// export const RemotionRoot: React.FC = () => { -// return ( -// <> -// -// -// ); -// }; - -import { Composition } from 'remotion'; -import { MyComp } from './MyComp'; - -export const MyVideo = () => { - return ( - <> - - - ); -}; \ No newline at end of file diff --git a/app/remotion/Composition.tsx b/app/video-compositions/Composition.tsx similarity index 97% rename from app/remotion/Composition.tsx rename to app/video-compositions/Composition.tsx index 711a798..b24aff8 100644 --- a/app/remotion/Composition.tsx +++ b/app/video-compositions/Composition.tsx @@ -4,4 +4,4 @@ export const MyComposition = () => {

hello world

) -}; \ No newline at end of file +}; \ No newline at end of file diff --git a/app/remotion/MyComp.tsx b/app/video-compositions/MyComp.tsx similarity index 81% rename from app/remotion/MyComp.tsx rename to app/video-compositions/MyComp.tsx index f3aa78f..9d54d4c 100644 --- a/app/remotion/MyComp.tsx +++ b/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 }) => { ) -}; \ No newline at end of file +}; \ No newline at end of file diff --git a/app/video-compositions/Root.tsx b/app/video-compositions/Root.tsx new file mode 100644 index 0000000..8f5711a --- /dev/null +++ b/app/video-compositions/Root.tsx @@ -0,0 +1,10 @@ +import { Composition } from 'remotion'; +import { MyComp } from './MyComp'; + +export const MyVideo = () => { + return ( + <> + + + ); +}; \ No newline at end of file diff --git a/app/remotion/VideoPlayer.tsx b/app/video-compositions/VideoPlayer.tsx similarity index 92% rename from app/remotion/VideoPlayer.tsx rename to app/video-compositions/VideoPlayer.tsx index e9d86b3..852c883 100644 --- a/app/remotion/VideoPlayer.tsx +++ b/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}

{/* Using scrubber.id as placeholder for text content, update if actual text is available */} + }}>{scrubber.id}

); @@ -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 /> ); -} \ No newline at end of file +} \ No newline at end of file diff --git a/app/remotion/index.ts b/app/video-compositions/index.ts similarity index 74% rename from app/remotion/index.ts rename to app/video-compositions/index.ts index 4dbf689..5e5a1bd 100644 --- a/app/remotion/index.ts +++ b/app/video-compositions/index.ts @@ -1,4 +1,4 @@ import {registerRoot} from 'remotion'; import {MyVideo} from './Root'; - -registerRoot(MyVideo); \ No newline at end of file + +registerRoot(MyVideo); \ No newline at end of file diff --git a/app/videorender/Composition.tsx b/app/videorender/Composition.tsx index 16ae847..db81c01 100644 --- a/app/videorender/Composition.tsx +++ b/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(); diff --git a/docker-compose.yml b/docker-compose.yml index 3a88550..0639717 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,14 +1,34 @@ services: - videoeditor: - image: node:23-slim - container_name: videoeditor + frontend: + build: + context: . + dockerfile: Dockerfile.frontend + container_name: videoeditor-frontend ports: - - "5173:5173" - volumes: - - ./:/app - working_dir: /app + - "3000:3000" environment: - - CI=1 - - COREPACK_ENABLE_AUTO_PIN=0 - command: > - sh -c "npm i -g pnpm install && pnpm run dev --host" \ No newline at end of file + - 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 \ No newline at end of file diff --git a/eslint.config.js b/eslint.config.js index aa7028c..f86d829 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -69,7 +69,7 @@ export default [ } }, { - files: ['app/remotion/*.{ts,tsx}'], + files: ['app/video-compositions/*.{ts,tsx}'], plugins: { '@remotion': remotionPlugin },