Remix.js | Zero to Hero - Part-1

Remix.js’e sıfırdan başlayarak, adım adım nasıl bir uygulama geliştirebileceğimizi tecrübe edeceğimiz bir sürece hoş geldiniz. Bu süreçte ilk olarak projemiz için gerekli hazırlıkları yapacağız. Hazırsanız başlayalım!

Herkese merhabalar arkadaşlar. Remix.js’in iyiden iyiye popülerliğini arttırmaya başladığı şu dönemlerde, İkinci bir Remix.js yazısı daha yazmayı gerekli gördüm. Bir önceki yazımda; Neden Remix.js kullanılmalı ve Remix.js nasıl kurulur, ne gibi avantajlar sağla bunlardan bahsetmiştim. Bu yazımda ise, önceki yazıma ek olarak Remix.js ile gelişmiş bir proje nasıl yapılır bunu anlatmaya çalışacağım. Ekstra olarak Remix.js hakkında daha farklı bilgilere de bu yazıdan ulaşabilirsiniz.

Demo, Proje Kaynak Kodları & Kullanılan Teknolojiler

Proje sonunda nasıl bir çalışma ortaya çıkacağını merak eden arkadaşlar için hemen proje demosunu inceleyebilmeleri için buraya bir link bırakıyorum. Ayrıca projenin kaynak kodları için buraya tıklayabilirsiniz.

Projede kullanılan teknolojiler;

• Typescript
• TailwindCSS
• TMDB API
• Remix.js

Uygulama sonrası ortaya çıkan ana sayfa ekranımız.

Ayrıca proje gereksinimleri hakkında: Cihazınızda Node.js sürümü 14 ve daha üzeri ayrıca npm’in sürümü ise 7 veya daha üstü seviyede olmalıdır. Bu konuda hallettiğimize göre artık projemize başlayabiliriz.

Remix.js Kurulumu

Eğer ilgili Node.js ve Npm sürümlerinizde sorun yoksa, Remix.js için ekstra bir kurulum yapmanıza ihtiyaç yok. Doğrudan tüm gerekenleri terminal işlemleri sırasında yapabilmekteyiz. Proje kurulumu için aşağıdaki komutu kullanabilirsiniz:

npx create-remix proje-ismi 
| Proje ismini istediğiniz gibi seçebilirsiniz. Ben yazımda proje ismi olarak movie-app-with-remix-js'i kullanacağım.

Bu işlemden sonra karşımıza aşağıdaki gibi bir ekran gelecek. Gelen bu ekrana y diyerek ilerliyoruz. (Bu işlem Remix.js’in bağımlılıklarını kurmayı sağlıyor. Bu işlem internet hızınıza göre bir kaç dakika sürebilir.)

Bu işlemin ardından karşımıza; Uygulamayı ne için kullanacağımız soruluyor. İlk seçeneği seçiyoruz ve devam ediyoruz. (Bu seçenek bize alıştırma yapabilmemiz için boş bir şablon sunuyor. İkinci seçenek ise ürün olarak piyasaya çıkmaya hazır bir altyapı sunan bir yapı oluşturuyor. Bunu nasıl yaptığı başka bir yazı konusu olarak yazabilirim.)

Bu alandan ilk seçeneği seçiyoruz.

Bu işlemden sonra da uygulamayı nereye deploy(hangi web servisine yükleyeceğimizi) edeceğimizi seçiyoruz. (Ben uygulamalarımı Vercel’e deploy ettiğim için Vercel’i seçiyorum. Hangisi size uygun ise siz onu seçebilirsiniz.)

Bu alanda projemizi deploy edeceğimiz sunucuyu seçiyoruz.

Bu işlemden sonra ise projede; Typescript mi yoksa Javascript mi kullanılacağını seçiyoruz. (Typescript sevdalısı birisi olarak ben, Typescript’i seçiyorum.) Ardından npm install yada yarn komutunu çalıştırmak için Y tuşuna basıyoruz ve projenin bağımlılıklarını kurması sağlıyoruz (Herhangi bir hata durumunda klasörün içerisine girerek tekrar npm instal veya yarn komutlarını çalıştırabilirsiniz). Bu işlem internet hızımıza göre bir kaç dakika sürebilir. Ardından kod editörümüzü açıp projemize genel hatlarıyla bakabiliriz.

