refactor: created stage env and fixed bugs related to http requests

.github/workflows/on-deploy.yml

@@ -57,7 +57,7 @@ jobs:
         with:
           path: ${{ env.CACHE_DIST_PATH }}
           key: dist-${{ github.run_id }}
-      - run: npx nx run valor-software-site:build-scully --prod
+      - run: npx nx run valor-software-site:build-scully -c stage
 
   # firebase deploy
   firebase_deploy:

.github/workflows/on-push-or-pull.yml

@@ -59,7 +59,7 @@ jobs:
         with:
           path: ${{ env.CACHE_DIST_PATH }}
           key: dist-${{ github.run_id }}
-      - run: npx nx run valor-software-site:build-scully --prod
+      - run: npx nx run valor-software-site:build-scully -c stage
 
   # run linting
   linting:

.github/workflows/on_push_to_master.yml

@@ -17,7 +17,7 @@ jobs:
         with:
           node-version: '16.15.1'
       - run: yarn install
-      - run: npx nx run valor-software-site:build-scully --prod
+      - run: npx nx run valor-software-site:build-scully:production
       - name: Deploy 🚀
         uses: JamesIves/[email protected]
         with:

apps/valor-software-site/project.json

@@ -10,6 +10,9 @@
       "options": {
         "command": "npx scully --prod --scanRoutes --project=valor-software-site"
       },
+      "configurations": {
+        "uat": {}
+      },
       "dependsOn": [
         {
           "target": "build",
@@ -44,6 +47,12 @@
       },
       "configurations": {
         "production": {
+          "optimization": true,
+          "sourceMap": false,
+          "namedChunks": false,
+          "extractLicenses": true,
+          "vendorChunk": false,
+          "buildOptimizer": true,
           "budgets": [
             {
               "type": "initial",
@@ -71,6 +80,32 @@
           "extractLicenses": false,
           "sourceMap": true,
           "namedChunks": true
+        },
+        "stage": {
+          "fileReplacements": [
+            {
+              "replace": "apps/valor-software-site/src/environments/environment.ts",
+              "with": "apps/valor-software-site/src/environments/environment.stage.ts"
+            }
+          ],
+          "optimization": true,
+          "sourceMap": false,
+          "namedChunks": false,
+          "extractLicenses": true,
+          "vendorChunk": false,
+          "buildOptimizer": true,
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "500kb",
+              "maximumError": "1mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "2kb",
+              "maximumError": "4kb"
+            }
+          ]
         }
       },
       "defaultConfiguration": "production"
@@ -83,6 +118,9 @@
         },
         "development": {
           "browserTarget": "valor-software-site:build:development"
+        },
+        "stage": {
+          "browserTarget": "valor-software-site:build:stage"
         }
       },
       "defaultConfiguration": "development"

apps/valor-software-site/src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { InjectionToken, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
 import { routes } from './app.routing';
@@ -9,7 +9,8 @@ import {
 	CommonDocsModule,
 	OLD_ROUTES_FROM_OLD_SITE,
 	PORTFOLIO_LIST,
-	SeoService
+	SeoService,
+	VALOR_ASSETS_URL
 } from '@valor-software/common-docs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ScullyLibModule } from '@scullyio/ng-lib';
@@ -18,6 +19,7 @@ import { projectsList } from '../assets/portfolio/portfolio.list';
 import { linksFromOldSite } from '../../../../assets/articles/brokenRoutes';
 import { NotFoundComponent } from './404.component';
 import { RECAPTCHA_V3_SITE_KEY, RecaptchaV3Module } from 'ng-recaptcha';
+import { environment } from '../environments/environment';
 
 @NgModule({
 	declarations: [
@@ -38,7 +40,8 @@ import { RECAPTCHA_V3_SITE_KEY, RecaptchaV3Module } from 'ng-recaptcha';
 		{ provide: ARTICLES_REFACTORED_TITLE_LIST, useValue: articlesRefactoringTitlesList },
 		{ provide: PORTFOLIO_LIST, useValue: projectsList },
 		{ provide: OLD_ROUTES_FROM_OLD_SITE, useValue: linksFromOldSite },
-		{ provide: RECAPTCHA_V3_SITE_KEY, useValue: '6LeXDiUoAAAAABZ2FU4l2GZTJ0v5otDAQkC3UZxs' }
+		{ provide: RECAPTCHA_V3_SITE_KEY, useValue: '6LeXDiUoAAAAABZ2FU4l2GZTJ0v5otDAQkC3UZxs' },
+		{ provide: VALOR_ASSETS_URL, useValue: environment.VALOR_ASSETS_DOMAIN }
 	],
 	bootstrap: [AppComponent],
 })

apps/valor-software-site/src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
   production: true,
+  VALOR_ASSETS_DOMAIN: 'https://valor-software.com'
 };

