Restaurant Menu Önizleme Sistemi Kurulumu

Atölyemizde geliştirdiğimiz en kapsamlı dijital çözümlerden biri olan Restaurant Menü Otomasyonu projesinin önizleme sürümünü web sitemiz üzerinde çalışır hale getirmek için yenilikçi bir mimari kurmamız gerekti.

İlk aşamada istemci tarafındaki Vite uygulamasını doğrudan harici port üzerinden iframe ile çağırmayı denedik. Ancak bu durum, SSL sertifika uyumsuzluklarına ve tarayıcılardaki 'Mixed Content' engellemelerine sebep oldu. Çözüm olarak Next.js'in güçlü proxy rewrite kurallarından yararlanmaya karar verdik. `next.config.ts` dosyasına eklediğimiz kurallar ile `/demo-proxy` ve statik asset yollarını doğrudan yerel Vite sunucusuna yönlendirdik.

İkinci büyük engel, uygulamanın çalışabilmesi için bir veritabanı (MongoDB) bağlantısına ihtiyaç duymasıydı. Canlı bir demo ortamında ağır ve hantal bir MongoDB sunucusu çalıştırmak yerine, tamamen bellekte ve `data.json` dosyası üzerinde çalışan butik bir Node/Express mock API'si geliştirdik. Bu mock sunucusunu `5000` portunda çalıştırarak, Next.js rewrite mekanizması üzerinden gelen tüm istekleri otomatik olarak bu sunucuya yönlendirdik.

Son olarak React Router'ın iframe içindeki konumlandırmayı bozarak 'No routes matched location /demo-proxy' hatası vermesini engellemek için, Vite uygulamasının giriş noktasına dinamik bir `basename` mantığı ekledik. Bu sayede, tarayıcı adresi `/demo-proxy` ile başladığında router otomatik olarak kendini bu ön eke göre uyarladı ve kusursuz bir gezinme sağlandı.