React Router video

Create a signed upload URL in a resource route action and let the browser upload to it directly. The file never passes through your app, so request size limits and timeouts do not apply at any file size.

Both. Remix v2 was upstreamed into React Router and is in maintenance mode, so create-remix now points at create-react-router. On an existing Remix codebase the code is identical apart from importing from @remix-run/* and registering routes by filename.

Framework Mode registers routes explicitly rather than discovering them by filename, so creating app/routes/api.upload-url.ts puts a file on disk and nothing else. Add it to app/routes.ts and restart the dev server, since the config is read at startup.

Fetch the playback ID in a loader and pass it to a player component. Import the player inside useEffect, because React Router server-renders your routes and the player registers against customElements. Safari plays HLS natively and other browsers do not, which a player component handles for you.

In the loader. It runs on the server, so credentials stay there and only the ID reaches the browser. It is also the only place a signed token can be created for private playback, since that needs a private key.

Two things. Keep it unprefixed in .env, because React Router builds with Vite and Vite inlines every VITE_ variable into the browser bundle. And create the SDK client in a .server.ts module, imported only from loaders and actions.

The player is imported at the top of the file and evaluated during server rendering. Load it inside useEffect. The element sits in the markup from the first render and upgrades itself as soon as the definition arrives, so nothing flashes.

Yes. Loaders, actions, resource routes and the .server.ts convention all survive unchanged, and the packages do not change at all. What changes is route registration, the import specifiers, and route types now coming from react-router typegen rather than inference.