apps/valor-software-site/src/environments/environment.stage.ts

@@ -0,0 +1,4 @@
+export const environment = {
+	production: false,
+	VALOR_ASSETS_DOMAIN: 'http://valor-software.com'
+};

apps/valor-software-site/src/environments/environment.ts

@@ -1,14 +1,6 @@
 // This file can be replaced during build by using the `fileReplacements` array.
 
 export const environment = {
-  production: false,
+	production: false,
+	VALOR_ASSETS_DOMAIN: 'http://valor-software.com'
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

libs/common-docs/src/common-docs.module.ts

@@ -47,6 +47,7 @@ export { ARTICLES_LIST, ARTICLES_REFACTORED_TITLE_LIST } from './tokens/articles
 export { SeoService } from './services/seo.service';
 export { CustomSlicePipe } from './pipes/customSlice.pipe';
 export { PORTFOLIO_LIST } from './tokens/portfolioList.token';
+export { VALOR_ASSETS_URL } from './tokens/valor-assets-url.token';
 export { IPortfolio } from './models/portfolio.interface';
 export { GetPortfolioService } from './services/getPortfolio.service';
 export { titleRefactoring, checkHTMLExtension } from './utils/titleRefactoringUtil';

libs/common-docs/src/services/getArticles.service.ts

@@ -1,9 +1,9 @@
 import { Injectable, Inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { ARTICLES_LIST, ARTICLES_REFACTORED_TITLE_LIST } from '../tokens/articlesList.token';
 import { IArticle } from '../models/article.interface';
 import { titleRefactoring } from '../utils/titleRefactoringUtil';
+import { VALOR_ASSETS_URL, ARTICLES_LIST, ARTICLES_REFACTORED_TITLE_LIST } from '../common-docs.module';
 
 @Injectable({ providedIn: 'platform' })
 export class GetArticlesService {
@@ -15,8 +15,11 @@ export class GetArticlesService {
 	constructor(
 		private http: HttpClient,
 		@Inject(ARTICLES_LIST) articlesList: string[],
-		@Inject(ARTICLES_REFACTORED_TITLE_LIST) articlesRefactoredTitlesList: string[]
+		@Inject(ARTICLES_REFACTORED_TITLE_LIST) articlesRefactoredTitlesList: string[],
+		@Inject(VALOR_ASSETS_URL) private readonly valorAssetsUrl: string,
 	) {
+		console.log('GetArticlesService', valorAssetsUrl);
+
 		this.articlesList = articlesList;
 		this.articlesRefactoredTitlesList = articlesRefactoredTitlesList;
 		this.apiArray = this.articlesRefactoredTitlesList.map((art) => {
@@ -25,7 +28,7 @@ export class GetArticlesService {
 	}
 
 	getArticleRequest(art: string): Observable<IArticle> {
-		return this.http.get(`https://valor-software.com/assets/articles/${art}/${art}.json`) as Observable<IArticle>;
+		return this.http.get(`${this.valorAssetsUrl}/assets/articles/${art}/${art}.json`) as Observable<IArticle>;
 	}
 
 	getPreviewArticle(): Observable<any>[] | undefined {
@@ -63,6 +66,6 @@ export class GetArticlesService {
 			return;
 		}
 
-		return this.http.get(`https://valor-software.com/assets/articles/${link}/${link}.html`, { responseType: 'text' });
+		return this.http.get(`${this.valorAssetsUrl}/assets/articles/${link}/${link}.html`, { responseType: 'text' });
 	}
 }

libs/common-docs/src/services/getPortfolio.service.ts

@@ -4,6 +4,7 @@ import { Observable } from 'rxjs';
 import { IPortfolio } from '../models/portfolio.interface';
 import { PORTFOLIO_LIST } from '../tokens/portfolioList.token';
 import { titleRefactoring, checkHTMLExtension } from '../utils/titleRefactoringUtil';
+import { VALOR_ASSETS_URL } from '../tokens/valor-assets-url.token';
 
 
 @Injectable({ providedIn: 'platform' })
@@ -14,7 +15,8 @@ export class GetPortfolioService {
 
 	constructor(
 		private http: HttpClient,
-		@Inject(PORTFOLIO_LIST) portfolioList: string[]
+		@Inject(PORTFOLIO_LIST) portfolioList: string[],
+		@Inject(VALOR_ASSETS_URL) private readonly valorAssetsUrl: string,
 	) {
 		this.portfolioList = portfolioList;
 		if (!this.refactoredList?.length) {
@@ -27,7 +29,7 @@ export class GetPortfolioService {
 	}
 
 	getPortfolioRequest(art: string): Observable<any> {
-		return this.http.get(`https://valor-software.com/assets/portfolio/clients/${art}.json`);
+		return this.http.get(`${this.valorAssetsUrl}/assets/portfolio/clients/${art}.json`);
 	}
 
 	getFullListOfPortfolio(): Observable<IPortfolio>[] | undefined {

libs/common-docs/src/tokens/valor-assets-url.token.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const VALOR_ASSETS_URL = new InjectionToken<string>('valorAssetsUrl');

libs/route-pages/blog/src/blog-page.component.html

@@ -23,7 +23,7 @@ <h1 class="text-light_title_col md:text-64 text-large md:leading-66 leading-44 m
 					<ng-container *ngIf="activeArticle && activeArticle.title">
 						<a href="javascript:void(0)" [routerLink]="[getRouteLink(activeArticle.title)]"
 						   class="block zoom-img-scale">
-							<img [src]="'https://valor-software.com/' + activeArticle.bgImg"
+							<img [src]="valorAssetsUrl + '/' + activeArticle.bgImg"
 							     [alt]="activeArticle.title + 'image'">
 						</a>
 					</ng-container>

libs/route-pages/blog/src/blog-page.component.ts

@@ -1,8 +1,8 @@
-import { Component, OnDestroy } from '@angular/core';
+import { Component, Inject, OnDestroy } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { filter } from 'rxjs/operators';
 import { forkJoin, Subscription } from 'rxjs';
-import { GetArticlesService, IArticle, titleRefactoring } from '@valor-software/common-docs';
+import { GetArticlesService, IArticle, titleRefactoring, VALOR_ASSETS_URL } from '@valor-software/common-docs';
 import SwiperCore, { Pagination, SwiperOptions } from 'swiper';
 
 SwiperCore.use([Pagination]);
@@ -32,7 +32,9 @@ export class BlogPageComponent implements OnDestroy {
 	constructor(
 		private readonly router: Router,
 		private readonly getArticlesServ: GetArticlesService,
+		@Inject(VALOR_ASSETS_URL) public readonly valorAssetsUrl: string,
 	) {
+		console.log('BlogPageComponent', valorAssetsUrl);
 		this.$generalSubscription.add(
 			this.router.events.pipe(
 				filter(event => event instanceof NavigationEnd)

libs/route-pages/blog/src/components/article/article.component.html

@@ -23,20 +23,20 @@
 					<div class="w-70 h-70 rounded-full overflow-hidden mb-4"
 					     *ngIf="article.authorImg && !article.secondAuthorImg">
 						<img class="w-full h-full object-cover"
-						     [src]="'https://valor-software.com/' + article.authorImg"
+						     [src]="valorAssetsUrl + '/' + article.authorImg"
 						     [alt]="article.author">
 					</div>
 
 					<div class="flex justify-center" *ngIf="article.authorImg && article.secondAuthorImg">
 						<div class="w-70 h-70 rounded-full overflow-hidden mb-4 mr-8">
 							<img class="w-full h-full object-cover"
-							     [src]="'https://valor-software.com/' + article.authorImg"
+							     [src]="valorAssetsUrl + '/' + article.authorImg"
 							     [alt]="article.author">
 						</div>
 
 						<div class="w-70 h-70 rounded-full overflow-hidden mb-4">
 							<img class="w-full h-full object-cover"
-							     [src]="'https://valor-software.com/' + article.secondAuthorImg"
+							     [src]="valorAssetsUrl + '/' + article.secondAuthorImg"
 							     [alt]="article.secondAuthor">
 						</div>
 					</div>

libs/route-pages/blog/src/components/article/article.component.ts

@@ -5,7 +5,7 @@ import {
 	checkHTMLExtension,
 	GetArticlesService,
 	IArticle,
-	OLD_ROUTES_FROM_OLD_SITE
+	OLD_ROUTES_FROM_OLD_SITE, VALOR_ASSETS_URL
 } from '@valor-software/common-docs';
 import { filter, switchMap, catchError } from 'rxjs/operators';
 import { Subscription, of } from 'rxjs';
@@ -91,11 +91,13 @@ export class ArticleComponent implements OnDestroy {
 	$routEvents?: Subscription;
 	linksFromOldSite?: { [key: string]: string };
 
+
 	constructor(
 		private router: Router,
 		private getArticleServ: GetArticlesService,
 		private sanitizer: DomSanitizer,
 		@Inject(OLD_ROUTES_FROM_OLD_SITE) linkList: { [key: string]: string },
+		@Inject(VALOR_ASSETS_URL) public readonly valorAssetsUrl: string,
 	) {
 		this.linksFromOldSite = linkList;
 		this.$routEvents = router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event) => {