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 } |
||||
|
|
||||
|
Statik frontend uygulamalarını `app.frontend()` (veya `router.frontend()`) ile sunabilirsiniz. |
||||
|
|
||||
|
Bu, Vite ile React, TanStack Router, Astro, Vue, Svelte, Angular, Solid ve benzeri statik dosyalar üreten frontend araçları için kullanışlıdır. |
||||
|
|
||||
|
Bu araçlarda genellikle frontend'i build eden bir adım olur, örneğin şöyle bir komutla: |
||||
|
|
||||
|
```bash |
||||
|
npm run build |
||||
|
``` |
||||
|
|
||||
|
Bu komut, frontend dosyalarınızla birlikte `./dist/` gibi bir dizin oluşturur. |
||||
|
|
||||
|
Bu dizini, frontend framework'lerinin ihtiyaç duyduğu kurallara uygun şekilde sunmak için `app.frontend()` kullanabilirsiniz. |
||||
|
|
||||
|
**FastAPI** önce *path operation*'ları kontrol eder. Frontend dosyaları yalnızca hiçbir normal route eşleşmezse kontrol edilir, bu yüzden API'niz bundan etkilenmez. |
||||
|
|
||||
|
## Frontend Sunma { #serve-a-frontend } |
||||
|
|
||||
|
Frontend'inizi build ettikten sonra, örneğin `npm run build` ile, oluşturulan dosyaları bir dizine koyun; örneğin `dist`. |
||||
|
|
||||
|
Proje yapınız şöyle görünebilir: |
||||
|
|
||||
|
```text |
||||
|
. |
||||
|
├── pyproject.toml |
||||
|
├── app |
||||
|
│ ├── __init__.py |
||||
|
│ └── main.py |
||||
|
└── dist |
||||
|
├── index.html |
||||
|
└── assets |
||||
|
└── app.js |
||||
|
``` |
||||
|
|
||||
|
Ardından bunu `app.frontend()` ile sunun: |
||||
|
|
||||
|
{* ../../docs_src/frontend/tutorial001_py310.py hl[5] *} |
||||
|
|
||||
|
Böylece `/assets/app.js` için gelen bir request, `dist/assets/app.js` dosyasını sunabilir. |
||||
|
|
||||
|
Aynı zamanda bir **FastAPI** *path operation*'ınız varsa, öncelik *path operation*'dadır. |
||||
|
|
||||
|
## Client-Side Routing { #client-side-routing } |
||||
|
|
||||
|
**Single-page app**'ler (SPA'ler) dahil birçok frontend uygulaması client-side routing kullanır. `/dashboard/settings` gibi bir path gerçek bir dosya olmayabilir; bunu frontend framework'ü ele alır. |
||||
|
|
||||
|
Bu yüzden, o URL'ye doğrudan erişildiğinde (uygulama içinde gezinmek yerine), backend frontend uygulamasını `index.html` üzerinden sunmalıdır. Böylece frontend framework'ü client-side routing'i işleyebilir. |
||||
|
|
||||
|
Bunun için `fallback="index.html"` kullanın: |
||||
|
|
||||
|
{* ../../docs_src/frontend/tutorial002_py310.py hl[5] *} |
||||
|
|
||||
|
**FastAPI** bu fallback'i yalnızca tarayıcı gezinmesi gibi görünen `GET` ve `HEAD` request'leri için kullanır. JavaScript, CSS ve görseller gibi eksik dosyalar yine `404` döndürür. |
||||
|
|
||||
|
`POST` veya `PUT` gibi diğer metotlarla, yalnızca frontend fallback'i ile eşleşen path'lere yapılan request'ler de `404` döndürür. Normal **FastAPI** *path operation*'ları frontend route'larından yine daha yüksek önceliğe sahiptir. |
||||
|
|
||||
|
/// tip | İpucu |
||||
|
|
||||
|
Varsayılan olarak `fallback`, `fallback="auto"` değerine sahiptir. Çoğu durumda `fallback` belirtmeniz gerekmez. Detaylar için aşağıyı okuyun. |
||||
|
|
||||
|
/// |
||||
|
|
||||
|
Client-side routing kullanan birçok frontend uygulamasında istediğiniz davranış budur; örneğin TanStack Router ile React, Vue, Angular, SvelteKit veya Solid. |
||||
|
|
||||
|
## Özel 404 Sayfası { #custom-404-page } |
||||
|
|
||||
|
Bulunamayan frontend path'leri için statik bir `404.html` sayfası da sunabilirsiniz: |
||||
|
|
||||
|
{* ../../docs_src/frontend/tutorial003_py310.py hl[5] *} |
||||
|
|
||||
|
Bu response, `404` status code'unu korur. |
||||
|
|
||||
|
Bu durumda **FastAPI**, bulunamayan frontend path'leri için `index.html` sunmaz. Bunun yerine `404.html` dosyasını döndürür. |
||||
|
|
||||
|
/// tip | İpucu |
||||
|
|
||||
|
Varsayılan olarak `fallback`, `fallback="auto"` değerine sahiptir. Bu durumda bir `404.html` dosyası bulunursa, otomatik olarak fallback olarak kullanılır. |
||||
|
|
||||
|
Bu yüzden normalde `fallback` argümanını atlayabilirsiniz. |
||||
|
|
||||
|
/// |
||||
|
|
||||
|
Bu, Astro gibi her sayfa için statik HTML dosyaları üreten frontend araçlarıyla kullanışlıdır. |
||||
|
|
||||
|
## Otomatik Fallback { #fallback-auto } |
||||
|
|
||||
|
Varsayılan olarak `app.frontend()`, `fallback="auto"` kullanır. |
||||
|
|
||||
|
Frontend dizininde bir `404.html` dosyası varsa, bulunamayan frontend path'leri bu dosyayı `404` status code'u ile sunar. |
||||
|
|
||||
|
Aksi halde bir `index.html` dosyası varsa, bulunamayan tarayıcı gezinme path'leri `index.html` sunar. Client-side routing kullanan birçok frontend uygulamasının beklediği davranış budur. |
||||
|
|
||||
|
Bu yüzden çoğu durumda `fallback` argümanını belirtmeden `app.frontend("/", directory="dist")` kullanabilirsiniz. |
||||
|
|
||||
|
{* ../../docs_src/frontend/tutorial001_py310.py hl[5] *} |
||||
|
|
||||
|
## Fallback'i Devre Dışı Bırakma { #disable-fallback } |
||||
|
|
||||
|
Bulunamayan frontend path'leri için fallback dosyası sunmak istemiyorsanız `fallback=None` kullanın: |
||||
|
|
||||
|
{* ../../docs_src/frontend/tutorial005_py310.py hl[5] *} |
||||
|
|
||||
|
Bundan sonra bulunamayan frontend path'leri normal `404` döndürür. |
||||
|
|
||||
|
## Dizini Kontrol Etme { #check-directory } |
||||
|
|
||||
|
Varsayılan olarak `app.frontend()`, uygulama oluşturulduğunda dizinin var olduğunu kontrol eder. |
||||
|
|
||||
|
Bu, yapılandırma hatalarını erken yakalamaya yardımcı olur. Örneğin frontend build çıktısı dizini yoksa, **FastAPI** başlangıçta hata verir. |
||||
|
|
||||
|
Frontend dosyalarınız daha sonra oluşturuluyorsa, örneğin app nesnesi oluşturulduktan sonra ayrı bir build adımıyla, `check_dir=False` ayarlayın: |
||||
|
|
||||
|
{* ../../docs_src/frontend/tutorial006_py310.py hl[5] *} |
||||
|
|
||||
|
`check_dir=False` ile **FastAPI**, app oluşturulduğunda dizini kontrol etmez. Yapılandırılan dizin bir request işlendiği sırada hâlâ yoksa, **FastAPI** o zaman hata verir. |
||||
|
|
||||
|
## `APIRouter` ile Kullanma { #use-it-with-apirouter } |
||||
|
|
||||
|
Frontend dosyalarını bir `APIRouter`'a da ekleyebilir ve bunu bir prefix ile dahil edebilirsiniz: |
||||
|
|
||||
|
{* ../../docs_src/frontend/tutorial004_py310.py hl[6,7] *} |
||||
|
|
||||
|
Bu örnekte frontend path'leri `/app` altında sunulur. |
||||
|
|
||||
|
Uygulamadaki herhangi bir normal *path operation*, diğer router'larda olanlar dahil, yine öncelikli olur. |
||||
|
|
||||
|
## Yalnızca Statik Build Çıktısı { #static-build-output-only } |
||||
|
|
||||
|
`app.frontend()`, frontend build'iniz tarafından önceden oluşturulmuş dosyaları sunar. |
||||
|
|
||||
|
Server-side rendering çalıştırmaz. Her request için server'da dinamik rendering gerektiren framework'ler için değil, statik dosyalar üreten frontend framework'leri içindir. |
||||
Loading…
Reference in new issue