ElectronJS ile Pug Kullanımı

Merhabalar, Node.JS derslerimize kaldığımız yerden devam ediyoruz. Bu dersimizde ElectronJS ile Pug templatelerini okumayı anlatacağım. Hadi başlayalım !

Daha önceki dersimizde ElectronJS kurulumunu anlatmıştım. Şimdi de Node.JS ile web siteleri yapan kişilerin bildiği Pug ile template hazırlama ve ElectronJS ile bu dosyaları okumayı anlatacağım.

Öncelikle bir tane ElectronJS projesi oluşturalım. ElectronJS projesi oluşturmayı bilmiyorsanız buraya tıklayabilirsiniz. Proje oluşturduktan sonra Pug kütüphanesini indirip projemize dahil etmemiz gerekiyor. ElectronJS’de Pug kütüphanesini doğrudan kullanamıyoruz, bunun yerine electron-pug isimli kütüphaneyi kullanacağız. electron-pug kütüphanesini projemize dahil etmek için terminali (Windows için CMD) açıp

npm i electron-pug

komutunu girelim ve npm’in electron-pug kütüphanesini indirip projemize dahil etmesini bekleyelim. Kurulumun ardından artık electron-pug kullanacağımız sayfamıza gelerek sayfamıza dahil edelim. Bunuda standart Node.JS eklemeleriyle yapacağız. Yani

const pug = require('electron-pug');

kod satırını sayfamızın en başına yazalım. Ardından electron-pug kütüphanesini ayarlamamız gerekiyor, yani sayfada çağırsak dahi doğrudan kullanamıyoruz. Ufak bir satır kod ile ayarlamayı yapalım.

pug({ pretty: true });

Evet artık Pug templateleri hazırlayıp rahatlıkla kullanabiliriz. Ben örnek olsun diye ufak bir Pug template yazacağım fakat siz istediğiniz gibi şeyler yapabilirsiniz.

html
head
title Anasayfa
meta(charset="utf8")
body
h1 Burası Anasayfa

Bu Pug kodunu örneğin main.pug sayfası içine kaydedelim ve artık electron tarafına geçiş yapalım. ElectronJS’i sayfamızda çağıralım, Pug ayarlamasını yapalım ve son olarakta az önce oluşturduğumuz main.pug dosyasını projemiz çalıştığında açılacak ilk sayfa olarak belirleyelim.

const { app, BrowserWindow } = require('electron');
const pug = require('electron-pug');
app.on('ready', () => {
    pug({ pretty: true });
    let window = new BrowserWindow();
    window.loadURL(`file://${__dirname}/main.pug`);
});

Eveett, sonrasında projemizi çalıştırdığımızda ElectronJS içerisinde Pug’ın çok güzel çalıştığını görebilirsiniz 🙂

Bu dersimizde bu kadardı, tüm ElectronJS derslerimize buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.