Photo by Chris Barbalis on Unsplash

REACT UI MECHANICS

React Uygulamanızın Ortamlar (Dev, Production, vb…) İçin Farklılaştırılması

React uygulamanızı oluşturdunuz ve bunun farklı ortamlarda farklı özelliklerde olmasını istiyorsunuz veya farklı ortamlar için farklı API endpointlerini kullanmasını istiyorsunuz. Bu durumlarda ne yapıyoruz.

Uygulamanızın farklı ortamlarda farklı şekilde davranması gerekir. Aşağıda

• Dev: Geliştirme yaptığımız local ortama.
• Testing: Geliştirdiğimiz modüllerin yüklendiği ve tüm uygulamayı E2E test verileri ile test edebildiğimiz ortam.
• Staging: Canlıya çok yakın özelliklere sahip ortama verilen isim. Canlıya çıkmadan önce bu ortamda testler yapılır ki olası problemlerin daha önceden önüne geçilebilsin.
• Prod: Ürünün müşteriye sunulduğu canlı ortam.

İhtiyaçlarınız doğrultusunda ortamlarınızı arttırıp, azaltabilirsiniz. Peki bu ortam farklılıkları ne tarz farklılıklar getiriyor ?

• Dev ve Testing ortamında Debugging yeneteğinizin olması önemli bir avantaj bundan dolayı build sırasında JS, TS ile ilgili Source Map dosyalarının build içerisinde gitmesi gerekir. Ama bunu Staging ve Prod yapmak istemeyiz. Hem kaynak kodun görüntülenmesi yazdığınız bir takım önemli algoritmaların dışarıya açılıp kolayca kopyalanabilmesine neden olur, hemde güvenlik açığına neden olabilir.
• Her bir uygulama ortamında kullandığınız Endpoint adreslerinin farklı olması gerekir. BackendAPI, Veritabanı, Auth API, Payment API, Mail ve Notification API’ler ortamlar göre farklılıklar gösterir. Bu farklılıklara göre kullanılacak ClientId ve SecretKey ler birbirinden farklılıklar içerecektir.
• Dev ortamında WebDev Server ihtiyaç duyulur. Diğerlerinde ise zaten hazır bir Web Sunucu olduğu için veya CDN üzerine deploy için bir takım CI/CD kısımlarına özel farklılık ihtiyaçları olabilir.
• Son olarak E2E (End to End Testing) veya diğer testlerin koşacağı ortamlar genelde Testing ve Staging ortamları olacaktır. Buna göre uygulamanızın bazı configurasyonlara göre değişmesi gerekebilir.

Uygulamamızı Farklı Ortamlara Göre Nasıl Farklılaştırırız ?

Bu konuda örnek bir uygulama geliştirdim. Onun üzerinden konuyu anlatmaya çalışacağım.

create-react-app ile uygulama oluşturduğumuzda (detay) Package json içerisinde aşağıdaki dosyalar oluşur,

"scripts": {
  "start": "react-scripts start", 
  "build": "react-scripts build", 
}

Bu scriptler çalıştırıldığında NODE_ENV belli değerleri default olarak atanır.. Bu değerlerde aşağıdaki gibidir.

(start)
process.env.NODE_ENV --> development
(build)
process.env.NODE_ENV --> production

Ama bizim hem daha fazla ortama ihtiyacımız var, hemde React build edildikten sonra farklı bir ENV bilgisine ihityaç duyarız.

Create React App içerisinde Adding Custom Environment Variables dokümanında bu konuda detay bilgiye ulabilirsiniz. Özetle siz REACT_APP_ uzantılı değişkenleri

package.json içerisindeki Scripting içerisinden tanımlayabilir.

Deploy ettiğiniz ortamlar Vercel veya Netlify Env Variables kısmından tanımlayabilirsiniz.

Netlify Env Variables

Kullanacağınız yerde yapmanız gereken dışarıdan verdiğiniz bu değişkenleri kullanmak.

console.log(process.env.REACT_APP_ENV)

Environment Değişkenleriniz Çok Fazla Olduğu Durumda

Environment değerleriniz bazen düşündüğünüzden çok daha fazla olabilir. Bu durumda Config File veya Env File bu değişkenlerinizi yönetebilirsiniz. Bu sayede sadece değişken üzerinden ilgili Config ve Env dosyasını yükletmeniz yeterli olacaktır.

Config Dosyaları İle Değişkenleri Kullanma

Config altında config dosyalarını ve bu dosyaların içerisinde değişkenlerini tanımlarız.

package.json içerisinde React Scripts çalıştırırken farklılaştıran parametreler verilir. Veya ilgili platform üzerinden bunlar Env Variable olarak tanımlanır.

"start":      REACT_APP_ENV=dev react-scripts start
"build:test": REACT_APP_ENV=testing react-scripts build 
"build:stage":REACT_APP_ENV=staging react-scripts build
"build:prod": REACT_APP_ENV=prod react-scripts build

React uygulaması ilk yüklenirken config dosyasını React src folder altından aşağıdaki kod ile yükleterek uygulamanın açılması sağlanır.

export const CONFIG = require('config/config-' + process.env.REACT_APP_ENV + '.json');

Artık elimizde dosyanın yüklenmiş hali CONFIG objesi olarak elimizde,

CONFIG.AUTH vb... 
CONFIG.BILLING vb.. 

uygulamanın istediğimiz noktasında bu CONFIG değişkenlerini kullanarak uygulamamızı geliştirebiliriz.

.Env Dosyaları İle Değişkenleri Kullanma

Veya .env, .env.development vb… environment dosyalarında istediğiniz değişkenleri kullanabilirsiniz.

Yukarıdaki resimde olduğu gibi .env dosyalarını tanımlayın. Daha sonra bu

• .env.development
• .env.testing
• .env.production
• .env.staging

NPM de bulun env-cmd paketini kullanarak package.json içerisinde aşağıdaki gibi parametreler verip bunların uygulama çalışılırken yüklenmesini sağlayabilirsiniz.

"scripts": {
 “build:staging”: “env-cmd -f .env.staging react-scripts build”
 “build:prod”:“env-cmd -f .env.prod react-scripts build”

Daha sonrasında yapmanız gereken env parametre olarak gelen değişkenleri direk uygulama içerisinde kullanmanız.

{process.env.REACT_APP_BAR}

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.