fix(stark-demo): revert PR #471. Adapt baseHref/deployUrl automatical…

…ly via Node script to fix Showcase when published in GitHub pages

ISSUES CLOSED: 466

.travis.yml

@@ -49,7 +49,7 @@ script:
   - npm run lint:all
   - npm run test:ci:all
   - npm run docs:coverage
-  - npm run build:showcase
+  - npm run build:showcase:ghpages
   - npm run docs:publish
   - npm run release:publish
   - bash ./scripts/ci/print-logs.sh

gh-deploy.sh

@@ -133,48 +133,48 @@ travisFoldStart "docs publication checks" "no-xtrace"
 if [[ ${TRAVIS:-} ]]; then
   logInfo "Publishing docs to GH pages";
   logInfo "============================================="
-  
+
   # Don't even try if not running against the official repo
   # We don't want docs publish to run outside of our own little world
   if [[ ${TRAVIS_REPO_SLUG} != ${EXPECTED_REPO_SLUG} ]]; then
     logInfo "Skipping release because this is not the main repository.";
     exit 0;
   fi
-  
+
   # Ensuring that this is the execution for Node x
   # Without this check, we would publish a release for each node version we test under! :)
   if [[ ${TRAVIS_NODE_VERSION} != ${EXPECTED_NODE_VERSION} ]]; then
     logInfo "Skipping release because this is not the expected version of node: ${TRAVIS_NODE_VERSION}"
     exit 0;
   fi
-  
+
   logInfo "Verifying if this build has been triggered for a tag" 
   # Making sure the variables exist..
   if [[ -z ${TRAVIS_TAG+x} ]]; then
     TRAVIS_TAG=""
   fi
-  
+
   if [[ -z ${TRAVIS_PULL_REQUEST+x} ]]; then
     TRAVIS_PULL_REQUEST=""
   fi
-  
+
   if [[ ${TRAVIS_PULL_REQUEST} != "false" ]]; then
     logInfo "Not publishing because this is a build triggered for a pull request" 1
     exit 0;
   fi
-  
+
   if [[ ${TRAVIS_EVENT_TYPE} == "cron" ]]; then
     logInfo "Not publishing because this is a build triggered for a nightly build" 1
     exit 0;
   fi
-  
+
   if [[ ${TRAVIS_TAG} == "" ]]; then
     logInfo "Not publishing because this is not a build triggered for a tag" 1
     exit 0;
   else
     logInfo "OK, this build has been triggered for a tag"
   fi
-  
+
   # Those keys are needed to decrypt the ${SSH_KEY_ENCRYPTED} file, which contains the SSH private key
   # that we'll use to push to GitHub pages!
   logInfo "Verifying that the necessary decryption keys are available"
@@ -184,23 +184,23 @@ if [[ ${TRAVIS:-} ]]; then
   if [[ -z ${encrypted_4290e9054abd_key+x} ]]; then
     encrypted_4290e9054abd_key=""
   fi
-  
+
   if [[ ${encrypted_4290e9054abd_iv} == "" ]]; then
     logInfo "Not publishing because the SSH key decryption IV is not available as environment variable" 1
     exit 0;
   else
     logTrace "SSH key decryption IV is available" 2
     ENCRYPTED_IV=${encrypted_4290e9054abd_iv}
   fi
-  
+
   if [[ ${encrypted_4290e9054abd_key} == "" ]]; then
     logInfo "Not publishing because the SSH key decryption key is not available as environment variable" 1
     exit 0;
   else
     logTrace "SSH key decryption key is available" 2
     ENCRYPTED_KEY=${encrypted_4290e9054abd_key}
   fi
-  
+
   # If any of the previous commands in the `script` section of .travis.yaml failed, then abort.
   # The variable is not set in early stages of the build, so we default to 0 there.
   # https://docs.travis-ci.com/user/environment-variables/
