Laravel ve Storyblok: Gerçek Zamanlı Görsel Editörü Aktive Etme

Son güncelleme: 6 Şubat 2026 08:17

Bu makalede, Laravel ile Storyblok entegrasyonu için etkili bir yaklaşım sunulmakta ve gerçek zamanlı görsel düzenleme deneyimini açığa çıkaran pratik kararlar üzerinde durulmaktadır.

<p>Gerçek zamanlı görsel düzenleme için headless CMS entegrasyonları düşündüğünüzde, genellikle React, Vue veya Next.js gibi çerçeveler akla gelir. Peki, <strong>Laravel ve Blade şablonları</strong> ile aynı kesintisiz görsel düzenleme deneyimini sağlayabileceğinizi söylesem?</p>

<p>Bu makalede, Storyblok'un Görsel Editörü’nü Laravel ile birlikte nasıl entegre edeceğinizi göstereceğim; gerçek zamanlı önizleme güncellemeleri ve titiz DOM karşılaştırması ile birlikte. JavaScript çerçevesine gerek yok.</p>

<h2>
    <a name="why-laravel-storyblok" href="#why-laravel-storyblok"></a>
    Neden Laravel + Storyblok?
</h2>

<p>Kodu incelemeye başlamadan önce, herkesin aklındaki o soruya odaklanalım: <em>"Storyblok, JavaScript çerçeveleri için tasarlanmamış mı?"</em></p>

<p>Kesinlikle hayır. Storyblok <strong>çerçeve bağımsız</strong>dadır. En yaygın belgeler React ve Vue’yu vurgulasa da, temel API’ler JSON'u çeken, HTML'i görüntüleyen ve web tarayıcısında JavaScript'i çalıştıran herhangi bir teknoloji ile çalışır.</p>

<ol>
    <li>Bir API’den JSON çekmek</li>
    <li>HTML render etmek</li>
    <li>Tarayıcıda JavaScript çalıştırmak</li>
</ol>

<p>Laravel bu üç konuda da başarılıdır. Ayrıca, elde ettiğiniz avantajlar şunlardır:</p>

<ul>
    <li>
        <strong>Sunucu tarafı renderlama</strong>, hemen hemen her şey için SEO ve GEO açısından iyidir.</li>
    <li>
        <strong>Blade’in şık şablonlama</strong> sözdizimi</li>
    <li>
        <strong>Hiçbir hidratasyon sorunu</strong> yoktur (SSR çerçevelerde yaygın bir sorun)</li>
    <li>
        <strong>Node.js uygulamalarına kıyasla</strong> daha basit bir dağıtım (bu benim kişisel tecrübeme dayalıdır; belki Node becerilerine sahip bir devop mühendisi farklı düşünebilir)</li>
</ul>

<h2>
    <a name="step-1-setting-up-the-laravel-project" href="#step-1-setting-up-the-laravel-project"></a>
    Adım 1: Laravel Projesini Kurma
</h2>

<p>Yeni bir Laravel kurulumu ile başlayın:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight shell"><code>laravel new storyblok-laravel

cd storyblok-laravel

<p>Storyblok PHP SDK'sını (İçerik Dağıtım API'si için) yükleyin:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight shell"><code>composer require storyblok/php-content-api-client

<p>Storyblok kimlik bilgilerinizi <code>.env</code> dosyasına ekleyin:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight plaintext"><code>STORYBLOK_ACCESS_TOKEN=your_preview_token_here

STORYBLOK_VERSION=draft

<p><code>config/services.php</code> dosyasına Storyblok yapılandırmasını ekleyin:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight php"><code>    <span class="s1">'storyblok'</span> <span class="o">=&gt;</span> <span class="p">[</span>
    <span class="s1">'access_token'</span> <span class="o">=&gt;</span> <span class="nf">env</span><span class="p">(</span><span class="s1">'STORYBLOK_ACCESS_TOKEN'</span><span class="p">),</span>
    <span class="s1">'version'</span> <span class="o">=&gt;</span> <span class="nf">env</span><span class="p">(</span><span class="s1">'STORYBLOK_VERSION'</span><span class="p">,</span> <span class="s1">'published'</span><span class="p">),</span>
