Browse Source
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>pull/15903/head
committed by
GitHub
1 changed files with 133 additions and 0 deletions
@ -0,0 +1,133 @@ |
|||
# Frontend { #frontend } |
|||
|
|||
Você pode servir aplicações frontend estáticas com `app.frontend()` ou `router.frontend()`. |
|||
|
|||
Isso é útil para ferramentas de frontend que geram arquivos estáticos, como React com Vite, TanStack Router, Astro, Vue, Svelte, Angular, Solid e outras. |
|||
|
|||
Com essas ferramentas, normalmente há uma etapa que faz o build do frontend, com um comando como: |
|||
|
|||
```bash |
|||
npm run build |
|||
``` |
|||
|
|||
Isso geraria um diretório como `./dist/` com seus arquivos de frontend. |
|||
|
|||
Você pode usar `app.frontend()` para servir esse diretório seguindo as convenções necessárias por esses frameworks de frontend. |
|||
|
|||
**FastAPI** verifica as *operações de rota* primeiro. Os arquivos de frontend são verificados somente se nenhuma rota normal corresponder, então sua API não será afetada. |
|||
|
|||
## Sirva um Frontend { #serve-a-frontend } |
|||
|
|||
Depois de fazer o build do seu frontend, por exemplo com `npm run build`, coloque os arquivos gerados em um diretório, por exemplo, `dist`. |
|||
|
|||
A estrutura do seu projeto poderia ser assim: |
|||
|
|||
```text |
|||
. |
|||
├── pyproject.toml |
|||
├── app |
|||
│ ├── __init__.py |
|||
│ └── main.py |
|||
└── dist |
|||
├── index.html |
|||
└── assets |
|||
└── app.js |
|||
``` |
|||
|
|||
Então sirva-o com `app.frontend()`: |
|||
|
|||
{* ../../docs_src/frontend/tutorial001_py310.py hl[5] *} |
|||
|
|||
Com isso, um request para `/assets/app.js` pode servir `dist/assets/app.js`. |
|||
|
|||
Se você também tiver uma *operação de rota* do **FastAPI**, a *operação de rota* tem prioridade. |
|||
|
|||
## Roteamento no Lado do Cliente { #client-side-routing } |
|||
|
|||
Muitas aplicações frontend, incluindo **aplicações de página única** (SPAs), usam roteamento no lado do cliente. Um path como `/dashboard/settings` pode não ser um arquivo real, mas o framework cuidaria de lidar com ele. |
|||
|
|||
Então, ao acessar essa URL diretamente (em vez de navegar pela aplicação), o backend deveria servir a aplicação frontend a partir de `index.html`, para que o framework de frontend possa então lidar com o roteamento no lado do cliente. |
|||
|
|||
Para isso, use `fallback="index.html"`: |
|||
|
|||
{* ../../docs_src/frontend/tutorial002_py310.py hl[5] *} |
|||
|
|||
**FastAPI** usa esse fallback somente para requests `GET` e `HEAD` que parecem navegação do navegador. Arquivos ausentes como JavaScript, CSS e imagens ainda retornam `404`. |
|||
|
|||
Requests com outros métodos, como `POST` ou `PUT`, para paths que correspondem apenas ao fallback do frontend também retornam `404`. *Operações de rota* regulares do **FastAPI** ainda têm prioridade maior que rotas de frontend. |
|||
|
|||
/// tip | Dica |
|||
|
|||
Por padrão, `fallback` tem o valor `fallback="auto"`. Na maioria dos casos, você não precisará especificar `fallback`. Leia abaixo para detalhes. |
|||
|
|||
/// |
|||
|
|||
Isso é o que você desejaria com muitas aplicações frontend que usam roteamento no lado do cliente, por exemplo, React com TanStack Router, Vue, Angular, SvelteKit ou Solid. |
|||
|
|||
## Página 404 Personalizada { #custom-404-page } |
|||
|
|||
Você também pode servir uma página estática `404.html` para paths de frontend ausentes: |
|||
|
|||
{* ../../docs_src/frontend/tutorial003_py310.py hl[5] *} |
|||
|
|||
Essa response mantém um código de status `404`. |
|||
|
|||
Neste caso, **FastAPI** não servirá `index.html` para paths de frontend ausentes. Ele retornará o arquivo `404.html` em vez disso. |
|||
|
|||
/// tip | Dica |
|||
|
|||
Por padrão, `fallback` tem o valor `fallback="auto"`. Com isso, se um arquivo `404.html` for encontrado, ele será usado automaticamente como fallback. |
|||
|
|||
Então, normalmente você pode omitir o argumento `fallback`. |
|||
|
|||
/// |
|||
|
|||
Isso é útil com ferramentas de frontend que geram arquivos HTML estáticos para cada página, como Astro. |
|||
|
|||
## Fallback Automático { #fallback-auto } |
|||
|
|||
Por padrão, `app.frontend()` usa `fallback="auto"`. |
|||
|
|||
Se houver um arquivo `404.html` no diretório do frontend, paths de frontend ausentes servem esse arquivo com código de status `404`. |
|||
|
|||
Caso contrário, se houver um arquivo `index.html`, paths de navegação do navegador ausentes servem `index.html`, que é o que muitas aplicações frontend com roteamento no lado do cliente esperam. |
|||
|
|||
Então, na maioria dos casos, você pode usar `app.frontend("/", directory="dist")` sem especificar o argumento `fallback`. |
|||
|
|||
{* ../../docs_src/frontend/tutorial001_py310.py hl[5] *} |
|||
|
|||
## Desative o Fallback { #disable-fallback } |
|||
|
|||
Se você não quiser servir um arquivo de fallback para paths de frontend ausentes, use `fallback=None`: |
|||
|
|||
{* ../../docs_src/frontend/tutorial005_py310.py hl[5] *} |
|||
|
|||
Então paths de frontend ausentes retornam o `404` normal. |
|||
|
|||
## Verifique o Diretório { #check-directory } |
|||
|
|||
Por padrão, `app.frontend()` verifica se o diretório existe quando a aplicação é criada. |
|||
|
|||
Isso ajuda a identificar erros de configuração cedo. Por exemplo, se o diretório de saída do build do frontend estiver ausente, **FastAPI** gerará um erro na inicialização. |
|||
|
|||
Se seus arquivos de frontend forem criados depois, por exemplo por uma etapa de build separada após o objeto da aplicação ser criado, defina `check_dir=False`: |
|||
|
|||
{* ../../docs_src/frontend/tutorial006_py310.py hl[5] *} |
|||
|
|||
Com `check_dir=False`, **FastAPI** não verificará o diretório quando a aplicação for criada. Se o diretório configurado ainda estiver ausente quando um request for processado, **FastAPI** gerará um erro nesse momento. |
|||
|
|||
## Use com `APIRouter` { #use-it-with-apirouter } |
|||
|
|||
Você também pode adicionar arquivos de frontend a um `APIRouter` e incluí-lo com um prefixo: |
|||
|
|||
{* ../../docs_src/frontend/tutorial004_py310.py hl[6,7] *} |
|||
|
|||
Neste exemplo, os paths de frontend são servidos em `/app`. |
|||
|
|||
Quaisquer *operações de rota* regulares na aplicação ainda terão precedência, inclusive em outros routers. |
|||
|
|||
## Apenas Saída de Build Estático { #static-build-output-only } |
|||
|
|||
`app.frontend()` serve arquivos já gerados pelo build do seu frontend. |
|||
|
|||
Ele não executa renderização no lado do servidor. Ele é para frameworks de frontend que geram arquivos estáticos, não para frameworks que precisam de renderização dinâmica no servidor para cada request. |
|||
Loading…
Reference in new issue