From ddccc80a70e9a2db2dee9dc6ae310c35eeff447c Mon Sep 17 00:00:00 2001 From: Evandro Fonseca Junior Date: Mon, 14 Sep 2026 06:04:25 -0300 Subject: [PATCH] fix(web): faz o modo dev funcionar e unifica a URL da API MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- web/src/components/feature/DownloadItem.tsx | 6 ++++-- web/src/components/ui/Input.tsx | 3 +-- web/src/components/ui/Textarea.tsx | 3 +-- web/src/context/SessionContext.tsx | 3 +++ web/vite.config.ts | 12 ++++++++++++ 5 files changed, 21 insertions(+), 6 deletions(-) diff --git a/web/src/components/feature/DownloadItem.tsx b/web/src/components/feature/DownloadItem.tsx index 7849379..053a230 100644 --- a/web/src/components/feature/DownloadItem.tsx +++ b/web/src/components/feature/DownloadItem.tsx @@ -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"); } }; diff --git a/web/src/components/ui/Input.tsx b/web/src/components/ui/Input.tsx index c7e71f8..21daa58 100644 --- a/web/src/components/ui/Input.tsx +++ b/web/src/components/ui/Input.tsx @@ -1,8 +1,7 @@ import * as React from "react"; import { cn } from "../../lib/utils"; -export interface InputProps - extends React.InputHTMLAttributes { } +export type InputProps = React.InputHTMLAttributes; const Input = React.forwardRef( ({ className, type, ...props }, ref) => { diff --git a/web/src/components/ui/Textarea.tsx b/web/src/components/ui/Textarea.tsx index 816eb73..f05f1f6 100644 --- a/web/src/components/ui/Textarea.tsx +++ b/web/src/components/ui/Textarea.tsx @@ -1,8 +1,7 @@ import * as React from "react"; import { cn } from "../../lib/utils"; -export interface TextareaProps - extends React.TextareaHTMLAttributes { } +export type TextareaProps = React.TextareaHTMLAttributes; const Textarea = React.forwardRef( ({ className, ...props }, ref) => { diff --git a/web/src/context/SessionContext.tsx b/web/src/context/SessionContext.tsx index 2d29708..07464c7 100644 --- a/web/src/context/SessionContext.tsx +++ b/web/src/context/SessionContext.tsx @@ -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"); diff --git a/web/vite.config.ts b/web/vite.config.ts index 8b0f57b..586e8fb 100644 --- a/web/vite.config.ts +++ b/web/vite.config.ts @@ -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, + }, + }, + }, })