<span class="p">],</span>

<h2>
    <a name="step-2-enable-https-for-local-development" href="#step-2-enable-https-for-local-development"></a>
    Adım 2: Yerel Geliştirme için HTTPS’yi Etkinleştirme
</h2>

<p>Storyblok’un Görsel Editörü, önizleme URL'nizin <strong>HTTPS</strong> üzerinden sunulmasını gerektirir, bu nedenle yerel geliştirmede bile. Bu bir güvenlik gereksinimidir çünkü editör Storyblok'un iframe'i içinde çalışır ve modern tarayıcılar karışık içeriği engeller.</p>

<p>En basit çözüm, Vite’nin mkcert eklentisini kullanarak Laravel arka ucunuza bir proxy oluşturmaktır.</p>

<p>mkcert eklentisini yükleyin:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight shell"><code>bun add <span class="nt">-d</span> vite-plugin-mkcert

# veya eğer npm kullanmayı tercih ediyorsanız:
# npm install -D vite-plugin-mkcert

<p><code>vite.config.js</code> dosyanızı güncelleyin:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight javascript"><code>import { defineConfig } from "vite";

import laravel from “laravel-vite-plugin”;
import tailwindcss from “@tailwindcss/vite”;
import mkcert from “vite-plugin-mkcert”;

const host = “127.0.0.1”;
const port = “8000”;

export default defineConfig({
plugins: [
mkcert(),
laravel({
input: [“resources/css/app.css”, “resources/js/app.js”],
refresh: true,
}),
tailwindcss(),
],
server: {
https: true,
proxy: {
“^(?!(\/vite|\/resources|\/node_modules))”: {
target: http://${host}:${port},
},
},
host,
port: 5173,
hmr: { host },
watch: {
ignored: [“/storage/framework/views/“],
},
},
});

<p>Makalenin sonunda, bu yapılandırma ile:</p>
<ol>
    <li><strong>Gerçek zamanlı görsel düzenleme</strong> - Değişiklikler, editörler yazarken anında görünür</li>
    <li><strong>Flickering yok</strong> - Idiomorph pürüzsüz güncellemeleri sağlar</li>
    <li><strong>Tıkla ve düzenle</strong> - Herhangi bir bileşeni düzenlemek için tıklayın</li>
    <li><strong>SEO’ya uygun</strong> - Sunucu tarafında render edilen HTML, istemci tarafında hidratasyon yok</li>
    <li><strong>Hızlı sayfa yüklemeleri</strong> - JavaScript çerçeve yükü yok</li>
    <li><strong>Optimize edilmiş görüntüler</strong> - Otomatik WebP dönüşümü ile uyumlu responsive görüntüler</li>
</ol>

<p>Laravel ekosisteminde kalmanın sadeliğini seveceksiniz.</p>

Kaynak: Orijinal Makale

Laravel ve Storyblok: Gerçek Zamanlı Görsel Editörü Aktive Etme

Sanal Medya

Son Eklenenler

Laufey’in Savaş Taktiği Eski Yunan Üçlemesinden İlham Aldı

Şimşek, coaxial kablodan apartmana girip PC’yi patlattı

Outlook’un yıllardır güvenlik açığı, Fedora ve Dovecot güncellemesiyle ortaya çıktı

Yaz Geliştirici Festivali 2026: Tüm Yenilikler Ortaya Çıkıyor

Madonna’nın Grindr’daki Cesur ve Heyecan Verici Ticareti

Meta’nın AI Sunucuları İçin Tüm ABD’ye Çadırlar Kurması

Siber güvenlik, yapay zeka ve savunma sanayiinden; finans ve sinema dünyasına uzanan geniş bir yelpaze. Teknomers; teknoloji, strateji ve yazılım dünyasını sade bir dille sizlerle buluşturuyor.

Kurumsal

Kategoriler

Populer