@@ -259,11 +259,11 @@ if [[ ${DRY_RUN} == false ]]; then
     openssl aes-256-cbc -K ${ENCRYPTED_KEY} -iv ${ENCRYPTED_IV} -in ./${SSH_KEY_ENCRYPTED} -out ./${SSH_KEY_CLEARTEXT_FILE} -d
     chmod 600 ./${SSH_KEY_CLEARTEXT_FILE}
     logTrace "Decrypted the SSH private key"
-    
+
     # to test the connection with GitHub using the decrypted key 
     # logTrace "Hi github.com!"
     # ssh -T [email protected] -i ./${SSH_KEY_CLEARTEXT_FILE}
-    
+
     # we use our decrypted private SSH key
     logTrace "Setting SSH config"
     mv -f ./${SSH_KEY_CLEARTEXT_FILE} ~/.ssh
@@ -303,8 +303,12 @@ syncFiles ${API_DOCS_SOURCE_DIR}/${STARK_UI} ${API_DOCS_TARGET_DIR_STARK_UI_LATE
 
 logTrace "Copying ${SHOWCASE}"
 
-syncFiles ${SHOWCASE_SOURCE_DIR} ${SHOWCASE_TARGET_DIR} "${syncOptions[@]}"
+NODE_REPLACE_URLS="node ${PROJECT_ROOT_DIR}/${SHOWCASE}/ghpages-adapt-bundle-urls.js"
+
+$NODE_REPLACE_URLS "${LATEST_DIR_NAME}"
 syncFiles ${SHOWCASE_SOURCE_DIR} ${SHOWCASE_TARGET_DIR_LATEST} "${syncOptions[@]}"
+$NODE_REPLACE_URLS "${DOCS_VERSION}" "${LATEST_DIR_NAME}"
+syncFiles ${SHOWCASE_SOURCE_DIR} ${SHOWCASE_TARGET_DIR} "${syncOptions[@]}"
 
 unset syncOptions
 

package.json

@@ -67,6 +67,7 @@
     "build:stark-testing": "npm run build -- --packages=stark-testing",
     "build:stark-ui": "npm run build -- --packages=stark-ui",
     "build:showcase": "cd showcase && npm run build:prod && cd ..",
+    "build:showcase:ghpages": "cd showcase && npm run build:prod:ghpages && cd ..",
     "clean": "npx rimraf ./dist",
     "clean:all": "npm run clean && npm run clean:stark-build && npm run clean:stark-core && npm run clean:stark-ui && npm run clean:stark-testing && npm run clean:starter && npm run clean:showcase",
     "clean:stark-build": "cd packages/stark-build && npm run clean && cd ../..",

showcase/ghpages-adapt-angular-json.js

@@ -0,0 +1,34 @@
+let fs = require("fs");
+
+const deployUrlPlaceholder = "<stark-dummy-deploy-url>";
+const baseHrefPlaceholder = "<stark-dummy-base-href>";
+
+let replacements = [
+	{ searchValue: `"deployUrl": ""`, replaceValue: `"deployUrl": "${deployUrlPlaceholder}"` },
+	{ searchValue: `"baseHref": "/"`, replaceValue: `"baseHref": "${baseHrefPlaceholder}"` }
+];
+
+replaceValuesInFile("angular.json", replacements);
+
+function replaceValuesInFile(fileName, valueReplacements) {
+	fs.readFile(fileName, "utf8", function(err, data) {
+		if (err) {
+			return console.error("Error while reading file => " + err);
+		}
+
+		let result = data;
+
+		for (const replacement of valueReplacements) {
+			const searchValueRegex = new RegExp(replacement.searchValue, "g");
+			result = result.replace(searchValueRegex, replacement.replaceValue);
+		}
+
+		fs.writeFile(fileName, result, "utf8", function(err) {
+			if (err) {
+				return console.error(err);
+			} else {
+				return console.log(`${fileName} updated successfully`);
+			}
+		});
+	});
+}

showcase/ghpages-adapt-bundle-urls.js

@@ -0,0 +1,81 @@
+let fs = require("fs");
+let path = require("path");
+
+const filesToChange = [
+	/index.html/,
+	/main.*\.css$/,
+	/runtime~main.*\.js$/,
+	/runtime~main.*\.js\.map$/,
+	/runtime~polyfills.*\.js$/,
+	/runtime~polyfills.*\.js\.map$/
+];
+
+if (process.argv.length <= 2) {
+	console.log("Usage: " + __filename + " deployDir oldDeployDir");
+	process.exit(-1);
+}
+
+let deployDir = "/showcase/" + process.argv[2];
+
+let baseHrefPlaceholder = "<stark-dummy-base-href>";
+let deployUrlPlaceholder = "<stark-dummy-deploy-url>";
+
+let urlWithTrailingSlash = deployDir.endsWith("/") ? deployDir : deployDir + "/";
+let urlWithoutTrailingSlash = deployDir.endsWith("/") ? deployDir.substring(0, deployDir.length - 1) : deployDir;
+
+let replacements = [
+	{ searchValue: `"${baseHrefPlaceholder}"`, replaceValue: `"${urlWithTrailingSlash}"` },
+	{ searchValue: `"${deployUrlPlaceholder}"`, replaceValue: `"${urlWithoutTrailingSlash}"` },
+	{ searchValue: `"${deployUrlPlaceholder}/`, replaceValue: `"${urlWithTrailingSlash}` },
+	{ searchValue: `/${baseHrefPlaceholder}/${deployUrlPlaceholder}/`, replaceValue: urlWithTrailingSlash }
+];
+
+// if the 3rd param is given (oldDeployDir) then it will be appended to the "showcase" folder and replaced by the new deployDir
+if (process.argv[3]) {
+	deployDir = "showcase/" + process.argv[2]; // no slashes at the beginning nor the end to cover all replacements at once
+	let oldDeployDir = "showcase/" + process.argv[3]; // no slashes at the beginning nor the end cover all replacements at once
+
+	replacements = [{ searchValue: oldDeployDir, replaceValue: deployDir }];
+}
+
+let outputDir = "showcase" + path.sep + "dist";
+
+fs.readdir(outputDir, function(err, items) {
+	if (err) {
+		return console.error("Error while reading directory => " + err);
+	}
+
+	for (const item of items) {
+		for (const fileRegex of filesToChange) {
+			if (item.match(fileRegex)) {
+				let fullFilePath = outputDir + path.sep + item;
+				replaceValuesInFile(fullFilePath, replacements);
+
+				break;
+			}
+		}
+	}
+});
+
+function replaceValuesInFile(fileName, valueReplacements) {
+	fs.readFile(fileName, "utf8", function(err, data) {
+		if (err) {
+			return console.error("Error while reading file => " + err);
+		}
+
+		let result = data;
+
+		for (const replacement of valueReplacements) {
+			const searchValueRegex = new RegExp(replacement.searchValue, "g");
+			result = result.replace(searchValueRegex, replacement.replaceValue);
+		}
+
+		fs.writeFile(fileName, result, "utf8", function(err) {
+			if (err) {
+				return console.error(err);
+			} else {
+				return console.log(`${fileName} updated successfully`);
+			}
+		});
+	});
+}

showcase/package.json

@@ -33,6 +33,7 @@
     "build:dev:monitor": "npx mkdirp reports && npm run build:dev -- --env.monitor",
     "build:docker": "npm run build:prod && docker build -t angular2-webpack-start:latest .",
     "build:prod": "npm run clean:dist && npm run build:aot:prod",
+    "build:prod:ghpages": "npm run clean:dist && node ./ghpages-adapt-angular-json.js && npm run build:aot:prod",
     "build": "npm run build:dev",
     "check-deps": "npx npm-check-u",
     "ci:aot": "cross-env BUILD_E2E=1 npm run lint && npm run test && npm run build:aot && npm run e2e",

showcase/src/environments/environment.e2e.prod.ts

@@ -1,6 +1,5 @@
 import { enableProdMode, NgModuleRef } from "@angular/core";
 import { disableDebugTools } from "@angular/platform-browser";
-import { APP_BASE_HREF } from "@angular/common";
 import { StarkEnvironment } from "@nationalbankbelgium/stark-core";
 
 enableProdMode();
@@ -18,7 +17,5 @@ export const environment: StarkEnvironment = {
 		disableDebugTools();
 		return modRef;
 	},
-	ENV_PROVIDERS: [
-		{ provide: APP_BASE_HREF, useValue: "/" } // the baseHref is defined via the Angular provider instead of the angular.json file
-	]
+	ENV_PROVIDERS: []
 };

