{"id":30307,"date":"2025-09-26T15:42:30","date_gmt":"2025-09-26T12:42:30","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=30307"},"modified":"2025-09-26T15:59:34","modified_gmt":"2025-09-26T12:59:34","slug":"ubuntu-14-04te-node-js-sails-js-ve-dust-js-kullanarak-spalar-tek-sayfalik-uygulamalar-nasil-olusturulur","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/ubuntu-14-04te-node-js-sails-js-ve-dust-js-kullanarak-spalar-tek-sayfalik-uygulamalar-nasil-olusturulur\/","title":{"rendered":"Ubuntu 14.04’te Node JS, Sails JS ve Dust JS Kullanarak SPA’lar (Tek Sayfal\u0131k Uygulamalar) Nas\u0131l Olu\u015fturulur"},"content":{"rendered":"

<\/p>\n

Node.js, Sails.js ve Dust.js ile Tek Sayfa Uygulamalar\u0131 (SPA) Geli\u015ftirme Rehberi (Ubuntu 14.04)<\/h2>\n

Tek Sayfa Uygulamalar\u0131 (Single Page Applications – SPA), modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biridir. Geleneksel \u00e7ok sayfal\u0131 uygulamalar\u0131n aksine, SPA’lar t\u00fcm gerekli kaynaklar\u0131 ilk y\u00fcklemede getirerek veya dinamik olarak y\u00fckleyerek kullan\u0131c\u0131ya kesintisiz ve h\u0131zl\u0131 bir deneyim sunar. Bu rehberde, NodeJS ekosisteminin g\u00fc\u00e7l\u00fc bir par\u00e7as\u0131 olan Sails.js framework’\u00fcn\u00fc ve istemci taraf\u0131 \u015fablonlama i\u00e7in Dust.js’i kullanarak Ubuntu 14.04 \u00fczerinde nas\u0131l SPA geli\u015ftirece\u011finizi ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. Ubuntu 14.04 her ne kadar eski bir s\u00fcr\u00fcm olsa da, temel prensipler ve kurulum ad\u0131mlar\u0131 daha yeni s\u00fcr\u00fcmler i\u00e7in de benzerlik g\u00f6sterir.<\/p>\n

1. Ortam Kurulumu<\/h3>\n

SPA geli\u015ftirmeye ba\u015flamadan \u00f6nce, gerekli ara\u00e7lar\u0131 Ubuntu 14.04 sisteminize kurman\u0131z gerekmektedir.<\/p>\n

1.1 Node.js ve npm Kurulumu<\/h4>\n

Node.js, sunucu taraf\u0131 JavaScript \u00e7al\u0131\u015fma zaman\u0131 ortam\u0131d\u0131r ve npm (Node Package Manager) ile birlikte gelir. Sails.js ve Dust.js gibi paketleri kurmak i\u00e7in npm’e ihtiyac\u0131m\u0131z var. Ubuntu 14.04 i\u00e7in Node.js’in daha g\u00fcncel bir s\u00fcr\u00fcm\u00fcn\u00fc kurmak i\u00e7in NVM (Node Version Manager) kullanmak en iyi y\u00f6ntemdir.<\/p>\n

\r\n
NVM'i indirin ve kurun<\/h2>\r\ncurl -o- https:\/\/raw.githubusercontent.com\/nvm-sh\/nvm\/v0.39.1\/install.sh | bash\r\n\r\n
Terminali yeniden ba\u015flat\u0131n veya a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n<\/h2>\r\nsource ~\/.bashrc\r\n\r\n
Node.js'in en son LTS (Uzun S\u00fcreli Destek) s\u00fcr\u00fcm\u00fcn\u00fc kurun<\/h2>\r\nnvm install --lts\r\n\r\n
Varsay\u0131lan olarak kullanmak i\u00e7in ayarlay\u0131n<\/h2>\r\nnvm use --lts\r\n\r\n
Kurulumu do\u011frulay\u0131n<\/h2>\r\nnode -v\r\nnpm -v\r\n<\/code><\/pre>\n
Bu ad\u0131mlar, Node.js ve npm’in en g\u00fcncel ve kararl\u0131 s\u00fcr\u00fcm\u00fcn\u00fc sisteminize kurman\u0131z\u0131 sa\u011flayacakt\u0131r.<\/p>\n
1.2 Sails.js CLI Kurulumu<\/h4>\n
Sails.js, web uygulamalar\u0131n\u0131 h\u0131zla geli\u015ftirmek i\u00e7in tasarlanm\u0131\u015f bir MVC framework’\u00fcd\u00fcr. Komut sat\u0131r\u0131 aray\u00fcz\u00fc (CLI) ile proje olu\u015fturma, modelleri ve controller’lar\u0131 y\u00f6netme gibi i\u015flemleri kolayca yapabilirsiniz.<\/p>\n
\r\n
Sails.js CLI'\u0131 global olarak kurun<\/h2>\r\nnpm install -g sails@1.x.x # En son 1.x.x s\u00fcr\u00fcm\u00fcn\u00fc kullan\u0131n, \u00f6rne\u011fin 1.5.0\r\n<\/code><\/pre>\n
Kurulumdan sonra sails -v<\/code> komutu ile Sails.js s\u00fcr\u00fcm\u00fcn\u00fc kontrol edebilirsiniz.<\/p>\n
1.3 MongoDB Kurulumu (\u0130ste\u011fe Ba\u011fl\u0131 ama \u00d6nerilir)<\/h4>\n
\u00c7o\u011fu SPA, veri kal\u0131c\u0131l\u0131\u011f\u0131 i\u00e7in bir veritaban\u0131na ihtiya\u00e7 duyar. Sails.js, \u00e7e\u015fitli veritabanlar\u0131n\u0131 destekler, ancak MongoDB, Node.js ekosistemiyle iyi entegre olan pop\u00fcler bir NoSQL veritaban\u0131d\u0131r.<\/p>\n
\r\n
MongoDB public key'ini ekleyin<\/h2>\r\nsudo apt-key adv --keyserver hkp:\/\/keyserver.ubuntu.com:80 --recv 7F0CEB10\r\n\r\n
MongoDB depolar\u0131n\u0131 ekleyin (Ubuntu 14.04 i\u00e7in)<\/h2>\r\necho \"deb http:\/\/repo.mongodb.org\/apt\/ubuntu trusty\/mongodb-org\/3.0 multiverse\" | sudo tee \/etc\/apt\/sources.list.d\/mongodb-org-3.0.list\r\n\r\n
Paket listelerini g\u00fcncelleyin<\/h2>\r\nsudo apt-get update\r\n\r\n
MongoDB'yi kurun<\/h2>\r\nsudo apt-get install -y mongodb-org\r\n\r\n
MongoDB servisini ba\u015flat\u0131n<\/h2>\r\nsudo service mongod start\r\n\r\n
Servisin \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 do\u011frulay\u0131n<\/h2>\r\nsudo service mongod status\r\n<\/code><\/pre>\n
Bu ad\u0131mlar, MongoDB 3.0 s\u00fcr\u00fcm\u00fcn\u00fc Ubuntu 14.04’e kuracakt\u0131r. Daha yeni MongoDB s\u00fcr\u00fcmleri i\u00e7in farkl\u0131 depo konfig\u00fcrasyonlar\u0131 gerekebilir.<\/p>\n
2. Sails.js Projesi Olu\u015fturma ve Temel Yap\u0131land\u0131rma<\/h3>\n
\u015eimdi Sails.js projemizi olu\u015fturabilir ve Dust.js’i view engine olarak yap\u0131land\u0131rabiliriz.<\/p>\n
2.1 Yeni Sails.js Projesi Olu\u015fturma<\/h4>\n
Terminalinizde projenizi olu\u015fturmak istedi\u011finiz dizine gidin ve a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
\r\nsails new my-spa-app --no-frontend\r\ncd my-spa-app\r\n<\/code><\/pre>\n
--no-frontend<\/code> bayra\u011f\u0131, Sails.js’in varsay\u0131lan olarak gelen \u00f6ny\u00fcz \u015fablonlar\u0131n\u0131 (\u00f6rn. EJS, Grunt\/Gulp) kurmas\u0131n\u0131 engeller. \u00c7\u00fcnk\u00fc biz Dust.js ve kendi \u00f6n y\u00fcz yakla\u015f\u0131m\u0131m\u0131z\u0131 kullanaca\u011f\u0131z.<\/p>\n
2.2 Dust.js’i View Engine Olarak Ayarlama<\/h4>\n
Sails.js, varsay\u0131lan olarak EJS’i view engine olarak kullan\u0131r. Dust.js’i kullanmak i\u00e7in \u00f6nce paketi kurmal\u0131 ve ard\u0131ndan config\/views.js<\/code> dosyas\u0131n\u0131 d\u00fczenlemeliyiz.<\/p>\n
\r\nnpm install consolidate dustjs-linkedin dustjs-helpers --save\r\n<\/code><\/pre>\n
\u015eimdi config\/views.js<\/code> dosyas\u0131n\u0131 a\u00e7\u0131n ve i\u00e7eri\u011fini a\u015fa\u011f\u0131daki gibi g\u00fcncelleyin:<\/p>\n
\r\n\/\/ config\/views.js\r\nmodule.exports.views = {\r\n  engine: require('consolidate').dust,\r\n  layout: 'layouts\/layout', \/\/ T\u00fcm sayfalar i\u00e7in ana layout dosyas\u0131\r\n  extension: 'dust',\r\n  partials: require('path').resolve(__dirname, '..', 'views', 'partials')\r\n};\r\n<\/code><\/pre>\n
Bu yap\u0131land\u0131rma, Sails.js’e .dust<\/code> uzant\u0131l\u0131 dosyalar\u0131 Dust.js ile derlemesini ve views\/layouts\/layout.dust<\/code> dosyas\u0131n\u0131 ana \u015fablon olarak kullanmas\u0131n\u0131 s\u00f6yler. partials<\/code> ayar\u0131, Dust.js’in par\u00e7al\u0131 \u015fablonlar\u0131 nerede arayaca\u011f\u0131n\u0131 belirtir.<\/p>\n
2.3 Temel Rota ve Controller Olu\u015fturma<\/h4>\n
SPA’lar genellikle tek bir ana giri\u015f noktas\u0131na sahiptir. Bu giri\u015f noktas\u0131, uygulaman\u0131n kabu\u011funu (shell) ve ilk g\u00f6r\u00fcn\u00fcm\u00fc y\u00fckler.<\/p>\n
config\/routes.js<\/code> dosyas\u0131n\u0131 a\u00e7\u0131n ve basit bir ana sayfa rotas\u0131 tan\u0131mlay\u0131n:<\/p>\n
\r\n\/\/ config\/routes.js\r\nmodule.exports.routes = {\r\n  '\/': {\r\n    view: 'pages\/homepage' \/\/ Bu, views\/pages\/homepage.dust dosyas\u0131n\u0131 \u00e7a\u011f\u0131racak\r\n  },\r\n\r\n  \/\/ API rotalar\u0131n\u0131z buraya gelecek\r\n  'GET \/api\/products': 'ProductController.find',\r\n  'POST \/api\/products': 'ProductController.create'\r\n};\r\n<\/code><\/pre>\n
\u015eimdi views\/pages\/<\/code> dizini alt\u0131nda homepage.dust<\/code> ad\u0131nda bir dosya olu\u015ftural\u0131m:<\/p>\n
\r\n\r\n
\r\n  
Ho\u015f Geldiniz!<\/h1>\r\n  
Bu sizin Tek Sayfa Uygulaman\u0131z\u0131n ana sayfas\u0131d\u0131r.<\/p>\r\n  \r\n<\/div>\r\n\r\n\r\n