{"id":35286,"date":"2025-11-27T23:01:13","date_gmt":"2025-11-27T20:01:13","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/vite-kemal-kurulumu-modern-web-uygulamalari-nasil-gelistirilir\/"},"modified":"2025-11-27T23:01:13","modified_gmt":"2025-11-27T20:01:13","slug":"vite-kemal-kurulumu-modern-web-uygulamalari-nasil-gelistirilir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vite-kemal-kurulumu-modern-web-uygulamalari-nasil-gelistirilir\/","title":{"rendered":"Vite Kemal Kurulumu: Modern Web Uygulamalar\u0131 Nas\u0131l Geli\u015ftirilir?"},"content":{"rendered":"<p><body><\/p>\n<p>Vite ve Kemal ile modern, h\u0131zl\u0131 ve dinamik web uygulamalar\u0131 geli\u015ftirmeye haz\u0131r m\u0131s\u0131n\u0131z? Bu kapsaml\u0131 rehberle ad\u0131m ad\u0131m kurulumu, entegrasyonu ve en iyi uygulamalar\u0131 ke\u015ffedin. Frontend ve backend g\u00fc\u00e7lerini birle\u015ftirerek projelerinizi bir sonraki seviyeye ta\u015f\u0131y\u0131n.<\/p>\n<p>G\u00fcn\u00fcm\u00fcz web geli\u015ftirme d\u00fcnyas\u0131, s\u00fcrekli de\u011fi\u015fen teknolojiler ve artan kullan\u0131c\u0131 beklentileri nedeniyle karma\u015f\u0131k bir hal alm\u0131\u015ft\u0131r. Geli\u015ftiriciler, hem h\u0131zl\u0131 prototipleme yapabilen hem de \u00fcretimde y\u00fcksek performans sunan ara\u00e7lara ihtiya\u00e7 duymaktad\u0131r. Eski nesil bundler&#8217;lar ve sunucu framework&#8217;leri, genellikle yava\u015f derleme s\u00fcreleri ve karma\u015f\u0131k yap\u0131land\u0131rmalarla bo\u011fu\u015furken, yeni nesil ara\u00e7lar bu zorluklara yenilik\u00e7i \u00e7\u00f6z\u00fcmler getiriyor. \u0130\u015fte bu noktada, frontend i\u00e7in Vite ve backend i\u00e7in Kemal, bu karma\u015f\u0131kl\u0131\u011f\u0131 a\u015fmak ve geli\u015ftirme deneyimini optimize etmek i\u00e7in harika bir ikili olu\u015fturuyor.<\/p>\n<p>Modern web uygulamalar\u0131, genellikle bir frontend (kullan\u0131c\u0131n\u0131n g\u00f6rd\u00fc\u011f\u00fc aray\u00fcz) ve bir backend (veritaban\u0131 i\u015flemleri, API&#8217;ler ve i\u015f mant\u0131\u011f\u0131) olmak \u00fczere iki ana bile\u015fenden olu\u015fur. Bu iki bile\u015fenin sorunsuz bir \u015fekilde entegre olmas\u0131, hem geli\u015ftirme s\u00fcrecinde verimlilik hem de son \u00fcr\u00fcn\u00fcn performans\u0131 a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. Vite, geli\u015ftirme h\u0131z\u0131n\u0131 ve deneyimini \u00f6n planda tutan bir frontend build arac\u0131 iken, Kemal, Crystal programlama dilinin g\u00fcc\u00fcyle y\u00fcksek performansl\u0131 ve h\u0131zl\u0131 backend hizmetleri sunan bir web framework&#8217;\u00fcd\u00fcr. Bu makalede, bu iki teknolojiyi bir araya getirerek nas\u0131l g\u00fc\u00e7l\u00fc ve verimli web uygulamalar\u0131 geli\u015ftirebilece\u011finizi ad\u0131m ad\u0131m inceleyece\u011fiz. Ama\u00e7, s\u0131f\u0131rdan ba\u015flayan bir geli\u015ftiricinin bile bu entegrasyonu rahatl\u0131kla yapabilmesini sa\u011flamak ve daha deneyimli kullan\u0131c\u0131lara ileri d\u00fczey ipu\u00e7lar\u0131 sunmakt\u0131r.<\/p>\n<h3>Frontend D\u00fcnyas\u0131nda Vite Neden \u00d6ne \u00c7\u0131k\u0131yor?<\/h3>\n<p>Vite, &#8220;Frans\u0131zca h\u0131zl\u0131&#8221; anlam\u0131na gelen bir kelimedir ve ad\u0131n\u0131n hakk\u0131n\u0131 fazlas\u0131yla verir. Geleneksel bundler&#8217;lar (Webpack, Rollup gibi) genellikle t\u00fcm uygulaman\u0131z\u0131 derleyip tek bir paket haline getirirken, Vite taray\u0131c\u0131n\u0131n yerel ES mod\u00fcl yeteneklerini kullanarak bu s\u00fcreci tamamen de\u011fi\u015ftirir. Bu, \u00f6zellikle geli\u015ftirme ortam\u0131nda devasa bir h\u0131z fark\u0131 yarat\u0131r. Mod\u00fcl tabanl\u0131 geli\u015ftirme yakla\u015f\u0131m\u0131 sayesinde, sadece de\u011fi\u015fen mod\u00fcller yeniden derlenir, bu da an\u0131nda Hot Module Replacement (HMR) sa\u011flamas\u0131 anlam\u0131na gelir. Ba\u015fka bir deyi\u015fle, kodunuzda yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fiklikler neredeyse an\u0131nda taray\u0131c\u0131da yans\u0131r, bu da geli\u015ftirme ak\u0131\u015f\u0131n\u0131 inan\u0131lmaz derecede h\u0131zland\u0131r\u0131r.<\/p>\n<p>Vite&#8217;\u0131n \u00f6ne \u00e7\u0131kan baz\u0131 temel \u00f6zellikleri \u015funlard\u0131r:<\/p>\n<ul>\n<li><strong>An\u0131nda Sunucu Ba\u015flang\u0131c\u0131:<\/strong> Geli\u015ftirme sunucusunu milisaniyeler i\u00e7inde ba\u015flat\u0131r. B\u00fcy\u00fck projelerde bile bekleme s\u00fcresi neredeyse yoktur.<\/li>\n<li><strong>Talep \u00dczerine Derleme:<\/strong> Yaln\u0131zca taray\u0131c\u0131 taraf\u0131ndan talep edilen mod\u00fclleri derler, bu da ba\u015flang\u0131\u00e7 y\u00fckleme s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.<\/li>\n<li><strong>H\u0131zl\u0131 Mod\u00fcl De\u011fi\u015fimi (HMR):<\/strong> Uygulaman\u0131z\u0131n durumunu kaybetmeden kodunuzdaki de\u011fi\u015fiklikleri an\u0131nda yans\u0131t\u0131r. Bu, kullan\u0131c\u0131 aray\u00fcz\u00fc geli\u015ftirirken paha bi\u00e7ilmez bir \u00f6zelliktir.<\/li>\n<li><strong>Esnek Yap\u0131land\u0131rma:<\/strong> \u00c7o\u011fu senaryo i\u00e7in s\u0131f\u0131r yap\u0131land\u0131rma gerektirir, ancak ihtiyac\u0131n\u0131z oldu\u011funda olduk\u00e7a esnek bir API ile kolayca \u00f6zelle\u015ftirilebilir.<\/li>\n<li><strong>Modern Taray\u0131c\u0131 Deste\u011fi:<\/strong> En son JavaScript \u00f6zelliklerini destekler ve \u00fcretim i\u00e7in Rollup tabanl\u0131 bir derleme s\u00fcreci sunar, bu da optimize edilmi\u015f ve hafif \u00e7\u0131kt\u0131lar sa\u011flar.<\/li>\n<\/ul>\n<p>Bu \u00f6zellikler sayesinde Vite, React, Vue, Svelte gibi pop\u00fcler frontend k\u00fct\u00fcphaneleri ve framework&#8217;leri ile kusursuz bir uyum i\u00e7inde \u00e7al\u0131\u015f\u0131r. Geli\u015ftiriciler, karma\u015f\u0131k yap\u0131land\u0131rma dosyalar\u0131yla u\u011fra\u015fmak yerine, projenin kendisini geli\u015ftirmeye odaklanabilirler. Bu da, modern web geli\u015ftirmenin kar\u015f\u0131la\u015ft\u0131\u011f\u0131 en b\u00fcy\u00fck zorluklardan biri olan zaman kayb\u0131n\u0131 minimuma indirir ve genel geli\u015ftirici deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir.<\/p>\n<h3>Backend G\u00fcc\u00fc: Crystal ve Kemal Framework&#8217;\u00fc Nedir?<\/h3>\n<p>Backend taraf\u0131nda ise, Crystal programlama dili ve onun \u00fczerine in\u015fa edilmi\u015f Kemal web framework&#8217;\u00fc, performans\u0131 ve geli\u015ftirici dostu yap\u0131s\u0131yla dikkat \u00e7ekiyor. Crystal, Ruby dilinin zarif s\u00f6zdizimini, C dilinin h\u0131z\u0131yla birle\u015ftirmeyi hedefleyen a\u00e7\u0131k kaynakl\u0131, statik olarak tiple\u015ftirilmi\u015f, derlenmi\u015f bir dildir. Bu kombinasyon, geli\u015ftiricilere Ruby benzeri bir \u00fcretkenlik sunarken, derlenmi\u015f dil olman\u0131n getirdi\u011fi \u00fcst\u00fcn performans avantajlar\u0131ndan faydalanma imkan\u0131 sa\u011flar.<\/p>\n<p>Kemal, Crystal i\u00e7in hafif, h\u0131zl\u0131 ve esnek bir web framework&#8217;\u00fcd\u00fcr. Sinatra veya Express.js gibi mikro framework&#8217;lere benzer bir yap\u0131y\u0131 benimser ve API tabanl\u0131 uygulamalar veya k\u00fc\u00e7\u00fck web servisleri geli\u015ftirmek i\u00e7in idealdir. Kemal&#8217;in temel \u00f6zellikleri \u015funlard\u0131r:<\/p>\n<ul>\n<li><strong>Y\u00fcksek Performans:<\/strong> Crystal&#8217;\u0131n derlenmi\u015f do\u011fas\u0131 sayesinde, Kemal uygulamalar\u0131 inan\u0131lmaz derecede h\u0131zl\u0131 \u00e7al\u0131\u015f\u0131r ve d\u00fc\u015f\u00fck bellek t\u00fcketimi sunar. Bu, y\u00fcksek trafikli uygulamalar i\u00e7in kritik bir avantajd\u0131r.<\/li>\n<li><strong>Kolay Kullan\u0131m:<\/strong> Sezgisel ve minimalist bir API sunar. Rota tan\u0131mlamalar\u0131, request\/response i\u015flemleri olduk\u00e7a basittir, bu da geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r.<\/li>\n<li><strong>Geni\u015fletilebilirlik:<\/strong> Middleware&#8217;ler ve shard&#8217;lar (Crystal paketleri) arac\u0131l\u0131\u011f\u0131yla kolayca geni\u015fletilebilir. Bu sayede, uygulaman\u0131za ihtiya\u00e7 duydu\u011funuz \u00f6zellikleri kolayca entegre edebilirsiniz.<\/li>\n<li><strong>Crystal Ekosistemi:<\/strong> Crystal&#8217;\u0131n zengin k\u00fct\u00fcphane ekosisteminden (shard&#8217;lar) faydalan\u0131r. Veritaban\u0131 ba\u011flant\u0131lar\u0131, ORM&#8217;ler, test ara\u00e7lar\u0131 gibi bir\u00e7ok haz\u0131r \u00e7\u00f6z\u00fcm mevcuttur.<\/li>\n<li><strong>G\u00fcvenli ve Sa\u011flam:<\/strong> Statik tipleme, derleme zaman\u0131nda bir\u00e7ok hatan\u0131n yakalanmas\u0131n\u0131 sa\u011flayarak daha g\u00fcvenli ve sa\u011flam uygulamalar geli\u015ftirilmesine yard\u0131mc\u0131 olur.<\/li>\n<\/ul>\n<p>Vite ile Kemal&#8217;i birle\u015ftirdi\u011fimizde, frontend taraf\u0131nda h\u0131zl\u0131 geli\u015ftirme ve HMR avantajlar\u0131n\u0131 elde ederken, backend taraf\u0131nda Crystal&#8217;\u0131n ve Kemal&#8217;in getirdi\u011fi y\u00fcksek performans, g\u00fcvenilirlik ve d\u00fc\u015f\u00fck kaynak t\u00fcketimi ile \u00f6l\u00e7eklenebilir bir yap\u0131ya kavu\u015furuz. Bu, hem geli\u015ftirme s\u00fcrecini keyifli hale getirir hem de son kullan\u0131c\u0131ya ak\u0131c\u0131 ve h\u0131zl\u0131 bir deneyim sunar. Bu g\u00fc\u00e7l\u00fc kombinasyon, modern web projeleriniz i\u00e7in sa\u011flam bir temel olu\u015fturman\u0131za olanak tan\u0131r.<\/p>\n<h2>S\u0131f\u0131rdan Vite ve Kemal Projesi Nas\u0131l Ba\u015flat\u0131l\u0131r?<\/h2>\n<p>Herhangi bir modern web uygulamas\u0131 geli\u015ftirme s\u00fcrecinde ilk ad\u0131m, gerekli ara\u00e7lar\u0131 kurmak ve projenin temel iskeletini olu\u015fturmakt\u0131r. Vite ve Kemal entegrasyonu i\u00e7in de bu durum ge\u00e7erlidir. Bu b\u00f6l\u00fcmde, hem frontend hem de backend geli\u015ftirme i\u00e7in ihtiya\u00e7 duyaca\u011f\u0131m\u0131z ortamlar\u0131 haz\u0131rlayacak ve temel proje yap\u0131lar\u0131n\u0131 olu\u015fturaca\u011f\u0131z. Bu ad\u0131mlar\u0131 dikkatlice takip ederek, projenizin temelini sa\u011flam bir \u015fekilde atabilirsiniz.<\/p>\n<h3>Gerekli Ortam Kurulumlar\u0131 Nelerdir?<\/h3>\n<p>Vite ve Kemal ile \u00e7al\u0131\u015fmaya ba\u015flamadan \u00f6nce sisteminizde belirli yaz\u0131l\u0131mlar\u0131n kurulu olmas\u0131 gerekmektedir. \u0130\u015fte ad\u0131m ad\u0131m kurulum rehberi:<\/p>\n<ol>\n<li><strong>Crystal Dili ve Shard Paket Y\u00f6neticisi Kurulumu:<\/strong>\n<p>Crystal&#8217;\u0131 kurman\u0131n birka\u00e7 yolu vard\u0131r. Kulland\u0131\u011f\u0131n\u0131z i\u015fletim sistemine g\u00f6re en uygun y\u00f6ntemi se\u00e7melisiniz. Genellikle resmi dok\u00fcmantasyonda \u00f6nerilen y\u00f6ntemleri takip etmek en iyisidir.<\/p>\n<ul>\n<li><strong>Linux (Ubuntu\/Debian \u00f6rne\u011fi):<\/strong>\n<p>\u00d6ncelikle GPG anahtar\u0131n\u0131 ve Crystal deposunu ekleyin:<\/p>\n<pre><code>curl -fsSL https:\/\/crystal-lang.org\/install.sh | sudo bash<\/pre>\n<p><\/code><\/p>\n<p>Veya:<\/p>\n<pre><code>sudo apt-get update\nsudo apt-get install -y software-properties-common\nsudo apt-add-repository ppa:crystal-lang\/ppa\nsudo apt-get update\nsudo apt-get install crystal<\/pre>\n<p><\/code><\/p>\n<p>Kurulumu kontrol edin:<\/p>\n<pre><code>crystal -v<\/pre>\n<p><\/code><\/p>\n<p>Bu komut Crystal versiyonunu g\u00f6stermelidir. Shard, Crystal ile birlikte gelir.<\/p>\n<\/li>\n<li><strong>macOS (Homebrew ile):<\/strong>\n<p>Homebrew y\u00fckl\u00fc de\u011filse, Homebrew web sitesinden kurulumunu yap\u0131n. Ard\u0131ndan:<\/p>\n<pre><code>brew install crystal-lang<\/pre>\n<p><\/code><\/p>\n<p>Kurulumu kontrol edin:<\/p>\n<pre><code>crystal -v<\/pre>\n<p><\/code>\n            <\/li>\n<li><strong>Windows:<\/strong>\n<p>Windows i\u00e7in Crystal kurulumu biraz daha karma\u015f\u0131k olabilir. Genellikle WSL (Windows Subsystem for Linux) kullanmak veya resmi web sitesindeki y\u00f6nergeleri takip etmek en iyi yoldur. WSL ile yukar\u0131daki Linux ad\u0131mlar\u0131n\u0131 izleyebilirsiniz.<\/p>\n<\/li>\n<\/ul>\n<div class=\"expert-tip\">\n          Uzman \u0130pucu: Crystal kurulumu s\u0131ras\u0131nda bir sorun ya\u015farsan\u0131z, resmi Crystal dok\u00fcmantasyonunu (crystal-lang.org) kontrol etmek en g\u00fcncel ve do\u011fru bilgiyi sa\u011flayacakt\u0131r.\n        <\/div>\n<\/li>\n<li><strong>Node.js ve npm\/yarn Kurulumu:<\/strong>\n<p>Vite bir Node.js tabanl\u0131 bir ara\u00e7 oldu\u011fundan, Node.js ve npm (Node Package Manager) veya yarn'\u0131n sisteminizde kurulu olmas\u0131 gerekir. Bunlar genellikle birlikte gelir.<\/p>\n<ul>\n<li><strong>T\u00fcm \u0130\u015fletim Sistemleri:<\/strong>\n<p>Node.js'in resmi web sitesinden (nodejs.org) LTS (Long Term Support) s\u00fcr\u00fcm\u00fcn\u00fc indirip kurman\u0131z \u00f6nerilir. Bu, npm'i de otomatik olarak y\u00fckleyecektir.<\/p>\n<p>Kurulumu kontrol edin:<\/p>\n<pre><code>node -v\nnpm -v<\/pre>\n<p><\/code><\/p>\n<p>Dilerseniz Yarn paket y\u00f6neticisini de kurabilirsiniz (npm ile de kurabilirsiniz):<\/p>\n<pre><code>npm install -g yarn<\/pre>\n<p><\/code><\/p>\n<p>Ard\u0131ndan:<\/p>\n<pre><code>yarn -v<\/pre>\n<p><\/code>\n            <\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Bu temel kurulumlar\u0131 tamamlad\u0131ktan sonra, hem backend (Kemal) hem de frontend (Vite) projelerinizi olu\u015fturmaya haz\u0131rs\u0131n\u0131z demektir. Bu ad\u0131mlar, geli\u015ftirme ortam\u0131n\u0131z\u0131n d\u00fczg\u00fcn \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olmak i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n<h3>Temel Kemal Projesi Olu\u015fturma Ad\u0131mlar\u0131 Nelerdir?<\/h3>\n<p>Gerekli ortam kurulumlar\u0131n\u0131 tamamlad\u0131ktan sonra, Kemal ile ilk backend projemizi olu\u015ftural\u0131m. Kemal, projeleri h\u0131zl\u0131ca ba\u015flatmak i\u00e7in <code>kemal init<\/code> gibi \u00f6zel bir komut sa\u011flamaz; bunun yerine, manuel olarak bir <code>shard.yml<\/code> dosyas\u0131 olu\u015fturarak ve ba\u011f\u0131ml\u0131l\u0131klar\u0131 ekleyerek ba\u015flar\u0131z. Bu, size projenin yap\u0131s\u0131 \u00fczerinde tam kontrol sa\u011flar.<\/p>\n<p>\u0130lk olarak, projeniz i\u00e7in yeni bir dizin olu\u015fturun ve i\u00e7ine girin:<\/p>\n<pre><code>mkdir my_kemal_app\ncd my_kemal_app<\/pre>\n<p><\/code><\/p>\n<p>\u015eimdi, Crystal projelerinin ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 ve temel bilgilerini tan\u0131mlayan <code>shard.yml<\/code> dosyas\u0131n\u0131 olu\u015ftural\u0131m. Bu dosya, projemizin Kemal'e ba\u011f\u0131ml\u0131 oldu\u011funu belirtecektir:<\/p>\n<pre><code># shard.yml\nname: my_kemal_app\nversion: 0.1.0\n\ntargets:\n  my_kemal_app:\n    main: src\/my_kemal_app.cr\n\ndependencies:\n  kemal:\n    github: kemalcr\/kemal\n    version: ~> 1.0<\/pre>\n<p><\/code><\/p>\n<p>Bu <code>shard.yml<\/code> dosyas\u0131n\u0131 olu\u015fturduktan sonra, ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fcklemek i\u00e7in Shard paket y\u00f6neticisini kullan\u0131n:<\/p>\n<pre><code>shards install<\/pre>\n<p><\/code><\/p>\n<p>Bu komut, Kemal framework'\u00fcn\u00fc ve di\u011fer gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 <code>lib<\/code> dizinine indirip derleyecektir. Ard\u0131ndan, Kemal uygulaman\u0131z\u0131n ana kodunu i\u00e7erecek <code>src<\/code> dizinini ve <code>my_kemal_app.cr<\/code> dosyas\u0131n\u0131 olu\u015ftural\u0131m:<\/p>\n<pre><code>mkdir src<\/pre>\n<p><\/code><\/p>\n<p>\u015eimdi <code>src\/my_kemal_app.cr<\/code> dosyas\u0131n\u0131 olu\u015fturun ve i\u00e7ine a\u015fa\u011f\u0131daki kodu ekleyin:<\/p>\n<pre><code class=\"language-crystal\">require \"kemal\"\n\nKemal.run<\/pre>\n<p><\/code><\/p>\n<p>Bu kod, Kemal uygulamas\u0131n\u0131 ba\u015flat\u0131r ancak hen\u00fcz hi\u00e7bir rota tan\u0131mlanmam\u0131\u015ft\u0131r. Basit bir \"Hello World\" rotas\u0131 ekleyelim:<\/p>\n<pre><code class=\"language-crystal\">require \"kemal\"\n\nget \"\/\" do\n  \"Merhaba, Vite & Kemal D\u00fcnyas\u0131!\"\nend\n\nget \"\/api\/hello\" do\n  content_type \"application\/json\"\n  { message: \"API'den merhaba!\" }.to_json\nend\n\nKemal.run<\/pre>\n<p><\/code><\/p>\n<p>Bu kodla, <code>\/<\/code> adresine yap\u0131lan GET isteklerinde taray\u0131c\u0131ya \"Merhaba, Vite & Kemal D\u00fcnyas\u0131!\" mesaj\u0131n\u0131 g\u00f6nderen basit bir ana sayfa ve <code>\/api\/hello<\/code> adresine yap\u0131lan GET isteklerinde JSON format\u0131nda bir mesaj d\u00f6nd\u00fcren bir API endpoint'i tan\u0131mlam\u0131\u015f olduk. Art\u0131k Kemal uygulaman\u0131z\u0131 \u00e7al\u0131\u015ft\u0131rabilirsiniz:<\/p>\n<pre><code>crystal run src\/my_kemal_app.cr<\/pre>\n<p><\/code><\/p>\n<p>Uygulama genellikle <code>http:\/\/0.0.0.0:3000<\/code> adresinde ba\u015flayacakt\u0131r. Taray\u0131c\u0131n\u0131zdan bu adresi ziyaret ederek uygulaman\u0131z\u0131n \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 do\u011frulayabilirsiniz. Bu ad\u0131mlar, Kemal backend'inizin temelini atar ve frontend ile entegrasyon i\u00e7in bir ba\u015flang\u0131\u00e7 noktas\u0131 sa\u011flar. Ayr\u0131ca bir API endpoint'i tan\u0131mlayarak frontend'in bu backend ile nas\u0131l ileti\u015fim kuraca\u011f\u0131na dair bir \u00f6rnek sunmu\u015f olduk.<\/p>\n<h3>Vite Frontend Projesi Nas\u0131l Olu\u015fturulur?<\/h3>\n<p>Kemal backend projemizi haz\u0131rlad\u0131ktan sonra, s\u0131ra frontend k\u0131sm\u0131na, yani Vite projemizi olu\u015fturmaya geldi. Vite, farkl\u0131 frontend framework'leri i\u00e7in \u015fablonlar sunar. Bu \u00f6rnekte, basitli\u011fi nedeniyle Vanilla JavaScript'i (veya Vue'yu, tercihe g\u00f6re) kullanarak bir Vite projesi olu\u015fturaca\u011f\u0131z. Frontend projemizi genellikle backend projesinin d\u0131\u015f\u0131nda ayr\u0131 bir dizinde tutmak iyi bir uygulamad\u0131r, ancak daha sonra entegrasyonu kolayla\u015ft\u0131rmak i\u00e7in ana projemizin i\u00e7inde bir alt dizinde de tutabiliriz. \u015eimdilik <code>my_kemal_app<\/code> dizininin bir karde\u015f dizini olarak <code>my_vite_app<\/code> olu\u015ftural\u0131m.<\/p>\n<p>Ana projenizin k\u00f6k dizinine geri d\u00f6n\u00fcn ve yeni bir Vite projesi olu\u015fturun:<\/p>\n<pre><code>cd .. # E\u011fer my_kemal_app i\u00e7indeysek bir \u00fcst dizine \u00e7\u0131k\nnpm create vite@latest my_vite_app -- --template vanilla # veya --template vue, react, svelte vb.\ncd my_vite_app<\/pre>\n<p><\/code><\/p>\n<p>Bu komut, <code>my_vite_app<\/code> ad\u0131nda yeni bir dizin olu\u015fturacak ve i\u00e7ine temel bir Vite projesi kuracakt\u0131r. Komut \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda size baz\u0131 se\u00e7enekler sunabilir (\u00f6rn. proje ad\u0131, framework se\u00e7imi). <code>vanilla<\/code> \u015fablonunu se\u00e7erek devam edelim. Kurulum tamamland\u0131ktan sonra, yeni olu\u015fturulan proje dizinine ge\u00e7in ve ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckleyin:<\/p>\n<pre><code>npm install # veya yarn<\/pre>\n<p><\/code><\/p>\n<p>Ba\u011f\u0131ml\u0131l\u0131klar y\u00fcklendikten sonra, Vite geli\u015ftirme sunucusunu ba\u015flatabilirsiniz:<\/p>\n<pre><code>npm run dev # veya yarn dev<\/pre>\n<p><\/code><\/p>\n<p>Vite, genellikle <code>http:\/\/localhost:5173<\/code> gibi bir adreste geli\u015ftirme sunucusunu ba\u015flatacakt\u0131r. Taray\u0131c\u0131n\u0131zda bu adresi ziyaret etti\u011finizde, temel Vite uygulaman\u0131z\u0131n \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6rmelisiniz. \u015eimdi, <code>my_vite_app\/index.html<\/code> dosyas\u0131n\u0131 ve <code>my_vite_app\/main.js<\/code> veya <code>my_vite_app\/src\/main.js<\/code> (\u015fablona g\u00f6re de\u011fi\u015febilir) dosyas\u0131n\u0131 inceleyelim. <code>index.html<\/code> temel HTML yap\u0131s\u0131n\u0131 i\u00e7erirken, <code>main.js<\/code> ise uygulaman\u0131n ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r.<\/p>\n<p>Frontend uygulamam\u0131z\u0131n Kemal backend ile ileti\u015fim kurabilmesi i\u00e7in <code>main.js<\/code> i\u00e7ine basit bir API \u00e7a\u011fr\u0131s\u0131 ekleyelim:<\/p>\n<pre><code class=\"language-javascript\">\/\/ my_vite_app\/main.js (veya src\/main.js)\nimport '.\/style.css'\n\ndocument.querySelector('#app').innerHTML = <code><h1>Vite + Kemal Entegrasyonu<\/h1>\n  <button id=\"fetchApiButton\">API&#039;den Veri Al<\/button>\n  <p id=\"apiResponse\"><\/p><\/code>\n\ndocument.getElementById('fetchApiButton').addEventListener('click', async () => {\n  try {\n    const response = await fetch('http:\/\/localhost:3000\/api\/hello'); \/\/ Kemal backend API adresi\n    const data = await response.json();\n    document.getElementById('apiResponse').textContent = <code>API Yan\u0131t\u0131: ${data.message}<\/code>;\n  } catch (error) {\n    console.error('API \u00e7a\u011fr\u0131s\u0131 s\u0131ras\u0131nda bir hata olu\u015ftu:', error);\n    document.getElementById('apiResponse').textContent = 'API \u00e7a\u011fr\u0131s\u0131 ba\u015far\u0131s\u0131z oldu.';\n  }\n});<\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki kodda, bir d\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda Kemal backend'imizdeki <code>\/api\/hello<\/code> endpoint'ine bir GET iste\u011fi g\u00f6nderiyoruz. Bu kod par\u00e7ac\u0131\u011f\u0131, frontend ve backend'in ayr\u0131 ayr\u0131 nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve nas\u0131l birbirleriyle ileti\u015fim kurmaya ba\u015flayacaklar\u0131n\u0131 g\u00f6sterir. Geli\u015ftirme s\u00fcrecinde, hem Kemal sunucusunu hem de Vite geli\u015ftirme sunucusunu ayn\u0131 anda \u00e7al\u0131\u015ft\u0131rman\u0131z gerekecektir. Bu temel kurulum, entegrasyonun bir sonraki ad\u0131mlar\u0131 i\u00e7in sa\u011flam bir temel olu\u015fturur.<\/p>\n<h2>Vite ve Kemal Entegrasyonu Nas\u0131l Yap\u0131l\u0131r?<\/h2>\n<p>Frontend (Vite) ve backend (Kemal) projelerimizi ayr\u0131 ayr\u0131 \u00e7al\u0131\u015ft\u0131r\u0131p test ettik. \u015eimdi bu iki d\u00fcnyan\u0131n nas\u0131l bir araya getirilece\u011fini, yani entegrasyonu konu\u015faca\u011f\u0131z. Entegrasyonun ana hedefi, Kemal'in hem API isteklerini ele almas\u0131 hem de Vite taraf\u0131ndan \u00fcretilen statik frontend dosyalar\u0131n\u0131 sunmas\u0131d\u0131r. Bu, uygulaman\u0131z\u0131n hem geli\u015ftirme hem de \u00fcretim ortam\u0131nda tutarl\u0131 bir \u015fekilde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar.<\/p>\n<h3>Kemal'in Statik Dosyalar\u0131 Sunmas\u0131 \u0130\u00e7in Neler Yapmal\u0131y\u0131z?<\/h3>\n<p>\u00dcretim ortam\u0131nda, Vite taraf\u0131ndan derlenen t\u00fcm frontend dosyalar\u0131 (HTML, CSS, JavaScript, resimler vb.) genellikle <code>dist<\/code> ad\u0131nda bir dizine yerle\u015ftirilir. Kemal'in bu dosyalar\u0131 sunabilmesi i\u00e7in, uygulaman\u0131zda bu <code>dist<\/code> dizinini statik dosya kayna\u011f\u0131 olarak belirtmeniz gerekir. Bu, Kemal'in gelen isteklere \u00f6nce statik dosya olarak bakmas\u0131n\u0131, bulamazsa rotalar\u0131 i\u015flemesini sa\u011flar.<\/p>\n<p>\u00d6ncelikle, Vite projenizin <code>package.json<\/code> dosyas\u0131na bir <code>build<\/code> script'i ekledi\u011finizden emin olun. Zaten varsay\u0131lan olarak olmal\u0131d\u0131r:<\/p>\n<pre><code class=\"language-json\">\/\/ my_vite_app\/package.json\n{\n  \"name\": \"my_vite_app\",\n  \"private\": true,\n  \"version\": \"0.0.0\",\n  \"type\": \"module\",\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"build\": \"vite build\", \/\/ Bu komut dist dizinini olu\u015fturacak\n    \"preview\": \"vite preview\"\n  },\n  \"devDependencies\": {\n    \"vite\": \"^5.0.8\"\n  }\n}<\/pre>\n<p><\/code><\/p>\n<p>Vite projenizin k\u00f6k dizininde <code>npm run build<\/code> komutunu \u00e7al\u0131\u015ft\u0131rarak, <code>\/my_vite_app\/dist<\/code> dizininin olu\u015fturuldu\u011funu g\u00f6receksiniz. Bu dizin, \u00fcretim i\u00e7in optimize edilmi\u015f frontend dosyalar\u0131n\u0131 i\u00e7erir.<\/p>\n<p>\u015eimdi Kemal uygulamam\u0131z\u0131n <code>src\/my_kemal_app.cr<\/code> dosyas\u0131n\u0131, bu <code>dist<\/code> dizinindeki dosyalar\u0131 sunacak \u015fekilde g\u00fcncelleyelim. Kemal'in statik dosyalar\u0131 sunabilmesi i\u00e7in <code>Kemal::StaticFileHandler<\/code>'\u0131 kullanmal\u0131y\u0131z. \u00d6nemli bir nokta, frontend projemizin <code>my_kemal_app<\/code> ile ayn\u0131 k\u00f6k dizinde oldu\u011funu varsayarak dosya yolunu do\u011fru ayarlamakt\u0131r. E\u011fer <code>my_vite_app<\/code> dizini <code>my_kemal_app<\/code> dizininin bir alt dizini olsayd\u0131 yol farkl\u0131 olurdu. Bizim yap\u0131m\u0131zda \u015fu anda <code>my_kemal_app<\/code> ve <code>my_vite_app<\/code> karde\u015f dizinler. Bu nedenle, <code>my_kemal_app<\/code> i\u00e7inden <code>..\/my_vite_app\/dist<\/code> \u015feklinde bir yol kullanmal\u0131y\u0131z.<\/p>\n<pre><code class=\"language-crystal\">require \"kemal\"\n\n# Statik dosyalar\u0131n bulundu\u011fu dizin\n# Frontend projemiz ana Kemal projemizin bir \u00fcst dizinindeki my_vite_app klas\u00f6r\u00fcn\u00fcn i\u00e7indeki dist klas\u00f6r\u00fc\nstatic_files_path = File.expand_path(\"..\/my_vite_app\/dist\", __DIR__)\n\n# Statik dosyalar\u0131 sunan middleware'i ekle\n# Bu middleware, gelen isteklerin yolunu statik_files_path i\u00e7inde arar.\n# E\u011fer bir dosya bulursa, onu sunar ve iste\u011fi sonland\u0131r\u0131r.\n# Bulamazsa, iste\u011fi bir sonraki middleware'e veya rotaya devreder.\nKemal.config.add_handler Kemal::StaticFileHandler.new(static_files_path)\n\n# T\u00fcm di\u011fer yollar (API yollar\u0131 ve SPA fallback)\n# E\u011fer bir statik dosya bulunamazsa ve rota tan\u0131m\u0131 da yoksa,\n# genellikle ana index.html dosyas\u0131n\u0131 d\u00f6nd\u00fcrerek SPA y\u00f6nlendirmesini sa\u011flar\u0131z.\n# Bu, taray\u0131c\u0131da do\u011frudan bir URL girildi\u011finde veya sayfa yenilendi\u011finde\n# frontend y\u00f6nlendiricisinin devreye girmesi i\u00e7in \u00f6nemlidir.\nget \"\/*\" do |env|\n  file_path = File.join(static_files_path, \"index.html\")\n  env.response.content_type = \"text\/html\"\n  File.read(file_path)\nend\n\n# API rotalar\u0131\nget \"\/api\/hello\" do\n  content_type \"application\/json\"\n  { message: \"API'den merhaba!\" }.to_json\nend\n\nKemal.run<\/pre>\n<p><\/code><\/p>\n<p>Bu kod par\u00e7as\u0131, <code>my_kemal_app<\/code>'i hem bir API sunucusu hem de statik dosya sunucusu olarak g\u00f6rev yapacak \u015fekilde d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. <code>get \"\/*\"<\/code> rotas\u0131, di\u011fer rotalar veya statik dosyalar taraf\u0131ndan yakalanmayan t\u00fcm istekler i\u00e7in <code>index.html<\/code> dosyas\u0131n\u0131 d\u00f6nd\u00fcrerek, tek sayfa uygulamalar\u0131n\u0131n (SPA) y\u00f6nlendirme mekanizmas\u0131n\u0131n \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Art\u0131k Kemal uygulaman\u0131z\u0131 \u00e7al\u0131\u015ft\u0131r\u0131p <code>http:\/\/localhost:3000<\/code> adresine gitti\u011finizde, Vite taraf\u0131ndan derlenmi\u015f frontend uygulaman\u0131z\u0131 g\u00f6rmelisiniz. API \u00e7a\u011fr\u0131s\u0131 da sorunsuz bir \u015fekilde \u00e7al\u0131\u015facakt\u0131r.<\/p>\n<h3>Geli\u015ftirme Ortam\u0131nda Dinamik Entegrasyon Nas\u0131l Sa\u011flan\u0131r?<\/h3>\n<p>\u00dcretim ortam\u0131nda Kemal'in statik dosyalar\u0131 sunmas\u0131 mant\u0131kl\u0131 olsa da, geli\u015ftirme s\u0131ras\u0131nda her de\u011fi\u015fiklikte Vite projesini <code>build<\/code> etmek verimli de\u011fildir. Geli\u015ftirme ortam\u0131nda, Vite kendi geli\u015ftirme sunucusunu (HMR ile) \u00e7al\u0131\u015ft\u0131r\u0131rken, Kemal sadece API endpoint'lerini sunmal\u0131d\u0131r. Frontend uygulamas\u0131n\u0131n Kemal API'lerine ula\u015fabilmesi i\u00e7in genellikle bir proxy ayar\u0131 yap\u0131l\u0131r.<\/p>\n<p>Vite, geli\u015ftirme sunucusunda proxy ayarlar\u0131na izin verir. Bu sayede, frontend uygulaman\u0131zda yap\u0131lan <code>\/api\/*<\/code> \u015feklindeki istekler, asl\u0131nda Kemal backend sunucunuza y\u00f6nlendirilir. Bu, hem CORS sorunlar\u0131n\u0131 engeller hem de geli\u015ftirme s\u00fcrecini basitle\u015ftirir.<\/p>\n<p>Vite projenizin k\u00f6k dizininde (<code>my_vite_app<\/code>) bir <code>vite.config.js<\/code> veya <code>vite.config.ts<\/code> dosyas\u0131 olu\u015fturun (e\u011fer yoksa) veya mevcut olan\u0131 g\u00fcncelleyin:<\/p>\n<pre><code class=\"language-javascript\">\/\/ my_vite_app\/vite.config.js\nimport { defineConfig } from 'vite'\nimport { resolve } from 'path'\n\nexport default defineConfig({\n  server: {\n    proxy: {\n      '\/api': {\n        target: 'http:\/\/localhost:3000', \/\/ Kemal backend sunucunuzun adresi\n        changeOrigin: true,\n        rewrite: (path) => path.replace(\/^\\\/api\/, '\/api'), \/\/ Opsiyonel, path'i oldu\u011fu gibi b\u0131rak\u0131r\n      },\n      \/\/ E\u011fer ba\u015fka API yollar\u0131n\u0131z varsa buraya ekleyebilirsiniz\n    },\n    port: 5173, \/\/ Vite dev server'\u0131n \u00e7al\u0131\u015faca\u011f\u0131 port\n  },\n  build: {\n    outDir: resolve(__dirname, '..\/my_kemal_app\/my_vite_app_dist'), \/\/ \u00dcretim build'\u0131n\u0131n \u00e7\u0131kaca\u011f\u0131 dizin\n    \/\/ Bu yolu, Kemal projenizin statik dosyalar\u0131 sunaca\u011f\u0131 dizine g\u00f6re ayarlay\u0131n.\n    \/\/ \u00d6rne\u011fin, Kemal projenizin k\u00f6k dizininde 'public' diye bir klas\u00f6r varsa buray\u0131 'public' yapabilirsiniz.\n    \/\/ Veya Kemal'in statik dosya yolunu '..\/my_vite_app\/dist' olarak ayarlayabilirsiniz.\n    \/\/ Makale ba\u015f\u0131ndaki \u00f6rne\u011fe sad\u0131k kalmak i\u00e7in, Kemal'in <code>..\/my_vite_app\/dist<\/code> yoluna bakaca\u011f\u0131n\u0131 varsayal\u0131m.\n    \/\/ Bu durumda buras\u0131 dist olmal\u0131.\n  }\n})<\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki <code>vite.config.js<\/code> dosyas\u0131nda, <code>server.proxy<\/code> alt\u0131na <code>\/api<\/code> \u00f6nekiyle gelen t\u00fcm isteklerin <code>http:\/\/localhost:3000<\/code> adresindeki Kemal sunucusuna y\u00f6nlendirilece\u011fini belirttik. Bu sayede, frontend kodunuzda <code>fetch(&#039;\/api\/hello&#039;)<\/code> \u015feklinde bir \u00e7a\u011fr\u0131 yapt\u0131\u011f\u0131n\u0131zda, Vite geli\u015ftirme sunucusu bu iste\u011fi Kemal'e iletecek ve yan\u0131t\u0131 size geri d\u00f6nd\u00fcrecektir. Art\u0131k <code>my_vite_app\/main.js<\/code> dosyas\u0131ndaki API \u00e7a\u011fr\u0131s\u0131n\u0131 do\u011frudan <code>\/api\/hello<\/code> olarak g\u00fcncelleyebilirsiniz:<\/p>\n<pre><code class=\"language-javascript\">\/\/ my_vite_app\/main.js\n\/\/ ...\ndocument.getElementById('fetchApiButton').addEventListener('click', async () => {\n  try {\n    const response = await fetch('\/api\/hello'); \/\/ Proxy sayesinde do\u011frudan \/api adresini kullanabiliriz\n    const data = await response.json();\n    document.getElementById('apiResponse').textContent = <code>API Yan\u0131t\u0131: ${data.message}<\/code>;\n  } catch (error) {\n    console.error('API \u00e7a\u011fr\u0131s\u0131 s\u0131ras\u0131nda bir hata olu\u015ftu:', error);\n    document.getElementById('apiResponse').textContent = 'API \u00e7a\u011fr\u0131s\u0131 ba\u015far\u0131s\u0131z oldu.';\n  }\n});\n\/\/ ...<\/pre>\n<p><\/code><\/p>\n<p>Geli\u015ftirme ortam\u0131nda \u00e7al\u0131\u015f\u0131rken yapman\u0131z gerekenler:<\/p>\n<ol>\n<li>Bir terminalde Kemal uygulaman\u0131z\u0131 ba\u015flat\u0131n:\n<pre><code>crystal run src\/my_kemal_app.cr<\/pre>\n<p><\/code>\n    <\/li>\n<li>Ba\u015fka bir terminalde Vite geli\u015ftirme sunucunuzu ba\u015flat\u0131n (<code>my_vite_app<\/code> dizininde):\n<pre><code>npm run dev<\/pre>\n<p><\/code>\n    <\/li>\n<\/ol>\n<p>Bu \u015fekilde, Vite'\u0131n h\u0131zl\u0131 HMR \u00f6zelliklerinden faydalan\u0131rken, API istekleriniz i\u00e7in Kemal backend'inizi kullanmaya devam edebilirsiniz. Bu dinamik entegrasyon, geli\u015ftirme s\u00fcrecinizi \u00e7ok daha verimli ve keyifli hale getirecektir. Unutmay\u0131n, bu proxy ayarlar\u0131 sadece geli\u015ftirme ortam\u0131 i\u00e7in ge\u00e7erlidir. \u00dcretim ortam\u0131nda, Kemal do\u011frudan Vite'\u0131n <code>dist<\/code> klas\u00f6r\u00fcndeki statik dosyalar\u0131 sunar ve API isteklerini kendi rotalar\u0131 \u00fczerinden ele al\u0131r.<\/p>\n<h3>\u00dcretim Ortam\u0131 \u0130\u00e7in Optimizasyon ve Da\u011f\u0131t\u0131m Stratejileri Nelerdir?<\/h3>\n<p>Uygulaman\u0131z\u0131 geli\u015ftirip test ettikten sonra s\u0131ra \u00fcretim ortam\u0131na da\u011f\u0131tmaya gelir. \u00dcretim ortam\u0131 i\u00e7in temel farkl\u0131l\u0131klar, Vite'\u0131n statik dosyalar\u0131 derleyip optimize etmesi ve Kemal'in bu derlenmi\u015f dosyalar\u0131 h\u0131zl\u0131 ve g\u00fcvenilir bir \u015fekilde sunmas\u0131d\u0131r. Ayr\u0131ca, performans ve g\u00fcvenlik gibi konular da bu a\u015famada daha kritik hale gelir.<\/p>\n<h4>Vite Build S\u00fcreci ve Optimizasyon<\/h4>\n<p>\u00dcretim i\u00e7in Vite projenizi derlemek olduk\u00e7a basittir. Vite, Rollup'\u0131 kullanarak statik dosyalar\u0131n\u0131z\u0131 optimize eder, s\u0131k\u0131\u015ft\u0131r\u0131r ve taray\u0131c\u0131 \u00f6nbelleklemesini kolayla\u015ft\u0131racak \u015fekilde isimlendirir.<\/p>\n<p>Vite projenizin k\u00f6k dizininde (<code>my_vite_app<\/code>) a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n<pre><code>npm run build # veya yarn build<\/pre>\n<p><\/code><\/p>\n<p>Bu komut, <code>dist<\/code> ad\u0131nda bir dizin olu\u015fturacak ve i\u00e7ine HTML, CSS, JavaScript, resimler gibi t\u00fcm frontend kaynaklar\u0131n\u0131z\u0131 optimize edilmi\u015f bir \u015fekilde yerle\u015ftirecektir. Bu dosyalar, boyut olarak k\u00fc\u00e7\u00fclt\u00fclm\u00fc\u015f, taray\u0131c\u0131 performans\u0131 i\u00e7in ayarlanm\u0131\u015f ve \u00fcretimde kullan\u0131lmaya haz\u0131r hale getirilmi\u015ftir.<\/p>\n<h4>Kemal ile \u00dcretim Da\u011f\u0131t\u0131m\u0131 ve Statik Dosyalar\u0131 Sunma<\/h4>\n<p>Kemal taraf\u0131nda ise, yukar\u0131da bahsedilen statik dosya sunma mekanizmas\u0131 \u00fcretim i\u00e7in de ge\u00e7erlidir. Kemal uygulaman\u0131z\u0131n <code>src\/my_kemal_app.cr<\/code> dosyas\u0131ndaki <code>Kemal::StaticFileHandler<\/code> ayar\u0131n\u0131n do\u011fru oldu\u011fundan emin olun. \u00d6zellikle <code>static_files_path<\/code> de\u011fi\u015fkeninin, Vite'\u0131n derledi\u011fi <code>dist<\/code> dizinine i\u015faret etti\u011finden emin olun. \u00d6rne\u011fin:<\/p>\n<pre><code class=\"language-crystal\"># src\/my_kemal_app.cr\n# ...\nstatic_files_path = File.expand_path(\"..\/my_vite_app\/dist\", __DIR__)\nKemal.config.add_handler Kemal::StaticFileHandler.new(static_files_path)\n# ...<\/pre>\n<p><\/code><\/p>\n<p>Bu ayar sayesinde, Kemal gelen istekleri \u00f6nce <code>dist<\/code> dizininde arayacak, bulamazsa rotalar\u0131 i\u015fleyecektir. <code>\/<\/code> veya di\u011fer bilinmeyen yollara yap\u0131lan istekler i\u00e7in <code>index.html<\/code>'i d\u00f6nd\u00fcrme mant\u0131\u011f\u0131 da SPA'lar i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n<p>Kemal uygulaman\u0131z\u0131 \u00fcretim i\u00e7in derlemek, performans\u0131 daha da art\u0131racakt\u0131r. Crystal derleyicisi, kodu makine koduna \u00e7evirerek maksimum h\u0131z ve d\u00fc\u015f\u00fck bellek t\u00fcketimi sa\u011flar:<\/p>\n<pre><code>crystal build src\/my_kemal_app.cr --release -o my_kemal_app_production<\/pre>\n<p><\/code><\/p>\n<p>Bu komut, <code>my_kemal_app_production<\/code> ad\u0131nda optimize edilmi\u015f bir ikili dosya olu\u015fturur. Uygulaman\u0131z\u0131 \u00e7al\u0131\u015ft\u0131rmak i\u00e7in sadece bu ikili dosyay\u0131 kullan\u0131n:<\/p>\n<pre><code>.\/my_kemal_app_production<\/pre>\n<p><\/code><\/p>\n<p>Bu, ba\u011f\u0131ml\u0131l\u0131klar\u0131 derleme zaman\u0131nda paketin i\u00e7ine dahil eder ve daha hafif, ba\u011f\u0131ms\u0131z bir da\u011f\u0131t\u0131m paketi olu\u015fturur.<\/p>\n<h4>Vaka Analizi: Basit Bir ToDo Uygulamas\u0131<\/h4>\n<p>Ger\u00e7ek d\u00fcnya senaryosu olarak, bir ToDo listesi uygulamas\u0131n\u0131 ele alal\u0131m. Frontend'i Vite ile, backend'i ise Kemal ile geli\u015ftirdik.<\/p>\n<p><strong>Geli\u015ftirme A\u015famas\u0131:<\/strong><\/p>\n<ol>\n<li>Bir terminalde <code>crystal run src\/my_kemal_app.cr<\/code> ile Kemal backend'i ba\u015flat\u0131r\u0131z. Kemal, <code>\/api\/todos<\/code> gibi endpoint'ler sunar.<\/li>\n<li>Ba\u015fka bir terminalde <code>npm run dev<\/code> ile Vite frontend'i ba\u015flat\u0131r\u0131z. Vite'\u0131n <code>vite.config.js<\/code> dosyas\u0131ndaki proxy ayarlar\u0131 sayesinde, frontend'deki <code>fetch(&#039;\/api\/todos&#039;)<\/code> istekleri otomatik olarak Kemal backend'e y\u00f6nlendirilir.<\/li>\n<li>Vite'\u0131n HMR \u00f6zelli\u011fi sayesinde, frontend'de yapt\u0131\u011f\u0131m\u0131z herhangi bir stil veya mant\u0131k de\u011fi\u015fikli\u011fi an\u0131nda taray\u0131c\u0131da belirir.<\/li>\n<\/ol>\n<p><strong>\u00dcretim A\u015famas\u0131:<\/strong><\/p>\n<ol>\n<li>\u00d6nce <code>my_vite_app<\/code> dizininde <code>npm run build<\/code> komutunu \u00e7al\u0131\u015ft\u0131rarak frontend dosyalar\u0131n\u0131 <code>my_vite_app\/dist<\/code> dizinine derleriz.<\/li>\n<li>Ard\u0131ndan, <code>my_kemal_app<\/code> dizininde <code>crystal build src\/my_kemal_app.cr --release -o my_kemal_app_production<\/code> komutuyla Kemal backend'i \u00fcretim i\u00e7in derleriz. Bu derleme, <code>static_files_path<\/code>'\u0131n <code>my_vite_app\/dist<\/code>'i g\u00f6sterdi\u011finden emin olmal\u0131d\u0131r.<\/li>\n<li><code>.\/my_kemal_app_production<\/code> komutuyla Kemal sunucusunu ba\u015flat\u0131r\u0131z. Kemal, hem <code>\/api\/todos<\/code> isteklerini i\u015fler hem de <code>my_vite_app\/dist<\/code> dizinindeki optimize edilmi\u015f frontend dosyalar\u0131n\u0131 sunar. Bu \u015fekilde, tek bir sunucu s\u00fcreci hem frontend hem de backend isteklerini ele alarak da\u011f\u0131t\u0131m\u0131 ve y\u00f6netimi basitle\u015ftirir.<\/li>\n<\/ol>\n<p>Bu strateji, modern SPA (Single Page Application) mimarileri i\u00e7in olduk\u00e7a yayg\u0131n ve etkilidir. Kemal ve Vite'\u0131n bu entegrasyonu, geli\u015ftirme h\u0131z\u0131n\u0131 ve son \u00fcr\u00fcn\u00fcn performans\u0131n\u0131 optimize ederek tam te\u015fekk\u00fcll\u00fc ve verimli bir web uygulamas\u0131 olu\u015fturman\u0131za olanak tan\u0131r.<\/p>\n<h2>\u0130leri D\u00fczey \u0130pu\u00e7lar\u0131 ve En \u0130yi Uygulamalar Nelerdir?<\/h2>\n<p>Vite ve Kemal entegrasyonunun temelini att\u0131ktan sonra, projenizi daha da g\u00fc\u00e7lendirecek ve geli\u015ftirme s\u00fcrecinizi optimize edecek ileri d\u00fczey ipu\u00e7lar\u0131 ve en iyi uygulamalara de\u011finelim. Bu b\u00f6l\u00fcmde, g\u00fcvenlik, performans ve geli\u015ftirici deneyimini art\u0131racak baz\u0131 \u00f6nemli konular\u0131 ele alaca\u011f\u0131z.<\/p>\n<h3>API Entegrasyonunda G\u00fcvenlik ve Performans Nas\u0131l Art\u0131r\u0131l\u0131r?<\/h3>\n<p>API'ler, uygulaman\u0131z\u0131n kalbidir ve bu nedenle g\u00fcvenlikleri ve performanslar\u0131 kritik \u00f6neme sahiptir. Kemal tabanl\u0131 API'lerinizde bu konular\u0131 ele almak i\u00e7in birka\u00e7 strateji bulunmaktad\u0131r:<\/p>\n<ol>\n<li><strong>Kimlik Do\u011frulama ve Yetkilendirme (Authentication & Authorization):<\/strong>\n<ul>\n<li><strong>JWT (JSON Web Tokens):<\/strong> Modern SPA'lar ve API tabanl\u0131 uygulamalar i\u00e7in pop\u00fcler bir kimlik do\u011frulama y\u00f6ntemidir. Kullan\u0131c\u0131 giri\u015f yapt\u0131\u011f\u0131nda Kemal, bir JWT olu\u015fturur ve bunu frontend'e (Vite uygulamas\u0131na) g\u00f6nderir. Frontend bu token'\u0131 sonraki t\u00fcm API isteklerinde \"Authorization\" ba\u015fl\u0131\u011f\u0131nda (Bearer token olarak) g\u00f6nderir. Kemal, her iste\u011fi i\u015flerken bu token'\u0131 do\u011frulayarak kullan\u0131c\u0131n\u0131n kimli\u011fini ve yetkilerini kontrol eder. Crystal i\u00e7in JWT k\u00fct\u00fcphaneleri (\u00f6rne\u011fin <code>jwt<\/code> shard'\u0131) mevcuttur.<\/li>\n<li><strong>Middleware Kullan\u0131m\u0131:<\/strong> Kemal'de custom middleware'ler olu\u015fturarak belirli API rotalar\u0131na eri\u015fimi k\u0131s\u0131tlayabilirsiniz. \u00d6rne\u011fin, her iste\u011fin ba\u015f\u0131nda JWT'yi kontrol eden bir middleware yazarak yetkisiz eri\u015fimleri engelleyebilirsiniz.<\/li>\n<\/ul>\n<pre><code class=\"language-crystal\"># \u00d6rnek JWT do\u011frulama middleware'\u0131\nrequire \"kemal\"\nrequire \"json_web_token\" # JWT shard'\u0131 kulland\u0131\u011f\u0131n\u0131z\u0131 varsayal\u0131m\n\nKemal.before do |env|\n  if env.request.path.starts_with?(\"\/api\/secure\")\n    auth_header = env.request.headers[\"Authorization\"]\n    if auth_header && auth_header.starts_with?(\"Bearer \")\n      token = auth_header.split(\" \").last\n      begin\n        # JWT do\u011frulama ve payload'\u0131 decode etme\n        payload = JSONWebToken.decode(token, ENV[\"JWT_SECRET_KEY\"]) # Gizli anahtar\u0131n\u0131z\u0131 ENV'den al\u0131n\n        env[\"current_user_id\"] = payload[\"user_id\"] # Kullan\u0131c\u0131 bilgisini env'ye ekle\n      rescue JSONWebToken::VerificationError, JSON::ParseException\n        env.response.status_code = 401 # Yetkilendirme hatas\u0131\n        env.halt\n      end\n    else\n      env.response.status_code = 401 # Yetkilendirme ba\u015fl\u0131\u011f\u0131 eksik\n      env.halt\n    end\n  end\nend\n\nget \"\/api\/secure\/data\" do |env|\n  user_id = env[\"current_user_id\"]\n  content_type \"application\/json\"\n  { message: \"Gizli veriye eri\u015ftin, kullan\u0131c\u0131 ID: #{user_id}\" }.to_json\nend<\/pre>\n<p><\/code>\n    <\/li>\n<li><strong>CORS (Cross-Origin Resource Sharing):<\/strong>\n<p>Geli\u015ftirme ortam\u0131nda Vite proxy'si CORS sorunlar\u0131n\u0131 \u00e7\u00f6zse de, \u00fcretimde frontend ve backend farkl\u0131 domainlerde (veya portlarda) \u00e7al\u0131\u015f\u0131yorsa CORS sorunlar\u0131 ortaya \u00e7\u0131kabilir. Kemal taraf\u0131nda uygun CORS ba\u015fl\u0131klar\u0131n\u0131 (Origin, Methods, Headers) ayarlaman\u0131z gerekir. Kemal i\u00e7in haz\u0131r CORS middleware'leri (<code>kemal-cors<\/code> shard'\u0131 gibi) kullanabilirsiniz.<\/p>\n<pre><code class=\"language-crystal\"># Kemal CORS middleware \u00f6rne\u011fi\nrequire \"kemal\"\nrequire \"kemal-cors\" # Kemal-CORS shard'\u0131 kulland\u0131\u011f\u0131n\u0131z\u0131 varsayal\u0131m\n\n# Kemal.config.add_handler Kemal::CORSHandler.new(origin: \"*\", methods: \"GET, POST, PUT, DELETE, OPTIONS\")\n# Veya daha spesifik:\nKemal.config.add_handler Kemal::CORSHandler.new(\n  origin: [\"http:\/\/localhost:5173\", \"https:\/\/yourproductionfrontend.com\"],\n  methods: \"GET, POST, PUT, DELETE\",\n  headers: \"Content-Type, Authorization\",\n  max_age: 86400 # 24 saat\n)<\/pre>\n<p><\/code>\n    <\/li>\n<li><strong>Veritaban\u0131 Entegrasyonu ve Optimizasyonu:<\/strong>\n<p>Kemal ile PostgreSQL, MySQL gibi veritabanlar\u0131na ba\u011flanmak i\u00e7in Avram veya Granite gibi ORM'leri kullanabilirsiniz. Veritaban\u0131 sorgular\u0131n\u0131 optimize etmek, indeksler kullanmak ve gereksiz veri \u00e7ekiminden ka\u00e7\u0131nmak API performans\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131racakt\u0131r.<\/p>\n<div class=\"expert-tip\">\n          Uzman \u0130pucu: Veritaban\u0131 ba\u011flant\u0131 havuzu kullanmak, her istek i\u00e7in yeni bir ba\u011flant\u0131 olu\u015fturman\u0131n getirdi\u011fi maliyeti azaltarak API yan\u0131t s\u00fcrelerini h\u0131zland\u0131r\u0131r.\n        <\/div>\n<\/li>\n<\/ol>\n<h3>Geli\u015ftirme S\u00fcrecini H\u0131zland\u0131racak Otomatik Yenileme ve Hot Module Replacement (HMR) Nas\u0131l Kullan\u0131l\u0131r?<\/h3>\n<p>Vite'\u0131n en b\u00fcy\u00fck avantajlar\u0131ndan biri, ola\u011fan\u00fcst\u00fc h\u0131zl\u0131 HMR yetene\u011fidir. HMR, kodunuzda de\u011fi\u015fiklik yapt\u0131\u011f\u0131n\u0131zda sayfan\u0131n tamam\u0131n\u0131 yeniden y\u00fcklemek yerine, sadece de\u011fi\u015fen mod\u00fclleri g\u00fcnceller. Bu, \u00f6zellikle karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczleri geli\u015ftirirken uygulaman\u0131n durumunu koruyarak zaman kazand\u0131r\u0131r.<\/p>\n<ul>\n<li><strong>Vite Geli\u015ftirme Sunucusu:<\/strong> <code>npm run dev<\/code> komutuyla \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda Vite zaten HMR'yi otomatik olarak etkinle\u015ftirir. Frontend kodunuzda (JavaScript, CSS, Vue\/React bile\u015fenleri) yapt\u0131\u011f\u0131n\u0131z her de\u011fi\u015fiklik an\u0131nda taray\u0131c\u0131ya yans\u0131r.<\/li>\n<li><strong>Frontend Geli\u015ftirme Ak\u0131\u015f\u0131:<\/strong>\n<p>Frontend taraf\u0131nda bile\u015fenler geli\u015ftirirken, Vite'\u0131n HMR'sinden maksimum fayda sa\u011flamak i\u00e7in mod\u00fcler bir yap\u0131 kullan\u0131n. Her bile\u015feni ayr\u0131 bir dosya olarak tutun. Bir bile\u015fende de\u011fi\u015fiklik yapt\u0131\u011f\u0131n\u0131zda, yaln\u0131zca o bile\u015fen g\u00fcncellenir, bu da uygulaman\u0131n geri kalan\u0131n\u0131n durumunu bozmaz.<\/p>\n<\/li>\n<li><strong>Kemal Yeniden Ba\u015flatma:<\/strong>\n<p>Kemal taraf\u0131nda bir kod de\u011fi\u015fikli\u011fi yapt\u0131\u011f\u0131n\u0131zda, maalesef Crystal derlenmi\u015f bir dil oldu\u011fu i\u00e7in HMR gibi otomatik bir yeniden y\u00fckleme mekanizmas\u0131 yoktur. De\u011fi\u015fikliklerinizin etkili olmas\u0131 i\u00e7in Kemal sunucusunu elle yeniden ba\u015flatman\u0131z gerekir (<code>CTRL+C<\/code> yap\u0131p tekrar <code>crystal run src\/my_kemal_app.cr<\/code> \u00e7al\u0131\u015ft\u0131rmak gibi). Geli\u015ftirme s\u00fcrecini kolayla\u015ft\u0131rmak i\u00e7in <code>nodemon<\/code> (Node.js tabanl\u0131) veya <code>watchexec<\/code> (Rust tabanl\u0131) gibi ara\u00e7lar kullanarak Kemal uygulaman\u0131z\u0131n kaynak dosyalar\u0131n\u0131 izleyebilir ve de\u011fi\u015fiklik alg\u0131land\u0131\u011f\u0131nda otomatik olarak yeniden ba\u015flat\u0131lmas\u0131n\u0131 sa\u011flayabilirsiniz.<\/p>\n<pre><code># Watchexec kurulumu (\u00f6rne\u011fin Homebrew ile)\nbrew install watchexec\n\n# Kemal projenizi izleyip de\u011fi\u015fiklikte yeniden ba\u015flatma\nwatchexec -r -e cr \"crystal run src\/my_kemal_app.cr\"<\/pre>\n<p><\/code><\/p>\n<p>Bu, backend geli\u015ftirirken manuel yeniden ba\u015flatma ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r ve frontend'deki HMR deneyimine benzer bir ak\u0131c\u0131l\u0131k sa\u011flar.<\/p>\n<\/li>\n<\/ul>\n<h3>Mobil Uyumlu Tasar\u0131m \u0130\u00e7in Nelere Dikkat Etmeliyiz?<\/h3>\n<p>Modern web uygulamalar\u0131n\u0131n vazge\u00e7ilmez bir \u00f6zelli\u011fi mobil uyumlu (responsive) olmas\u0131d\u0131r. Vite ve Kemal ile geli\u015ftirdi\u011finiz uygulamalar\u0131n mobil cihazlarda da harika g\u00f6r\u00fcnmesini ve \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamak i\u00e7in baz\u0131 genel prensiplere dikkat etmelisiniz:<\/p>\n<ol>\n<li><strong>Meta Viewport Etiketi:<\/strong>\n<p>T\u00fcm HTML sayfalar\u0131n\u0131zda, <code><head><\/code> etiketi i\u00e7inde a\u015fa\u011f\u0131daki <code>meta viewport<\/code> etiketinin bulundu\u011fundan emin olun. Bu etiket, taray\u0131c\u0131lara sayfan\u0131n cihaz geni\u015fli\u011fine g\u00f6re \u00f6l\u00e7eklenmesi gerekti\u011fini s\u00f6yler:<\/p>\n<pre><code class=\"language-html\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/pre>\n<p><\/code><\/p>\n<p>Vite'\u0131n varsay\u0131lan \u015fablonlar\u0131 genellikle bunu i\u00e7erir, ancak kontrol etmekte fayda var.<\/p>\n<\/li>\n<li><strong>Duyarl\u0131 CSS (Responsive CSS):<\/strong>\n<p>Frontend uygulaman\u0131z\u0131n stilini olu\u015ftururken, CSS Media Query'leri, Flexbox ve CSS Grid gibi duyarl\u0131 tasar\u0131m tekniklerini aktif olarak kullan\u0131n. Bu sayede, uygulaman\u0131z farkl\u0131 ekran boyutlar\u0131na ve y\u00f6nlendirmelerine (portre\/yatay) dinamik olarak uyum sa\u011flayabilir.<\/p>\n<pre><code class=\"language-css\">\/* \u00d6rnek bir medya sorgusu *\/\n.container {\n  width: 90%;\n  margin: 0 auto;\n}\n\n@media (min-width: 768px) {\n  .container {\n    width: 70%;\n  }\n}\n\n@media (min-width: 1200px) {\n  .container {\n    max-width: 1100px;\n  }\n}<\/pre>\n<p><\/code>\n    <\/li>\n<li><strong>G\u00f6rsel ve Medya Optimizasyonu:<\/strong>\n<p>Resimler, videolar ve di\u011fer medya dosyalar\u0131 mobil cihazlarda sayfa y\u00fckleme h\u0131z\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde etkileyebilir. Responsive resimler (<code>srcset<\/code>, <code>sizes<\/code> nitelikleri), modern formatlar (WebP, AVIF) ve lazy loading teknikleri kullanarak performans\u0131 art\u0131r\u0131n. Vite, statik varl\u0131klar\u0131 optimize etme konusunda zaten baz\u0131 yeteneklere sahiptir.<\/p>\n<\/li>\n<li><strong>Dokunmatik Odakl\u0131 Tasar\u0131m:<\/strong>\n<p>Mobil kullan\u0131c\u0131lar dokunmatik ekranlar\u0131 kullan\u0131r. D\u00fc\u011fmelerin, ba\u011flant\u0131lar\u0131n ve di\u011fer etkile\u015fimli \u00f6\u011felerin yeterince b\u00fcy\u00fck ve parmakla dokunulabilecek kadar aral\u0131kl\u0131 oldu\u011fundan emin olun. Fareyle \u00fczerine gelme (hover) durumlar\u0131n\u0131n mobil cihazlarda \u00e7al\u0131\u015fmad\u0131\u011f\u0131n\u0131 unutmay\u0131n.<\/p>\n<\/li>\n<li><strong>Performans:<\/strong>\n<p>Mobil cihazlar genellikle daha s\u0131n\u0131rl\u0131 i\u015flem g\u00fcc\u00fcne ve a\u011f ba\u011flant\u0131s\u0131na sahiptir. Hem frontend (Vite optimizasyonu) hem de backend (Kemal performans\u0131) taraf\u0131nda performansa \u00f6ncelik verin. Minifikasyon, kod b\u00f6lme (code splitting) ve sunucu taraf\u0131 \u00f6nbellekleme gibi teknikler bu konuda size yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n<\/li>\n<\/ol>\n<p>Bu ileri d\u00fczey ipu\u00e7lar\u0131 ve en iyi uygulamalar, Vite ve Kemal ile geli\u015ftirdi\u011finiz web uygulamalar\u0131n\u0131 sadece i\u015flevsel de\u011fil, ayn\u0131 zamanda g\u00fcvenli, performansl\u0131 ve kullan\u0131c\u0131 dostu hale getirmenize yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n<h2>Sonu\u00e7: Neden Vite ve Kemal Birlikte G\u00fc\u00e7l\u00fc Bir \u0130kili?<\/h2>\n<p>Bu makalede, modern web geli\u015ftirme d\u00fcnyas\u0131n\u0131n h\u0131zla de\u011fi\u015fen taleplerine yan\u0131t veren Vite ve Kemal ikilisinin nas\u0131l kurulaca\u011f\u0131n\u0131 ve entegre edilece\u011fini ayr\u0131nt\u0131l\u0131 olarak inceledik. Gerekli ortam kurulumlar\u0131ndan ba\u015flayarak, temel frontend ve backend projelerinin olu\u015fturulmas\u0131, geli\u015ftirme ve \u00fcretim ortamlar\u0131ndaki entegrasyon stratejileri ve son olarak ileri d\u00fczey ipu\u00e7lar\u0131 ve en iyi uygulamalara kadar her ad\u0131m\u0131 ele ald\u0131k. G\u00f6rd\u00fc\u011f\u00fcm\u00fcz gibi, bu iki teknoloji bir araya geldi\u011finde, geli\u015ftiricilere inan\u0131lmaz bir verimlilik ve son kullan\u0131c\u0131lara \u00fcst\u00fcn bir deneyim sunuyor.<\/p>\n<p>Vite, modern JavaScript ekosistemindeki en h\u0131zl\u0131 ve en geli\u015ftirici dostu frontend build ara\u00e7lar\u0131ndan biridir. An\u0131nda sunucu ba\u015flang\u0131c\u0131, talep \u00fczerine derleme ve Hot Module Replacement (HMR) gibi \u00f6zellikleri sayesinde frontend geli\u015ftirme s\u00fcre\u00e7lerini radikal bir \u015fekilde h\u0131zland\u0131r\u0131r. Karma\u015f\u0131k yap\u0131land\u0131rmalarla bo\u011fu\u015fmak yerine, do\u011frudan uygulaman\u0131z\u0131n kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc olu\u015fturmaya odaklanman\u0131z\u0131 sa\u011flar.<\/p>\n<p>Di\u011fer yandan Kemal, Crystal programlama dilinin getirdi\u011fi performans avantajlar\u0131yla \u00f6ne \u00e7\u0131kan hafif ve h\u0131zl\u0131 bir web framework'\u00fcd\u00fcr. Ruby'nin zarafetini C'nin h\u0131z\u0131yla birle\u015ftiren Crystal sayesinde, Kemal tabanl\u0131 backend API'leriniz y\u00fcksek trafikli senaryolarda bile m\u00fckemmel performans ve d\u00fc\u015f\u00fck kaynak t\u00fcketimi sunar. Statik tipleme, derleme zaman\u0131nda bir\u00e7ok hatay\u0131 yakalayarak uygulamalar\u0131n daha g\u00fcvenilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n<p>Bu iki teknolojiyi birle\u015ftirmek, bir dizi avantaj\u0131 beraberinde getirir:<\/p>\n<ul>\n<li><strong>Geli\u015ftirici Deneyimi:<\/strong> Vite'\u0131n HMR'si ve Kemal'in h\u0131zl\u0131 derleme yetene\u011fi, geli\u015ftirme d\u00f6ng\u00fcs\u00fcn\u00fc inan\u0131lmaz derecede h\u0131zland\u0131r\u0131r.<\/li>\n<li><strong>Performans:<\/strong> Vite'\u0131n optimize edilmi\u015f frontend derlemesi ve Kemal'in do\u011fal olarak h\u0131zl\u0131 Crystal motoru, kullan\u0131c\u0131lar\u0131n\u0131za ak\u0131c\u0131 ve h\u0131zl\u0131 bir uygulama sunar.<\/li>\n<li><strong>\u00d6l\u00e7eklenebilirlik:<\/strong> Crystal'\u0131n performans\u0131 ve d\u00fc\u015f\u00fck kaynak t\u00fcketimi, uygulaman\u0131z\u0131n y\u00fcksek y\u00fck alt\u0131nda bile etkili bir \u015fekilde \u00f6l\u00e7eklenmesine yard\u0131mc\u0131 olur.<\/li>\n<li><strong>Modern \u00c7\u00f6z\u00fcm:<\/strong> Hem frontend hem de backend i\u00e7in en g\u00fcncel ve verimli teknolojileri kullanarak gelece\u011fe y\u00f6nelik, s\u00fcrd\u00fcr\u00fclebilir uygulamalar geli\u015ftirirsiniz.<\/li>\n<li><strong>Net Ay\u0131rma:<\/strong> Frontend ve backend'in ayr\u0131 projelerde y\u00f6netilmesi, daha temiz bir mimari ve daha kolay ekip \u00e7al\u0131\u015fmas\u0131 sa\u011flar.<\/li>\n<\/ul>\n<p>\u00d6zetle, Vite ve Kemal, modern, h\u0131zl\u0131, \u00f6l\u00e7eklenebilir ve geli\u015ftirici dostu web uygulamalar\u0131 olu\u015fturmak isteyen her geli\u015ftirici i\u00e7in g\u00fc\u00e7l\u00fc ve cazip bir kombinasyondur. Bu rehberin, kendi projelerinizde bu g\u00fc\u00e7l\u00fc ikiliyi ba\u015far\u0131l\u0131 bir \u015fekilde kullanman\u0131z i\u00e7in size ilham verdi\u011fini ve yol g\u00f6sterdi\u011fini umuyoruz.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<table border=\"1\" style=\"width:100%; border-collapse: collapse;\">\n<thead>\n<tr>\n<th>Soru<\/th>\n<th>Cevap<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Vite ve Kemal'i ayn\u0131 dizinde tutmak yerine ayr\u0131 dizinlerde tutmak zorunda m\u0131y\u0131m?<\/td>\n<td>Hay\u0131r, zorunda de\u011filsiniz. Bu rehberde a\u00e7\u0131klanan entegrasyon y\u00f6ntemleri, projelerin ayr\u0131 dizinlerde oldu\u011fu varsay\u0131m\u0131na dayan\u0131r ki bu genellikle daha temiz bir proje yap\u0131s\u0131 ve ba\u011f\u0131ms\u0131z geli\u015ftirme imkan\u0131 sunar. Ancak, isterseniz Vite projesini Kemal projesinin bir alt dizini olarak da tutabilirsiniz. Bu durumda, statik dosya yollar\u0131n\u0131 ve proxy ayarlar\u0131n\u0131 buna g\u00f6re ayarlaman\u0131z gerekir.<\/td>\n<\/tr>\n<tr>\n<td>Kemal, Vite'\u0131n derledi\u011fi <code>dist<\/code> dizinini otomatik olarak alg\u0131lar m\u0131?<\/td>\n<td>Hay\u0131r, otomatik olarak alg\u0131lamaz. Kemal'in <code>Kemal::StaticFileHandler<\/code> middleware'\u0131 arac\u0131l\u0131\u011f\u0131yla <code>dist<\/code> dizininin yolunu a\u00e7\u0131k\u00e7a belirtmeniz gerekir. Bu rehberde g\u00f6sterildi\u011fi gibi, <code>static_files_path<\/code> de\u011fi\u015fkenini do\u011fru \u015fekilde ayarlamal\u0131s\u0131n\u0131z.<\/td>\n<\/tr>\n<tr>\n<td>Vite geli\u015ftirme sunucusu ve Kemal backend ayn\u0131 anda m\u0131 \u00e7al\u0131\u015fmal\u0131?<\/td>\n<td>Evet, geli\u015ftirme ortam\u0131nda genellikle ikisinin de ayn\u0131 anda \u00e7al\u0131\u015fmas\u0131 gerekir. Vite, frontend kodunuzu sunar ve HMR sa\u011flar; Kemal ise API isteklerinizi i\u015fler. Vite'\u0131n proxy ayarlar\u0131 sayesinde frontend istekleri Kemal'e y\u00f6nlendirilir. \u00dcretimde ise genellikle sadece Kemal sunucusu \u00e7al\u0131\u015f\u0131r ve hem statik frontend dosyalar\u0131n\u0131 hem de API'leri sunar.<\/td>\n<\/tr>\n<tr>\n<td>Vite ve Kemal, tek sayfa uygulamalar\u0131 (SPA) veya \u00e7ok sayfal\u0131 uygulamalar (MPA) i\u00e7in uygun mu?<\/td>\n<td>Hem Vite hem de Kemal, SPA'lar i\u00e7in m\u00fckemmel bir uyum i\u00e7indedir. Bu rehberdeki entegrasyon, Kemal'in SPA'n\u0131n <code>index.html<\/code> dosyas\u0131n\u0131 sunarak frontend y\u00f6nlendiricisinin devreye girmesini sa\u011flad\u0131\u011f\u0131 bir SPA senaryosunu ele al\u0131r. Vite ayr\u0131ca MPA deste\u011fi de sunar, ancak Kemal ile MPA entegrasyonu, her sayfa i\u00e7in ayr\u0131 HTML dosyalar\u0131n\u0131 Kemal'in sunmas\u0131 veya Kemal'in View Engine'i kullanarak dinamik sayfalar olu\u015fturmas\u0131 gibi farkl\u0131 stratejiler gerektirebilir.<\/td>\n<\/tr>\n<tr>\n<td>Crystal dilinin \u00f6\u011frenme e\u011frisi ne kadard\u0131r? Ruby bilgisi gerekiyor mu?<\/td>\n<td>Crystal, Ruby'ye a\u015fina olan geli\u015ftiriciler i\u00e7in olduk\u00e7a tan\u0131d\u0131k ve \u00f6\u011frenmesi kolayd\u0131r \u00e7\u00fcnk\u00fc s\u00f6zdizimi Ruby'ye \u00e7ok benzer. Ancak, Ruby bilgisi zorunlu de\u011fildir. Crystal, statik tipleme gibi ek \u00f6zelliklere sahip oldu\u011fu i\u00e7in, di\u011fer statik olarak tiple\u015ftirilmi\u015f dillerden (Java, C#, Go) gelen geli\u015ftiriciler de h\u0131zl\u0131ca adapte olabilirler. \u00d6\u011frenme e\u011frisi genel olarak d\u00fc\u015f\u00fckt\u00fcr, \u00f6zellikle g\u00fc\u00e7l\u00fc yaz\u0131m denetimi ve a\u00e7\u0131k hata mesajlar\u0131 sayesinde.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Vite ve Kemal ile modern, h\u0131zl\u0131 ve dinamik web uygulamalar\u0131 geli\u015ftirmeye haz\u0131r m\u0131s\u0131n\u0131z? Bu kapsaml\u0131 rehberle ad\u0131m ad\u0131m&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-35286","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Vite Kemal Kurulumu: Modern Web Uygulamalar\u0131 Nas\u0131l Geli\u015ftirilir?<\/title>\n<meta name=\"description\" content=\"Vite ve Kemal ile modern, h\u0131zl\u0131 ve dinamik web uygulamalar\u0131 geli\u015ftirmeye haz\u0131r m\u0131s\u0131n\u0131z? Bu kapsaml\u0131 rehberle ad\u0131m ad\u0131m kurulumu, entegrasyonu ve en iyi uygulamalar\u0131 ke\u015ffedin. Frontend ve backend g\u00fc\u00e7lerini birle\u015ftirerek projelerinizi bir sonraki seviyeye ta\u015f\u0131y\u0131n.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/vite-kemal-kurulumu-modern-web-uygulamalari-nasil-gelistirilir\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vite Kemal Kurulumu: Modern Web Uygulamalar\u0131 Nas\u0131l Geli\u015ftirilir?\" \/>\n<meta property=\"og:description\" content=\"Vite ve Kemal ile modern, h\u0131zl\u0131 ve dinamik web uygulamalar\u0131 geli\u015ftirmeye haz\u0131r m\u0131s\u0131n\u0131z? Bu kapsaml\u0131 rehberle ad\u0131m ad\u0131m kurulumu, entegrasyonu ve en iyi uygulamalar\u0131 ke\u015ffedin. Frontend ve backend g\u00fc\u00e7lerini birle\u015ftirerek projelerinizi bir sonraki seviyeye ta\u015f\u0131y\u0131n.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/vite-kemal-kurulumu-modern-web-uygulamalari-nasil-gelistirilir\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-27T20:01:13+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"32 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vite-kemal-kurulumu-modern-web-uygulamalari-nasil-gelistirilir\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vite-kemal-kurulumu-modern-web-uygulamalari-nasil-gelistirilir\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Vite Kemal Kurulumu: Modern Web Uygulamalar\u0131 Nas\u0131l Geli\u015ftirilir?\",\"datePublished\":\"2025-11-27T20:01:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vite-kemal-kurulumu-modern-web-uygulamalari-nasil-gelistirilir\/\"},\"wordCount\":5238,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vite-kemal-kurulumu-modern-web-uygulamalari-nasil-gelistirilir\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vite-kemal-kurulumu-modern-web-uygulamalari-nasil-gelistirilir\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/vite-kemal-kurulumu-modern-web-uygulamalari-nasil-gelistirilir\/\",\"name\":\"Vite Kemal Kurulumu: Modern Web Uygulamalar\u0131 Nas\u0131l Geli\u015ftirilir?\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-27T20:01:13+00:00\",\"description\":\"Vite ve Kemal ile modern, h\u0131zl\u0131 ve dinamik web uygulamalar\u0131 geli\u015ftirmeye haz\u0131r m\u0131s\u0131n\u0131z? Bu kapsaml\u0131 rehberle ad\u0131m ad\u0131m kurulumu, entegrasyonu ve en iyi uygulamalar\u0131 ke\u015ffedin. Frontend ve backend g\u00fc\u00e7lerini birle\u015ftirerek projelerinizi bir sonraki seviyeye ta\u015f\u0131y\u0131n.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vite-kemal-kurulumu-modern-web-uygulamalari-nasil-gelistirilir\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vite-kemal-kurulumu-modern-web-uygulamalari-nasil-gelistirilir\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vite-kemal-kurulumu-modern-web-uygulamalari-nasil-gelistirilir\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vite Kemal Kurulumu: Modern Web Uygulamalar\u0131 Nas\u0131l Geli\u015ftirilir?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Vite Kemal Kurulumu: Modern Web Uygulamalar\u0131 Nas\u0131l Geli\u015ftirilir?","description":"Vite ve Kemal ile modern, h\u0131zl\u0131 ve dinamik web uygulamalar\u0131 geli\u015ftirmeye haz\u0131r m\u0131s\u0131n\u0131z? Bu kapsaml\u0131 rehberle ad\u0131m ad\u0131m kurulumu, entegrasyonu ve en iyi uygulamalar\u0131 ke\u015ffedin. Frontend ve backend g\u00fc\u00e7lerini birle\u015ftirerek projelerinizi bir sonraki seviyeye ta\u015f\u0131y\u0131n.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/vite-kemal-kurulumu-modern-web-uygulamalari-nasil-gelistirilir\/","og_locale":"tr_TR","og_type":"article","og_title":"Vite Kemal Kurulumu: Modern Web Uygulamalar\u0131 Nas\u0131l Geli\u015ftirilir?","og_description":"Vite ve Kemal ile modern, h\u0131zl\u0131 ve dinamik web uygulamalar\u0131 geli\u015ftirmeye haz\u0131r m\u0131s\u0131n\u0131z? Bu kapsaml\u0131 rehberle ad\u0131m ad\u0131m kurulumu, entegrasyonu ve en iyi uygulamalar\u0131 ke\u015ffedin. Frontend ve backend g\u00fc\u00e7lerini birle\u015ftirerek projelerinizi bir sonraki seviyeye ta\u015f\u0131y\u0131n.","og_url":"https:\/\/fatihsoysal.com\/blog\/vite-kemal-kurulumu-modern-web-uygulamalari-nasil-gelistirilir\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-27T20:01:13+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"32 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/vite-kemal-kurulumu-modern-web-uygulamalari-nasil-gelistirilir\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/vite-kemal-kurulumu-modern-web-uygulamalari-nasil-gelistirilir\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Vite Kemal Kurulumu: Modern Web Uygulamalar\u0131 Nas\u0131l Geli\u015ftirilir?","datePublished":"2025-11-27T20:01:13+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/vite-kemal-kurulumu-modern-web-uygulamalari-nasil-gelistirilir\/"},"wordCount":5238,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/vite-kemal-kurulumu-modern-web-uygulamalari-nasil-gelistirilir\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/vite-kemal-kurulumu-modern-web-uygulamalari-nasil-gelistirilir\/","url":"https:\/\/fatihsoysal.com\/blog\/vite-kemal-kurulumu-modern-web-uygulamalari-nasil-gelistirilir\/","name":"Vite Kemal Kurulumu: Modern Web Uygulamalar\u0131 Nas\u0131l Geli\u015ftirilir?","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-27T20:01:13+00:00","description":"Vite ve Kemal ile modern, h\u0131zl\u0131 ve dinamik web uygulamalar\u0131 geli\u015ftirmeye haz\u0131r m\u0131s\u0131n\u0131z? Bu kapsaml\u0131 rehberle ad\u0131m ad\u0131m kurulumu, entegrasyonu ve en iyi uygulamalar\u0131 ke\u015ffedin. Frontend ve backend g\u00fc\u00e7lerini birle\u015ftirerek projelerinizi bir sonraki seviyeye ta\u015f\u0131y\u0131n.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/vite-kemal-kurulumu-modern-web-uygulamalari-nasil-gelistirilir\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/vite-kemal-kurulumu-modern-web-uygulamalari-nasil-gelistirilir\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/vite-kemal-kurulumu-modern-web-uygulamalari-nasil-gelistirilir\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Vite Kemal Kurulumu: Modern Web Uygulamalar\u0131 Nas\u0131l Geli\u015ftirilir?"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=35286"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35286\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=35286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=35286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=35286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}