showcase/src/environments/environment.hmr.ts

@@ -1,6 +1,5 @@
 import { ApplicationRef, ComponentRef, NgModuleRef } from "@angular/core";
 import { enableDebugTools } from "@angular/platform-browser";
-import { APP_BASE_HREF } from "@angular/common";
 import { StarkEnvironment } from "@nationalbankbelgium/stark-core";
 
 // Ensure that we get detailed stack tracks during development (useful with node & Webpack)
@@ -27,7 +26,5 @@ export const environment: StarkEnvironment = {
 		(<any>window).ng.coreTokens = _ng.coreTokens;
 		return modRef;
 	},
-	ENV_PROVIDERS: [
-		{ provide: APP_BASE_HREF, useValue: "/" } // the baseHref is defined via the Angular provider instead of the angular.json file
-	]
+	ENV_PROVIDERS: []
 };

showcase/src/environments/environment.prod.ts

@@ -1,33 +1,9 @@
 import { enableProdMode, NgModuleRef } from "@angular/core";
 import { disableDebugTools } from "@angular/platform-browser";
-import { APP_BASE_HREF } from "@angular/common";
 import { StarkEnvironment } from "@nationalbankbelgium/stark-core";
 
 enableProdMode();
 
-/**
- * This factory constructs the final baseHref based on the path location of the Showcase app in GitHub Pages
- */
-export function appBaseHrefFactory(): string {
-	// the final url in GitHub Pages will be something like "/showcase/latest/" or "/showcase/some-version/"
-	const finalUrlRegex: RegExp = /(\/showcase\/[\d\D][^\/]+(\/|\/$|$))/;
-	const trailingSlashRegex: RegExp = /\/$/;
-	const matches: RegExpExecArray | null = finalUrlRegex.exec(window.location.pathname);
-
-	let finalBaseHref: string = "";
-
-	if (matches && matches[1]) {
-		finalBaseHref = matches[1];
-	}
-
-	// add a trailing slash to the url in case it doesn't have any
-	if (!finalBaseHref.match(trailingSlashRegex)) {
-		finalBaseHref = finalBaseHref + "/";
-	}
-
-	return finalBaseHref;
-}
-
 export const environment: StarkEnvironment = {
 	production: true,
 	hmr: false,
@@ -41,7 +17,5 @@ export const environment: StarkEnvironment = {
 		disableDebugTools();
 		return modRef;
 	},
-	ENV_PROVIDERS: [
-		{ provide: APP_BASE_HREF, useFactory: appBaseHrefFactory } // the baseHref is defined via the Angular provider instead of the angular.json file
-	]
+	ENV_PROVIDERS: []
 };

showcase/src/environments/environment.ts

@@ -1,6 +1,5 @@
 import { ApplicationRef, ComponentRef, NgModuleRef } from "@angular/core";
 import { enableDebugTools } from "@angular/platform-browser";
-import { APP_BASE_HREF } from "@angular/common";
 import { StarkEnvironment } from "@nationalbankbelgium/stark-core";
 
 // Ensure that we get detailed stack tracks during development (useful with node & Webpack)
@@ -27,7 +26,5 @@ export const environment: StarkEnvironment = {
 		(<any>window).ng.coreTokens = _ng.coreTokens;
 		return modRef;
 	},
-	ENV_PROVIDERS: [
-		{ provide: APP_BASE_HREF, useValue: "/" } // the baseHref is defined via the Angular provider instead of the angular.json file
-	]
+	ENV_PROVIDERS: []
 };