Angular Projelerinde Birden Fazla Ortam Oluşturma: Adım Adım Kılavuz

Giriş

Angular projelerinde, varsayılan olarak gelen production ve local environment dışında ek ortam bilgileri eklemek, projenizin esnekliğini artırabilir. Bu yazıda, özellikle bir prod test ortamı oluşturma sürecini detaylı olarak inceleyeceğiz.

Neden Ek Ortamlar Gerekli?

Geliştirme sürecinde, local ve production ortamları dışında test veya staging gibi ara ortamlara ihtiyaç duyulabilir. Bu, uygulamanızı farklı konfigürasyonlarla test etmenize ve daha güvenli bir geliştirme süreci yürütmenize olanak tanır.

Adım 1: Yeni Environment Dosyası Oluşturma

İlk adım olarak, yeni bir environment dosyası oluşturacağız. Bu örnekte, environment.web.test.ts adında bir dosya kullanacağız.

export const environment = {  production: false,  API_BASE_PATH: 'http://10.0.2.2:8888/eticaret/' };

Adım 2: Angular Projesine Yeni Ortamı Tanıtma

Oluşturduğumuz yeni ortamı Angular projesine tanıtmak için angular.json dosyasında bazı değişiklikler yapmamız gerekiyor.

Configuration Bölümüne Ekleme

angular.json dosyasındaki configurations bölümüne aşağıdaki kodu ekleyin:

"web.test": {  "fileReplacements": [    {      "replace": "src/environments/environment.ts",      "with": "src/environments/environment.web.test.ts"    }  ] }

Serve Bölümüne Ekleme

Aynı dosyada, serve bölümüne de aşağıdaki kodu eklemelisiniz:

"web.test": {  "browserTarget": "app:build:web.test" }

Adım 3: Yeni Ortamı Kullanarak Projeyi Çalıştırma

Artık yeni ortamımızı kullanarak projemizi çalıştırabiliriz. Bunun için terminal veya komut istemcisinde aşağıdaki komutu kullanın:

ng serve --configuration web.test

Sonuç

Bu adımları takip ederek, Angular projenizde birden fazla ortam oluşturabilir ve yönetebilirsiniz. Bu yaklaşım, özellikle farklı API endpoint’leri veya konfigürasyonlar gerektiren projeler için oldukça faydalıdır.

Daha Fazla Bilgi

Bu ve benzeri yazıları Latest Software Developers adresinden diğer yazılarımızı okuyabilirsiniz.

Angular ortamları hakkında daha detaylı bilgi için Angular resmi dokümantasyonunu ziyaret edebilirsiniz.