Remix.js klasör yapısı

Remix.js’de çoğu işlem app klasörünün altında gerçekleştirme. React.js kullanan arkadaşlar src ismindeki klasörü hatırlarlar. Burada da benzer bir yapı var. Next.js’in aksine buradaki yapı daha yalın diyebilirim. Burada React.js’den hatırladığımız index.ts dosyasında projemizi React-Dom ile çalıştırmasını sağlıyorduk. Bu işlemin SSR kullanılmış halindeki şekli, entry.client.tsx dosyasında yapılmakta. Yine app klasörümüzde bulunan root.tsx ise React.js’den tanıdığımız public klasöründe bulunan özelliklerin ve React.js’de oluşturduğumuz App.tsx dosyasının bir birleşimi diyebilirim (nispeten çok daha iyi olmuş). Yine app klasöründe bulunan routes klasörü ise rotalarımızı(doğrudan sayfalarımız diyemeyiz zira Remix.js ekibi de pages yerine routes diyerek bunu ifade etmişler. Çünkü nested routes yapısını iç içe kullanabilmekteyiz ki bana göre Remix.js’in en iyi yanlarından birisi). Projede bulunan diğer alanları ise ihtiyacımız oldukça anlatacağım.

Genel olarak Remix.js’i tanıttığıma göre harici olarak ekleyeceğimiz paketlerin kurulumuna geçebiliriz. Aşağıdaki komut tüm bu kullanacağımız paketleri kurmanızı sağlayacaktır.

| yarn ile
yarn add axios react-icons react-modal react-responsive-carousel react-youtube slugify tailwind-scrollbar tiny-invariant vanilla-tilt concurrently tailwindcss postcss autoprefixer
| npm ile
npm i axios react-icons react-modal react-responsive-carousel react-youtube slugify tailwind-scrollbar tiny-invariant vanilla-tilt concurrently tailwindcss postcss autoprefixer
# Ben yarn kullandığım için yarn ile kurulum yapacağım. Siz hangi yöntemi kullanmak istiyorsanız onu seçin.

Kullandığımız paketler hakkında;

• axios : Projedeki asenkron istek işlemlerimi sağlayacak hızlı, hafif ve bu alanda oldukça ünlü bir paket.
• react-icons : Projemizde kullanacağımız iconlar için gerekli olan bir paket.
• react-modal : Projemizde pop-up kullananmak için gerekli olan paket.
• react-responsive-carousel : Projede responsive şekilde kullanacağımız slider.
• react-youtube : İlgili youtube videosunu çekmeye yarayan paket.
• slugify : Rotalarımızı SEO’ya uygun olarak yazmamızı sağlayacak. Seflink yapısı.
• tailwind-scrolbar : Projemizdeki kaydırma çubuğu istediğimiz şekilde düzenleyebileceğimiz bir paket.
• vanilla-tilt : Projemizde bulunan film objeleri üzerinde hover işlemlerini güzelleştirmeyi sağladığımız paket.
• concurrently : Konsol kodlarımızı eş zamanlı olarak birden fazla şekilde çalıştırmamızı sağlayan komut.
• tailwindcss : Tailwind CSS’i kullanmamızı sağlayan paket.

TailwindCSS’in projeye eklenmesi

Kullanacağımız paketleri tanıttıktan sonra sıra TailwindCSS’i projemize dahil etmeye geldi. Zaten TailwindCSS’e ait bağımlılıkları yüklemiştik. Ekstra olarak bir kaç komut ile TailwindCSS’i projemize dahil edebiliriz.

npx tailwindcss init 
| Bu komut ile tailwind.config.js dosyasını oluşturuyoruz.

Ardından tailwind.config.js dosyasının içerisine gelerek aşağıdaki kuralları ekliyoruz.

content: [
     "./app/**/*.{js,ts,jsx,tsx}",  
],

Bu işlemin ardından package.json dosyasına gelerek çalıştıracağımız komutları tailwindcss ile derleyerek çalıştırmamızı sağlayan yapıyı kuruyoruz.

