In the web application, we need different configurations as per different environments like as for development use localhost path and in production use dev server path, etc.
also, it's a very nice concept to add keys as per environments like google APIs, firebase API, server API paths, etc in different as per servers so if you made all separate files you don't need to do any changes at the time of
deployment.
here we will discuss how to make dev, prod, QA, and live environment files.
First of all we need to add/edit following files.
angular.json
package.json
/src/environments/environment.ts
/src/environments/environment.prod.ts
/src/environments/environment.qa.ts
/src/environments/environment.live.ts
environment.ts
export const environment = {
production: false,
baseUrl: "http://localhost",
brandUrl: "http://localhost/profile",
...
...
...
};
production: false,
baseUrl: "http://localhost",
brandUrl: "http://localhost/profile",
...
...
...
};
environment.prod.ts
export const environment = {
production: true,
baseUrl: "http://dev.mysite.com",
brandUrl: "http://dev.mysite.com/profile",
...
...
...
};
production: true,
baseUrl: "http://dev.mysite.com",
brandUrl: "http://dev.mysite.com/profile",
...
...
...
};
environment.qa.ts
export const environment = {
production: false,
baseUrl: "http://qa.mysite.com",
brandUrl: "http://qa.mysite.com/profile",
...
...
...
};
production: false,
baseUrl: "http://qa.mysite.com",
brandUrl: "http://qa.mysite.com/profile",
...
...
...
};
environment.live.ts
export const environment = {
production: false,
baseUrl: "http://mysite.com",
brandUrl: "http://mysite.com/profile",
...
...
...
};
production: false,
baseUrl: "http://mysite.com",
brandUrl: "http://mysite.com/profile",
...
...
...
};
package.json
{
"name": "moment-adapter",
"version": "1.3.2",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"start:qa": "ng serve -c=qa --port=4000",
"build:qa": "ng build -c=qa",
"start:live": "ng serve -c=live",
"build:live": "ng build -c=live"
},
"private": true,
"dependencies": {
"@agm/core": "1.0.0",
"@angular/animations": "8.2.14",
...
...
...
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.803.29",
"@angular/cli": "8.3.19",
"@angular/compiler-cli": "8.2.14",
...
...
...
},
...
...
...
}
"name": "moment-adapter",
"version": "1.3.2",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"start:qa": "ng serve -c=qa --port=4000",
"build:qa": "ng build -c=qa",
"start:live": "ng serve -c=live",
"build:live": "ng build -c=live"
},
"private": true,
"dependencies": {
"@agm/core": "1.0.0",
"@angular/animations": "8.2.14",
...
...
...
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.803.29",
"@angular/cli": "8.3.19",
"@angular/compiler-cli": "8.2.14",
...
...
...
},
...
...
...
}
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"mysite": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
...
...
...
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
...
...
...
],
"styles": [
...
...
...
],
"scripts": [
...
...
...
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": false,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": false
},
"qa": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.qa.ts"
}
],
"optimization": false,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": false
},
"live": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.live.ts"
}
],
"optimization": false,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": false
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "mysite:build"
},
"configurations": {
"production": {
"browserTarget": "mysite:build:production"
},
"qa": {
"browserTarget": "mysite:build:qa"
},
"live": {
"browserTarget": "mysite:build:live"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "mysite:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
...
...
...
],
"scripts": [],
"assets": [
"src/favicon.png",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"mysite-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "mysite:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "mysite",
"cli": {
"analytics": false
}
}
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"mysite": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
...
...
...
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
...
...
...
],
"styles": [
...
...
...
],
"scripts": [
...
...
...
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": false,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": false
},
"qa": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.qa.ts"
}
],
"optimization": false,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": false
},
"live": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.live.ts"
}
],
"optimization": false,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": false
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "mysite:build"
},
"configurations": {
"production": {
"browserTarget": "mysite:build:production"
},
"qa": {
"browserTarget": "mysite:build:qa"
},
"live": {
"browserTarget": "mysite:build:live"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "mysite:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
...
...
...
],
"scripts": [],
"assets": [
"src/favicon.png",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"mysite-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "mysite:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "mysite",
"cli": {
"analytics": false
}
}
In this file you need to add/edit configurations object as per made environment files.
after that, if you want to build or run you need to use as per the given bellow
For development server
ng build
OR
ng serve
OR
...
...
...
For production serverOR
ng serve
OR
...
...
...
ng build --prod
OR
ng serve --prod
OR
...
...
...
OR
ng serve --prod
OR
...
...
...
For QA server
ng build -c=qa
OR
ng serve -c=qa
OR
...
...
...
For live serverOR
ng serve -c=qa
OR
...
...
...
ng build -c=live
OR
ng serve -c=live
OR
...
...
...
OR
ng serve -c=live
OR
...
...
...
simply you need to add one extra option with command as -c=<your environment configuration> with the build command
I think it's clear how to configure environment files in angular 8, angular 9, angular 10, etc.
No comments:
Post a Comment