React Video Uploader

Upload videos in React with server-side rendering and NodeJS streaming.

This project uses fluent-ffmpeg to generate preview thumbnails, gifs, posters and media info.

To get going, you can either use with or without docker. If you use without docker, you'll need node, npm, ffmpeg and either flvtool2 or flvmeta installed. You can get away without having ffmpeg and either flvtool2 or flvmeta, as long as you don't upload any files.

Features

• Form validation on both client and server. Server also validates file headers.
• WebSockets used during file upload to provide status updates.
• Server-side rendering.
• NodeJS streaming. Full support for browsers, and opt out for bots, etc.
• Hot reloading.
• Code Splitting.
• Smooth page transitions in React.lazy and React.Suspense with BrowserRouter.
• Material-UI.
• SASS.
• Docker.
• Linting for TypeScript, JavaScript, SASS, MarkDown and Yaml.
• Dark mode support @media (prefers-color-scheme: dark) via sass mixin @include prefers-dark-mode {}.

With docker

docker-compose up -d --build

then exec into the container:

docker exec -it node bash

Then continue on as normal

With/Without docker

Install modules:

npm i

Build everything:

npm run build

Serve files from the ./build/ directory:

npm run start

Now open http://localhost:3000/ in your browser.

Development

Watch mode (requires Node >=18)

npm run dev

Non watch mode

npm run dev:no-watch

Config

Config file is located in ./src/config/index.ts.

Tests

Unit

npm test

E2E

npm run test:e2e

OR

npm run test:e2e:ui

Measuring Performance

To measure any of the supported metrics, you need to pass a function into the webVitals.callback in ./src/config/index.ts and set webVitals.callback to true.

More info here and here.

TODO

• Cancel upload button
• Fix service worker issue in production.