Ubuntuda React Geliştirme Ortamı Hazırlama Kılavuzu
Uğur Emirmustafaoğlu /
13 dakika ⏲ • ––– okuma
Uzun zamandır Linux kullanan biri olarak Ubuntu'nun bana gayet iyi bir deneyim sunduğunu söyleyebilirim. React geliştirmek için Ubuntu'yu ana işletim sistemi olarak kullanan birçok geliştirici olduğunu biliyorum. Eğer sen de bu listede yerini almak ve bunu yaparken de kafa ağrıtan ufak detaylarla boğuşmak istemiyorsan bu kılavuz tam sana göre. Lafı çok uzatmadan kılavuzun içerdiği başlıkları paylaşmak istiyorum: 👇
- Terminal ayarları
- Urxvt terminal emulator
- Git ve Curl (!)
- ZSH kurulumu ve Oh My ZSH
- Fontlar
- Tarayıcı
- Brave Browser
- Eklentiler
- React Geliştirici Araçları
- VSCode
- Github SSH bağlantısı
- Eklentiler (!)
- Tema
- Font
- Node Kurulumu (!)
- Node Version Manager (NVM)
- Yarn
- API İstemcisi
- Insomnia
- Curl (!)
- Tasarım Araçları ve Fotoğraf Düzenleme
- Figma (!)
- Gimp
- Gthumb
- Ekstra Araçlar
- Password Manager - Keepassxc (!)
- App launcher - Rofi (!)
- Emoji tool - Rofi
Gayet uzun bir liste gibi göründüğünün farkıdayım fakat tüm adımları takip etmeniz gerekmiyor. Listede önemli olduğunu gördüğüm basamakları ünlem işareti (!) ile işaretledim. Bunun yanında tüm adımları elimden geldiğince detaylı bir biçimde açıklamaya çalıştım. Yarım saatte hazır bir sisteminiz olacak. ⌚ 🙏
Bu kılavuzu takip etmek için Linux uzmanı olmanıza gerek yok. Tek ihtiyacınız olan şey Ubuntu yüklü bir sistem. Elbette Ubuntu veya Debian tabanlı diğer distroları (Mint, PopOS vs.) da kullanmanız mümkün.
İnternette Ubuntu sisteminin nasıl kurulacağına dair tonlarca içerik olduğu için bu adımı atlamanın daha uygun olacağını düşündüm. Eğer bu konuda da bir kılavuz isterseniz lütfen bana haber verin.
Her şeyden önce en temel ihtiyacımız olan (sudan bahsetmiyorum tabiki de) terminalden başlamamız gerek.
Grafik arayüze sahip uygulamalar (GUI Applications) genellikle kullanımı daha kolay olsalar ve havalı görünseler de terminal(uçbirim/konsol/komut satırı) bizlere birçok işlemi daha etkili, hızlı ve esnek bir biçimde gerçekleştirebilme imkanı sağlamakta. Biz yazılımcılar için iyi ayarlanmış bir terminal daha verimli bir çalışma ortamı sağlamakta.
Piyasada birçok terminal emülatörü bulunmakla beraber rxvt-unicode ya da Urxvt hem hafifliği hem de sunmuş olduğu ayarlama olanakları sebebiyle benim favorim.
Ubuntu'da yeni bir uygulama kurmak için en iyi yöntem default olarak kurulu gelen gnome terminali kullanmak.
Gnome terminali açmak için
ctrl+
alt+
Ttuş kombinasyonunu kullanabilirsiniz.
Yeni terminal uygulamamızı kurmak için terminalde şu kodu çalıştırabilirisiniz: 👇
sudo apt install rxvt-unicode
Yeni kurulan terminal uygulamanızı kullanmak için ister menüyü kullanabilir isterseniz de terminalde
urxvt yazarak uygulamayı başlatabilirsiniz. İlk başta beyaz ve çirkin bir terminalle karşılaşırsanız şaşırmayın. Sonunda şuna benzer bir görünüme kavuşacaksınız.
Urxvt terminalizin temasını değiştirmek istiyorsanız yapacağınız tek home klasörünüzde bulunan .Xresources dosyasında değişiklik yapmak. Örneğin terminalin fontlarını değiştirmek isterseniz şu satır ile bunu yapabilirsiniz (tabiki ilgili fontun sisteminizde yüklü olması gerek): 👇
urxvt*font: xft:Source Code Pro Black:style=Regular:size=14
Pro Tip
.Xresources dosyasına yapmış olduğunuz değişikliklerin geçerlilik kazanması için `xrdb -merge ~/.Xresources` kodunu çalıştırmanız gerekmektedir.
.Xresources dosyası da dahil olmak üzere bu kılavuzda kuracağımız tüm uygulamalara ve daha fazlasına ait konfigürasyon dosyalarının yer aldığı repoyu burada bulabilirsiniz.
Pro Tip
Ben konfigurasyon dosyalarımı(dotfiles) organize etmek için 'stow' adında bir uygulama kullanıyorum. Daha sonrasında 'stow' üzerine ayrı bir blog yazısı yayımlayacağım ancak şu an için ilgili dosyaları manuel olarak gerekli yerlere kopyalayabilirsiniz.
Urxvt ile ilgili konuşacak daha çok mesele olsa da kılavuzun çok uzamaması için burada kendi konfigurasyon dosyamı paylaşmakla yetiniyorum.
Git biz yazılımcılar için bir vazgeçilmez ve sen de bunu biliyorsun. Eğer hala kurmadıysan seni şöyle alalım: 👇
sudo apt install git
Curl basit ama etkili bir terminal uygulaması. Birçok amaç için kullanılabilmekle beraber uzaktaki paketlerin indirilmesi ve API aramaları yapmak asıl görevi denilebilir. Büyük ihtimalle bu araca birçok kez ihtiyaç duyacaksın: 👇
sudo apt install curl
ZSH Unix temelli sistemlerde sıklıkla tercih edilen güçlü bir terminal kabuğu. Sunmuş olduğu birçok eklenti, tema ve araçlarla terminal deneyimini zenginleştirmeyi amaçlayan ZSH'in, kısa bir denemeden sonra vazgeçilmez araçlarınız arasında yer alacağına eminim.
sudo apt install zsh
ZSH'i kurduktan sonra yapacağımız ilk şey varsayılan uçbirim kabuğunu ZSH olarak değiştirmek:
chsh -s $(which zsh)
ZSH'i kullanmak için yeniden oturum açmamız gerekiyor. Oturum açtıktan sonra terminalinizi açın. ZSH size konfigürasyon ayarlarınızı seçmek için birkaç seçenek sunacaktır. Bu adımı
q ile atlayın, çünkü biz kendi
.zshrc dosyamızı kullanacağız.
ZSH'in başarılı bir şekilde kurulup kurulmadığını anlamak için
$SHELL --version komutunu çalıştırabilirsiniz.
Süper güçleriniz olsun ister misiniz? Oh-My-Zsh size ihtiyacınız olan süper güçleri verecek bir eklenti. Şu komutu çalıştırdıktan sonra her şey hazır: 👇
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
Şimdi sıra ZSH eklentilerinde...
Bu eklenti sayesinde terminaliniz history dosyasından daha önce girmiş olduğunuz komutları hatırlayarak size önerilerde bulunacak. Evet, her seferinde
npx create-react-app myapp yazmaktan kurtulacaksınız! 🥳
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
Değişiklikleri görmek için biraz daha sabırlı ol ve adımlarımı takip et! 👣
Adından da anlaşılacağı üzere terminalinize kod dizimine göre renk katacak bir eklenti.
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
Evet sıra .zshrc konfigürasyon dosyamızı
home klasörüne yerleştirmekte.
.zshrc terminal kabuğunu kişiselleştirmek için kullandığımız ana konfigürasyon dosyası. Şimdilik benimkiyi kopyalayabilir ve üzerinde değişiklikler yapabilirsin! Tam olarak şuraya koymalısın: 👉
/home/<yaralı_baykuş_1992>/.zshrc 😝
Terminali yeniden açtığında değişiklikleri görmen lazım. Eğer bir sıkıntı yaşarsan bana twitter üzerinden ulaşabilirsin!
Ubuntu'da font(yazı sitili) dosyalarını şu konumda saklayabilirsin: 👉
/home/<kulanıcı_adın>/.fonts
Ben hem terminalde hem de VSCode'da Source Code Pro fontunu kullanmayı tercih ediyorum. Kullanmış olduğum tüm font dosyalarını buradan ya da Google Fontlardan edinebilirsin. Dosyaları indirdikten sonra
~/.fonts klasörüne koymayı unutma.
Pro Tip
~ simgesi '/home/<kullanıcı_adı>' konumuna denk gelmektedir.
Bizler web geliştiriciler olarak farklı tarayıcılar arasındaki uyumluluk sorunları ile ilgilenmek durumundayız fakat şu da bir gerçek ki herkesin kendine ait favori bir web tarayıcısı var. Benimki ise Brave Browser.
Şuna bakın 👇
Eğer siz de ikna olduysanız kurulumla devam edelim!
Ubuntu sistemimize Brave'i kurmak için resmi web sitesindeki kurulum adımlarını takip edeceğiz. Aşağıdaki komutları birbiri ardına çalıştırarak kurulumu tamamlayabilirsiniz!
sudo apt install apt-transport-https curl sudo curl -fsSLo /usr/share/keyrings/brave-browser-archive-keyring.gpg https://brave-browser-apt-release.s3.brave.com/brave-browser-archive-keyring.gpg echo "deb [signed-by=/usr/share/keyrings/brave-browser-archive-keyring.gpg arch=amd64] https://brave-browser-apt-release.s3.brave.com/ stable main"|sudo tee /etc/apt/sources.list.d/brave-browser-release.list sudo apt update sudo apt install brave-browser
Brave Browser bazı varsayılan ayarları sebebiyle üçüncü parti scriptleri ve çerezleri engellemekte. Bu da geliştirme aşamasında bazı CORS hatalarına sebep olmakta. Bu ayarları şu menüden değiştirebilirsiniz:
settings > shields > cookies.
Brave Browser Chrome'un kullanmış olduğu chromium engine ile çalıştığı için Chrome eklentilerini kolaylıkla kullanabilirsiniz. Benim sıklıkla kullandığım ve sizlerinde kullandığını düşündüğüm bazı eklentileri aşağıdaki bağlantılardan kurabilirsiniz.
VSCode birçok web geliştiricinin kullandığı, Microsoft tarafından geliştirilmiş ve desteklenmeye devam edilen açık kaynak kodlu bir metin düzenleyici olarak karşımıza çıkmakta. Açık kaynak kodlu olması ve epeyce bir kişiselleştirme imkanı sunması sebebiyle birçok React geliştiricisinin de vazgeçilmezi.
Biz de bugün VSCode'u Ubuntu sistemimize kuracağız. Kurmakla kalmayıp gözlerimize huzur verecek olan gruvbox temasını ve iconları ekleyecek, ardından da verimliliğimizi katlayacak eklentilerle kurulumumuzu üst noktaya taşıyacağız.
Piyasada topluluk destekli birkaç VSCode sürümü olmakla beraber biz Microsoft'un sürümünü kullanacağız. Kurulum için sitelerindeki kılavuzu kullanacağız.
Buraya tıklayarak VSCode'u indirebilirsiniz. İndirme işlemi tamamlandıktan sonra terminalinizi dosyanın bulunduğu konumda açarak şu kodu çalıştırabilirsiniz. Böylece VSCode sisteminize kurulmuş olacak. 👇
sudo apt install ./<downloaded-file-name>.deb
Kurulumun ardından terminalde
code yazarak VSCode uygulamanızı çalıştırabilirsiniz! 🥳
Kod yazarken tekrar eden eylemler bir süre sonra can sıkıcı bir hal almaya başlayabiliyor. Bu yüzden hem verimliliğimi artırmak hem de zaman kazanmak için bazı eklentiler ile VSCode çalışma ortamımı zenginleştiriyorum. Şimdi bunlara göz atalım ve ardından kolayca sistemimize kuralım.
VSCode'da eklenti kurmak için
ctrl+
pkombinasyonu ile komut panelini açıyoruz. Ardından da birazdan aşağıda sıralayacağım kodları her bir eklenti için yapıştırıp çalıştırıyoruz.
- VS Code ES7 React/Redux/React-Native/JS snippets
Bu bir vazgeçilmez! Hızlı bir şekilde React componenti iskeletini oluşturmana yarayan bu eklenti Redux ve Graphql için de kullanılabilir.
ext install dsznajder.es7-react-js-snippets
- React Hooks Snippets
React Hook yapıları için kod parçacıkları. Kolaylıkla useState, useEffect ve birçok diğer hook yapısı!
ext install AlDuncanson.react-hooks-snippet
- Prettier Formatter for Visual Studio Code
Prettier kodunuzun daha okunabilir görünmesi için geliştirilmiş bir eklenti. Kodunuzu her kaydettiğinizde boşluklar, noktalı virgüller, girintiler vs. kendiliğinden düzenlensin.
ext install esbenp.prettier-vscode
- GraphQL for VSCode
GraphQL için söz dizimi renklendirme, linting, auto-complete ve daha fazlası!
ext install kumar-harsh.graphql-for-vscode
Uzun saatler ekrana bakmanın gözlerimiz üzerindeki etkisini hepimiz biliyoruz. Uzun ekran süresinin gözümüz üzerindeki olumsuz etkisini azaltmak için doğru tema seçimi gerçekten önemli. Hem görsellik hem de göz sağlığı açısından ben Gruvbox renk paletini tercih ediyorum.
VSCode marketinde birçok Gruvbox teması var fakat ben jdinhlife'ın geliştirmiş olduğu bu temayı kullanıyorum. Kurmak için
ctrl +
p kombinasyonu ile paneli açalım ve ardından aşağıdaki kodu yapıştıralım.
ext install jdinhlife.gruvbox
Temayı kurduğumuza göre artık etkinleştirebiliriz. Tema tercih menüsüne önce
ctrl +
k ardından
ctrl +
t kısayolu ile ulaşabiliriz.
ext install JonathanHarty.gruvbox-material-icon-theme
Hepimiz favori bir font tercihi var. VSCode'da bu fontu kullanmak istediğinizde yapmanız gereken ise çok basit:
- Fontu sisteminize kurun
- VSCode
settings.jsondosyasından font tercihinizi yeni kurmuş olduğunuz font ile değiştirin.
Piyasada binlerce font bulunmakta fakat bugün ben kendi favori fontum olan Source Code Pro'yu kuracağız. Bu fontu Google Fonts. sayfasında bulabilirsiniz fakat ben size fontu indirmek için gerekli komutu buraya bırakıyorum: 👇
curl https://fonts.google.com/download\?family\=Source%20Code%20Pro --output font.zip
Dikkat ettiyseniz uzaktaki dosyayı indirmek için curl aracını kullandık. İnen dosyanın adını belirtmek için ise --output flag'ini kullandık.
Dosya indikten sonra yapmamız gereken font dosyalarını zip arşivinden çıkarıp doğru konuma yerleştirmek. O doğru konum ise: 👉
/home/<kullanıcı adın>/.fonts
Eğer ev klasöründe
.fontsklasörü yoksa yaratmayı unutma: 👉
mkdir ~/.fonts
Her şey doğru gittiyse Source Code Pro fontu sistemine kurulmuş olmalı. Değişiklilerin geçerli olması için bazen oturum kapatıp açmak gerekebiliyor.
VSCode'daki kişisel ayarlarının tutulduğu dosya
settings.json dosyasıdır. Bu dosyaya ulaşmak için:
- Komut panelini aç:
ctrl+
shift+
p
- 'open settings' yaz
- Sıralanan seçeneklerden Open Settings (JSON) seçeneğine tıkla.
Bu dosyada font ayarlarını değiştirmek çok kolay, sadece fontun tam adını girmeyi unutma. Aşağıdaki ayarlar hem entegre terminalin hem de VSCode editörünün font ayarlarını değiştirecek: 👇
"editor.fontFamily": "'Source Code Pro Semibold','monospace'", "terminal.integrated.fontFamily": "Source Code Pro Semibold"
Node.js ve npm Javascript geliştiricilerinin vazgeçilmez araçları arasında ilk sıralarda yer almaktadır. Büyük bir ihtimalle projelerinin neredeyse tamamında ihtiyaç duyacağın bu Node.js ve npm'i Ubuntu sistemimize nasıl kuracağımıza bakalım.
Bazı durumlarda farklı projeler farklı Node versiyonu ile çalışabilmekte. Bu da farklı Node ve npm versiyonlarını sistemimize kurmamızı ve aktif olan Node ve npm versiyonunu değiştirmemizi gerektirmekte. Tam da bu işleri yapacak bir araç olan nvm bizi tüm bu dertlerden kurtarıyor. nvm kurulumu ve nvm ile farklı node-npm versiyonlarının nasıl kurulduğunu anlatmış olduğum bu makaleye göz atabilirsiniz. Detaylı anlatımı bu makalede yaptığım için sonraki adıma geçiyorum.
Eminim ki yarn mı npm mi tartışmasına bir yerlerde denk gelmişsinizdir. O yüzden bu tartışmaya hiç girmeyerek benim tercihim olan yarn kurulumu için gerekli kodu bırakıp kaçıyorum.
npm install --global yarn
Kurulumu kontrol etmek için
yarn --version kodunu çalıştırabilirsiniz.
API'lar React geliştirme sürecinin ayrılmaz bir parçası. Çoğu zaman API'daki veriyi görüntülemek için
console.log yardımımıza yetişse de sırf API sorgusu yapmak için geliştirilmiş birçok araç var.
Ben Insomnia adındaki aracı tercih etmekle beraber ufak sorgular için terminal üzerinde çalışan Curl aracını da arada sırada kullanıyorum.
Insomnia'yı bu adresten indirebilirsiniz. İlgili bağlantıdan bir .deb dosyası inecektir. İndirilen dosyanın bulunduğu konuma gittikten sonra aşağıdaki kodu çalıştırarak kurulumu gerçekleştirebilirsiniz:👇
sudo dpkg -i <name-of-the-file.deb>
Daha önceki adımlarda kurmuştuk fakat eğer atladıysanız curl kurulumu şu kodu çalıştırmak kadar basit:👇
sudo apt install curl
Evet, tasarım bambaşka bir disiplin ve uzmanlık alanı. Bunu kabul ediyoruz fakat her zaman tasarım ekibi ile çalışmak mümkün olmayabiliyor. Bu yüzden temel düzeyde tasarım için birkaç aracı kullanmayı öğrenmekte fayda var. Bu araçların başında kolay öğrenimi ve işlevselliği ile Figma geliyor.
Figma'yı öğrenmek kolay olduğu gibi kurulumu da bir o kadar basit. Figma'yı snap mağazası aracılığıyla kuracağız.
sudo snap install figma-linux
Bildiğiniz üzere Adobe Photoshop'u Linux üzerinde makul yollardan kullanmak pek mümkün değil. Şahsi kanaatim buna gerek de yok çünkü GIMP, Photoshop'un yaptığı her şeyi yapabiliyor. Eğer Photoshop'tan geliyorsanız alışması ve öğrenmesi biraz zaman alabilir.
sudo apt install gimp
Gthumb ile fotoğraflarınızı görüntüleyebilir ve kırpma, filtre ekleme, döndürme gibi küçük düzenlemeler yapabilirsiniz. Bu tarz işlemleri hızlıca yapmanızı sağlayacak Gthumb'ı kurmak için:👇
sudo apt install gthumb
Bu kısımda benim zevkle kullandığım ve işlerimi kolaylaştıran bazı araçlardan bahsedeceğim.
Bugünlerde şifrelerinizi akılda tutmak neredeyse imkansız, eğer tüm siteler için aynı şifreyi kullanmıyorsanız. Böyle bir tercihte bulunmak da ciddi bir güvenlik açığı oluşturuyor çünkü eğer üye olduğunuz sitelerden bir tanesi dahi güvenlik açığı verse şifreniz kötü ellere geçmiş oluyor.
Binlerce kişinin şifresinin saklandığı tek bir hedefte şifrelerimi saklamayı tercih etmiyorum. LastPass bu tarz bir hizmet sunuyor. Ben Keepassxc gibi kendi şifrelerimin olduğu dosyayı kendimin saklayabileceği bir çözümü tercih ediyorum. Şifrelerimi kaydettikten sonra veritabanı dosyasını güvenli bir yere kaydediyorum ve her şey bu kadar. Eğer farklı cihazlarım arasında bu dosyayı senkronize etmek istersem Dropbox veya NextCloud gibi çözümlere yöneliyorum.
Keepassxc kurulumu için şu kodu çalıştırabilirsiniz: 👇
sudo apt install keepassxc
Rofi tam bir İsviçre çakısı. Elinden her şey geliyor. Ama temelde uygulama başlatmak ve pencere geçişleri için tercih ediliyor. Ben de genelde uygulamalarımı başlatmak için ve emojilerim için kullanıyorum.
Şu şekilde kurabilirsiniz: 👇
sudo apt install rofi
Kurulum tamamlandıktan sonra uygulamayı
rofi -show drun şeklinde çalıştırabilirsiniz. Tabiki rofiyi başlatmak için her seferinde terminali açmak anlamsız olacaktır. O yüzden bu komuta bir kısayol atamanızı tavsiye ederim.
Yukarıda bahsettiğim gibi ben Rofi'yi emoji seçmek için kullanıyorum ve gerçekten çok seri bir şekilde istediğim emojiyi hafızaya kopyalayabiliyorum. Bunun için rofimoji adında bir araç kullanıyorum.
Rofimojiyi kurmak için pip lazım olacak. O yüzden bağımlılıklarıyla beraber kurulumu gerçekleştirelim.
sudo apt install python3-pip fonts-emojione python3 rofi xdotool xsel
Şimdi ise paketin kendisi...
sudo pip install rofimoji
Evet, şimdi hazır olmalı. Aşağıdaki kodu çalıştırarak rofimoji açabilir ve istediğin emojiyi arayabilir, enter tuşu ile hafızaya kopyalayabilirsin.
rofimoji -a copy
Bu tarz komutlara kısayol tuşu atamak verimliliğinizi ciddi anlamda artıracaktır.
Tebrikler! 🎉🎉
Ubuntu sistemini React geliştirmek üzere hazır hale getirmeyi başardın.
Umarım bu rehberi okurken yeni şeyler öğrenmiş ve aynı zamanda eğlenmişsindir.
Zaman ayırdığınız için ve geri dönüşleriniz için şimdiden teşekkürler. 🙏⏳💭