fix(web): faz o modo dev funcionar e unifica a URL da API

Com `pnpm dev` e nenhuma configuração, o frontend chamava `/api` na própria
origem do Vite (5173), que devolvia o index.html da SPA em vez de JSON, e a
sessão nunca inicializava. Além disso os dois arquivos que falam com a API
usavam padrões diferentes: `SessionContext` usava URL relativa (correto em
produção, onde o Fastify serve a API e o build) e `DownloadItem` fixava
`http://localhost:3000`, o que quebra o botão "Save to Disk" quando o app roda
em outra máquina/VPS.

- `vite.config.ts`: proxy de `/api` para o backend em dev (alvo configurável por
  `VITE_API_PROXY`, padrão `http://localhost:3000`).
- `DownloadItem.tsx`: mesma origem por padrão, igual ao SessionContext
  (`VITE_API_URL` continua valendo para apontar para outro host).

Também deixa `pnpm --filter web lint` verde (4 erros do eslint): tipos de props
de Input/Textarea como type alias, `catch` sem binding e uma exceção
documentada para a regra de fast refresh no módulo do contexto.
This commit is contained in:
Evandro Fonseca Junior committed 2026-09-14 06:04:25 -03:00
1 parent b19c989c0e
commit ddccc80a70
5 files changed
+21 -6

No files matched your search

+4 -2
View File
@@ -10,7 +10,9 @@ import { Card, CardContent } from "../ui/Card";
import { Progress } from "../ui/ProgressBar";
import { formatBytes, formatSpeed } from "../../lib/utils";
const API_URL = import.meta.env.VITE_API_URL || "http://localhost:3000";
// Mesma origem por padrão (em produção o Fastify serve a API e o build do front).
// Defina VITE_API_URL para apontar para outro host.
const API_URL = import.meta.env.VITE_API_URL || "";
export type DownloadStatus = "queued" | "downloading" | "completed" | "error";
@@ -55,7 +57,7 @@ export function DownloadItem({ item }: DownloadItemProps) {
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
} catch (e) {
} catch {
alert("Failed to download file");
}
};
+1 -2
View File
@@ -1,8 +1,7 @@
import * as React from "react";
import { cn } from "../../lib/utils";
export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> { }
export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, ...props }, ref) => {
+1 -2
View File
@@ -1,8 +1,7 @@
import * as React from "react";
import { cn } from "../../lib/utils";
export interface TextareaProps
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> { }
export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
({ className, ...props }, ref) => {
+3
View File
@@ -126,6 +126,9 @@ export function SessionProvider({ children }: { children: React.ReactNode }) {
);
}
// O hook é exportado junto do provider de propósito: o arquivo é o módulo do
// contexto da sessão. A regra abaixo só afeta o Fast Refresh em desenvolvimento.
// eslint-disable-next-line react-refresh/only-export-components
export function useSession() {
const context = useContext(SessionContext);
if (!context) throw new Error("useSession must be used within SessionProvider");
+12
View File
@@ -4,4 +4,16 @@ import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
server: {
// O frontend chama a API na mesma origem (URL relativa). Em produção quem
// serve o build é o próprio Fastify; em desenvolvimento este proxy encaminha
// /api para o backend. Ajuste o alvo com VITE_API_PROXY se o backend não
// estiver na porta padrão (3000).
proxy: {
'/api': {
target: process.env.VITE_API_PROXY ?? 'http://localhost:3000',
changeOrigin: true,
},
},
},
})