"scripts": {     
  "build": "npm run build:css && remix build",
  "build:css": "tailwindcss -m -i ./styles/app.css -o app/styles/app.css",
   "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
  "dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css"   
}

Ardından ana dizine styles > app.css dosyasını oluşturuyoruz ve içine aşağıdaki komutları ekliyoruz. (Doğrudan ana dizine. App klasörünün içerisine değil!)

@tailwind base;
@tailwind components;
@tailwind utilities;

Bu işlemin ardından bir de app > styles > app.css dosyası da app klasörünün içerisine açıyoruz (Bir önceki adım ile bu adım farklı dosyalar oluşturduk.). Ardından app > root.tsx dosyamıza gelerek aşağıdaki komutları uyguluyoruz.

import styles from '~/styles/app.css';
export function links() {
   return [{ rel: "stylesheet", href: styles }] 
}

Bu işlemlerin ardından aşağıdaki komutu kullanarak projemizi derliyoruz.

yarn dev
| Projenin derlenmesini sağlar
npm run dev
| Projenin derlenmesini sağlar

Dosya ve Klasör Yapılarının Oluşturulması

Bir uygulamada bulunan en önemli yapılardan biri de file-structure yani dosya yapısıdır. Dosya yapısının okunabilirliği ve istenilen bir dosyayı hızlıca bulmak için dosya yapısı son derece önemlidir. Remix.js için henüz kesin olarak belirtilmiş resmi bir dosya yapısı yok. Resmi olmayan ancak global olarak kullanılan bir çok yapı mevcut. Ben de daha önceki deneyimlerime göre ve birazda yaptığımız projelere göre dosya ve dizin işlemleri yapmaktayım. Dosya yapısı hakkında aşağıda bir ağaç yapısı oluşturarak gerekenleri yazacağım.

movie-app/ 
 |- app/
     |- assets
     |- components/
        |- layout/
        |- movies/
        |- sections/
        |- shared/
        |- index.ts
     |- helpers
     |- routes
        |- categories/
        |- movie/
        |- search/
        |- index.tsx
     |- services/
     |- styles/
     |- types/
 |- public/

Dosyalama sistemimiz hakkında;

• assets: Projede kullanacağımız çeşitli dosyaları(resim, metin, video vb...) içeren klasördür.
• components: Projede tekrar tekrar kullanabileceğimiz, tasarım şablonlarımızı ayarladığımız klasördür.
• helpers: Projede harici olarak ihtiyaç duyabileceğimiz çeşitli fonksiyonları(mail doğrulaması, seflink fonksiyonları vb..) ve dosyaları(json dosyaları gibi) içeren klasördür.
• routes: Projede kullanacağımız rotaları, yönetebileceğimiz klasördür.(Varsayılan olarak bu ismi Remix.js vermiştir.)
• services: Projede kullanacağımız servislerin(HTTP İstekleri gibi) yönetildiği klasördür.
• styles: CSS(Stillendirme) dosyalarımızı içeren klasördür.
• types: Typescript kullandığımız için, bazı objelerin türünü belirlememiz gerekmekte, bunun için kullanacağımız klasördür.
• public: Build işlemin çıktısı, favicon dosyası gibi dosyaları içeren klasördür. (Varsayılan olarak bu ismi Remix.js vermiştir.)

Remix.js ile geliştireceğimiz uygulamamıza giriş yaptığımız birinci bölümün sonuna geldik. En kısa sürede bölüm ikiyi de yazmaya çalışacağım. Bu bölümü özetleyecek olursak; Remix.js’in nasıl kurulacağını, projede kullanacağımız bağımlılıkların kurulmasını, TailwindCSS’in projeye dahil edilmesini, dosya ve klasör yapısının nasıl olacağı gibi bir çok konuyu hallettik. Sırada kodlama aşaması olan bölümümüz gelecek. Eğer herhangi bir sorun yaşadıysanız veya herhangi bir konuda geri bildirim yapmak isterseniz benimle iletişime geçebilirsiniz. Herkese iyi çalışmalar diliyorum ^^