Son kullanma tarihi geçmiş, bayatlamış bir tarayıcı kullanıyorsanız, Mercedes kullanmak yerine tosbağaya binmek gibi... Web sitelerini düzgün görüntüleyemiyorsanız eh, bi' zahmet tarayıcınızı güncelleyiniz. Modern Web standartlarını karşılayan bir tarayıcı alternatifine göz atın.
ÇözüldüLocalHost'tan çekilmesi gereken veriler sunucu tarafında nasıl çalıştırılır?
Şu anda JSON kullanarak minik bir uygulama yaptım.
Verileri localhosttan çekiyorum. Bunu da terminal ile çalıştırıyorum.
Yaptığım uygulamayı Netlify'a yükledim ancak localhost aktif olmadığı için çalışmıyor. Bilgisayarda JSON'u aktif edersem Netlify'da çıktı alıyorum ancak telefonda veya başka cihazlarda bu çıktı sağlanamıyor.
Bende ki çıktı bu şekilde ancak sizde bu gözükmeyecek.
Projem: React App
Temel sorun şu. Json-server aslında sizin localhost'unuzda çalışan ayrı bir server uygulaması. İnternete yüklediğinizde ise bu sunucu yok, sadece react uygulaması çalışıyor. Ya json-server'ı internette bir sunucuda çalıştırmak ya da bu json dosyasına farklı bir şekilde erişip react tarafında ona göre okumak gerek.
Movies.json public klasörüne alınıp oradan okunmaya çalışılabilir.
Düzenleme: Kodu biraz daha inceledim de sadece okuma işlemi değil silme, ekleme de yapıyorsunuz. Bu durumda public klasörüne almak işe yaramayacaktır çünkü o sadece json dosyasını olduğu gibi okumanızı sağlar.
Test için railway.app üzerinde JSON-server çalıştırmayı denedim oldu , şurada görebilirsiniz:
Get a full fake REST API with zero coding in less than 30 seconds (seriously) - typicode/json-server
github.com
Aynı klasörde server.js dosyası oluşturup json-server kodunu yazdım:
JavaScript:
const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('movies.json')
const middlewares = jsonServer.defaults()
const PORT = process.env.PORT || 3002;
server.use(middlewares)
server.use(router)
server.listen(PORT, () => {
console.log('JSON Server is running on PORT ' + PORT)
})
Bu temel olarak json-server movies.json komutunun kod haline çevrilmiş hali. PORT değişkenini dışardan alıyor. railway.app için bu gerekli, portu kendi belirliyor.
Son olarak railway.app'ın hangi dosyayı çalıştıracağını package.json'da belirlemek gerekiyor. package.json'a da "start": "node server.js" satırını ekledim. package.json şöyle olmuş oldu:
Artık backendimiz hazır . denemek için npm start diyerek test edebiliriz. Yine localhost:3002 üzerinde çalışacaktır.
Artık bunu github'a yükleyip railway.app'a bağlayabiliyoruz. Railway'de proje oluştururken zaten hangi github reposu diye soruyor. Yüklediğimiz repoyu seçip devam ediyoruz. İşlem tamamlanınca settings kısmından generate domain dediğimizde bize backend api linkini veriyor.
localhost:3002'de çalışan sunucuyu internette bir yerde çalıştırmanız lazım. Onun da kodunu atarsanız inceleyebiliriz. Şu an Github'ta sadece react kodu görünüyor. Çoğu react dersinde backend express ile yazlıyor. Express sunucusu ise railway.app üzerinde test için ücretsiz yayınlayabilirsiniz. railway üzerinde proje açarken Github reposunu seçmeniz yeterli.
Düzenleme: Pardon movies'i api klasöründen çekiyormuş şimdi fark ettim.
Localhost: 3002'de çalışan sunucuyu internette bir yerde çalıştırmanız lazım. Onun da kodunu atarsanız inceleyebiliriz. Şu an GitHub'ta sadece React kodu görünüyor. Çoğu React dersinde backend Express ile yazlıyor. Express sunucusu ise railway. App üzerinde test için ücretsiz yayınlayabilirsiniz. Railway üzerinde proje açarken GitHub reposunu seçmeniz yeterli.
ROSER137 dediği gibi bu serveri hostlamanız gerek ya da üsste belirttiğim gibi bunlar static olduğu için bir JS dosyasına atıp exportlayabilir ya da otomatik endpoint (kolaylık olsun diye dedim) olusturan bir Database'e verileri atıp oradan çekebilirsiniz.
Temel sorun şu. Json-server aslında sizin localhost'unuzda çalışan ayrı bir server uygulaması. İnternete yüklediğinizde ise bu sunucu yok, sadece react uygulaması çalışıyor. Ya json-server'ı internette bir sunucuda çalıştırmak ya da bu json dosyasına farklı bir şekilde erişip react tarafında ona göre okumak gerek.
Movies.json public klasörüne alınıp oradan okunmaya çalışılabilir.
Düzenleme: Kodu biraz daha inceledim de sadece okuma işlemi değil silme, ekleme de yapıyorsunuz. Bu durumda public klasörüne almak işe yaramayacaktır çünkü o sadece json dosyasını olduğu gibi okumanızı sağlar.
Test için railway.app üzerinde JSON-server çalıştırmayı denedim oldu , şurada görebilirsiniz:
Get a full fake REST API with zero coding in less than 30 seconds (seriously) - typicode/json-server
github.com
Aynı klasörde server.js dosyası oluşturup json-server kodunu yazdım:
JavaScript:
const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('movies.json')
const middlewares = jsonServer.defaults()
const PORT = process.env.PORT || 3002;
server.use(middlewares)
server.use(router)
server.listen(PORT, () => {
console.log('JSON Server is running on PORT ' + PORT)
})
Bu temel olarak json-server movies.json komutunun kod haline çevrilmiş hali. PORT değişkenini dışardan alıyor. railway.app için bu gerekli, portu kendi belirliyor.
Son olarak railway.app'ın hangi dosyayı çalıştıracağını package.json'da belirlemek gerekiyor. package.json'a da "start": "node server.js" satırını ekledim. package.json şöyle olmuş oldu:
Artık backendimiz hazır . denemek için npm start diyerek test edebiliriz. Yine localhost:3002 üzerinde çalışacaktır.
Artık bunu github'a yükleyip railway.app'a bağlayabiliyoruz. Railway'de proje oluştururken zaten hangi github reposu diye soruyor. Yüklediğimiz repoyu seçip devam ediyoruz. İşlem tamamlanınca settings kısmından generate domain dediğimizde bize backend api linkini veriyor.
React değilde Next kullanabilirsin. SSR olduğu için json da istediğin gibi değişiklik yapabilirsin.
Bana sorarsan express ile basic bir server oluştur. JSON dosyanı içerisine at oradan fetch yap. Hem ileride json değilde gerçek db ile çalışmaya başladığında client kodların etkilenmez.
Bu örneği next'e uyarlamak biraz zor değil mi? Json-server'a göre yazılmış. Backend komple kodu yok şu an. Backend tek bir json dosyasından ibaret. Next'e uyarlamaya çalışsak daha da karışacak next içine backend kodu yazmak gerecek.
Keşke json-server'ı webte çalıştırmanın daha kolay bir yolu olsaydı.
Temel sorun şu. JSON-server aslında sizin localhost'unuzda çalışan ayrı bir server uygulaması. İnternete yüklediğinizde ise bu sunucu yok, sadece React uygulaması çalışıyor. Ya JSON-server'ı internette bir sunucuda çalıştırmak ya da bu JSON dosyasına farklı bir şekilde erişip React tarafında ona göre okumak gerek.
Movies. JSON public klasörüne alınıp oradan okunmaya çalışılabilir.
Düzenleme: Kodu biraz daha inceledim de sadece okuma işlemi değil silme, ekleme de yapıyorsunuz. Bu durumda public klasörüne almak işe yaramayacaktır çünkü o sadece JSON dosyasını olduğu gibi okumanızı sağlar.
Test için railway. App üzerinde JSON-server çalıştırmayı denedim oldu , şurada görebilirsiniz:
Get a full fake REST API with zero coding in less than 30 seconds (seriously) - typicode/json-server
github.com
Aynı klasörde server.js dosyası oluşturup JSON-server kodunu yazdım:
JavaScript:
const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('movies.json')
const middlewares = jsonServer.defaults()
const PORT = process.env.PORT || 3002;
server.use(middlewares)
server.use(router)
server.listen(PORT, () => {
console.log('JSON Server is running on PORT ' + PORT)
})
Bu temel olarak json-server movies.json komutunun kod haline çevrilmiş hali. PORT değişkenini dışarıdan alıyor. Railway. App için bu gerekli, portu kendi belirliyor.
Son olarak railway. App'ın hangi dosyayı çalıştıracağını package. JSON'da belirlemek gerekiyor. Package. JSON'a da "start": "node server.js" satırını ekledim. Package. JSON şöyle olmuş oldu:
Artık backendimiz hazır . Denemek için NPM start diyerek test edebiliriz. Yine localhost: 3002 üzerinde çalışacaktır.
Artık bunu GitHub'a yükleyip railway. App'a bağlayabiliyoruz. Railway'de proje oluştururken zaten hangi GitHub reposu diye soruyor. Yüklediğimiz repoyu seçip devam ediyoruz. İşlem tamamlanınca settings kısmından generate domain dediğimizde bize backend API linkini veriyor.
Bu örneği next'e uyarlamak biraz zor değil mi? Json-server'a göre yazılmış. Backend komple kodu yok şu an. Backend tek bir json dosyasından ibaret. Next'e uyarlamaya çalışsak daha da karışacak next içine backend kodu yazmak gerecek.
Keşke json-server'ı webte çalıştırmanın daha kolay bir yolu olsaydı.
Evet biraz uğraşır çünkü genel geliştirmesi fetch üzerine kurulmuş. Ama bu projede yapılan işlemler için Next veya Remix kullanmak çok mantıklı olabilirmiş.
github.com
, şurada görebilirsiniz:
