feat(stark-build): added html-element-webpack-plugin to handle head s…

…ection in index.html ISSUES CLOSED: #60
NationalBankBelgium · Jun 29, 2018 · ce089c8 · ce089c8
1 parent e823761
commit ce089c8
Show file tree

Hide file tree

Showing 9 changed files with 229 additions and 103 deletions.
diff --git a/docs/WEBPACK.md b/docs/WEBPACK.md
@@ -83,3 +83,61 @@ if (ENV === "development") {
 	/* the code inside this block will be executed only in development */
 }
 ```
+
+
+#### [HtmlElementWebpackPlugin](https://github.com/fulls1z3/html-elements-webpack-plugin "HtmlElementWebpackPlugin")
+
+This webpack plugin appends head elements during the creation of index.html. 
+
+To use it, you'll have to create the `index-head-config.js` file to specify the `<link>` and `<meta>` you want to include in the `<head>` section of your index.html. 
+
+Create your file at the following location: 
+
+```txt
+|
++---yourApp
+|  	+---config
+|	|	index-head-config.js
+|   ...
+```
+
+Then, declare your file as follows: 
+
+````
+module.exports = {
+	link: [
+		{ rel: "manifest", href: "manifest.json" },
+		{ rel: "shortcut icon", type: "image/x-icon", href: "favicon.ico" },
+		{ rel: "apple-touch-icon", sizes: "120x120", href: "assets/images/app-icons/apple-icon-120x120.png" },
+		{ rel: "icon", type: "image/png", sizes: "32x32", href: "assets/images/app-icons/favicon-32x32.png" },
+		...
+	],
+	meta: [
+		...
+		{ name: "apple-mobile-web-app-capable", content: "yes" },
+		{ name: "apple-mobile-web-app-status-bar-style", content: "black" },
+		{ name: "apple-mobile-web-app-title", content: "template" },
+		{ name: "msapplication-config", content: "none" },
+		...
+	]
+}
+````
+
+Finally, to indicate to your index.html file that you want to use this new file, 
+you will have to add the following lines in your `<head>` section: 
+
+````
+<head>
+...
+	<% if (webpackConfig.htmlElements.headTags) { %>
+	<%= webpackConfig.htmlElements.headTags %>
+	<% } %>
+...
+</head>
+````
+
+_If you do not intend to use this way of working, simply don't create this file and
+ don't include the check for `webpackConfig.htmlElements.headTags` in the `<head>` section of index.html._  
+
+
+
diff --git a/packages/stark-build/config/webpack.common.js b/packages/stark-build/config/webpack.common.js
@@ -1,6 +1,7 @@
 "use strict";
 
 const helpers = require("./helpers");
+const fs = require("fs");
 const commonData = require("./webpack.common-data.js"); // common configuration between environments
 
 /**
@@ -16,6 +17,7 @@ const DefinePlugin = require("webpack/lib/DefinePlugin");
 // const InlineManifestWebpackPlugin = require("inline-manifest-webpack-plugin");
 // const ScriptExtHtmlWebpackPlugin = require("script-ext-html-webpack-plugin");
 const { AngularCompilerPlugin } = require("@ngtools/webpack");
+const HtmlElementsWebpackPlugin = require("html-elements-webpack-plugin");
 const AngularNamedLazyChunksWebpackPlugin = require("angular-named-lazy-chunks-webpack-plugin");
 const ContextReplacementPlugin = require("webpack/lib/ContextReplacementPlugin");
 const CircularDependencyPlugin = require("circular-dependency-plugin");
@@ -497,7 +499,7 @@ module.exports = options => {
 				platform: 0, // 0 = browser, 1 = server
 				compilerOptions: appNgcOptions,
 				tsConfigPath: METADATA.TS_CONFIG_PATH
-			})
+			}),
 
 			/**
 			 * Plugin: InlineManifestWebpackPlugin
@@ -507,6 +509,36 @@ module.exports = options => {
 			 */
 			// TODO evaluate this
 			// new InlineManifestWebpackPlugin(),
+
+			/**
+			 * Generate html tags based on javascript maps.
+			 *
+			 * If a publicPath is set in the webpack output configuration, it will be automatically added to
+			 * href attributes, you can disable that by adding a "=href": false property.
+			 * You can also enable it to other attribute by settings "=attName": true.
+			 *
+			 * The configuration supplied is map between a location (key) and an element definition object (value)
+			 * The location (key) is then exported to the template under then htmlElements property in webpack configuration.
+			 *
+			 * Example:
+			 *  Adding this plugin configuration
+			 *  new HtmlElementsWebpackPlugin({
+			 *  headTags: { ... }
+			 *  })
+			 *
+			 * Means we can use it in the template like this:
+			 * <%= webpackConfig.htmlElements.headTags %>
+			 *
+			 * @link : https://github.com/fulls1z3/html-elements-webpack-plugin
+			 *
+			 */
+			...(fs.existsSync(helpers.root("config/index-head-config.js"))
+				? [
+						new HtmlElementsWebpackPlugin({
+							headTags: require(helpers.root("config/index-head-config"))
+						})
+				  ]
+				: [])
 		],
 
 		/**

diff --git a/packages/stark-build/package.json b/packages/stark-build/package.json
@@ -38,6 +38,7 @@
     "exports-loader": "0.7.0",
     "expose-loader": "0.7.5",
     "file-loader": "1.1.11",
+    "html-elements-webpack-plugin": "2.0.0",
     "html-webpack-plugin": "3.2.0",
     "imports-loader": "0.8.0",
     "inline-manifest-webpack-plugin": "4.0.0",

diff --git a/showcase/config/index-head-config.js b/showcase/config/index-head-config.js
@@ -0,0 +1,57 @@
+/**
+ * Configuration for head elements added during the creation of index.html.
+ *
+ * All href attributes are added the publicPath (if exists) by default.
+ * You can explicitly hint to prefix a publicPath by setting a boolean value to a key that has
+ * the same name as the attribute you want to operate on, but prefix with =
+ *
+ * Example:
+ * { name: 'msapplication-TileImage', content: '/assets/icon/ms-icon-144x144.png', '=content': true },
+ * Will prefix the publicPath to content.
+ *
+ * { rel: 'apple-touch-icon', sizes: '57x57', href: '/assets/icon/apple-icon-57x57.png', '=href': false },
+ * Will not prefix the publicPath on href (href attributes are added by default
+ *
+ * @link https://github.com/gdi2290/angular-starter/blob/master/config/head-config.common.js
+ *
+ */
+module.exports = {
+	link: [
+		// <!-- Add to homescreen -->
+		{ rel: "manifest", href: "manifest.json" },
+		{ rel: "shortcut icon", type: "image/x-icon", href: "favicon.ico" },
+		{ rel: "apple-touch-icon", sizes: "57x57", href: "assets/images/app-icons/apple-icon-57x57.png" },
+		{ rel: "apple-touch-icon", sizes: "60x60", href: "assets/images/app-icons/apple-icon-60x60.png" },
+		{ rel: "apple-touch-icon", sizes: "72x72", href: "assets/images/app-icons/apple-icon-72x72.png" },
+		{ rel: "apple-touch-icon", sizes: "76x76", href: "assets/images/app-icons/apple-icon-76x76.png" },
+		{ rel: "apple-touch-icon", sizes: "114x114", href: "assets/images/app-icons/apple-icon-114x114.png" },
+		{ rel: "apple-touch-icon", sizes: "120x120", href: "assets/images/app-icons/apple-icon-120x120.png" },
+		{ rel: "apple-touch-icon", sizes: "144x144", href: "assets/images/app-icons/apple-icon-144x144.png" },
+		{ rel: "apple-touch-icon", sizes: "152x152", href: "assets/images/app-icons/apple-icon-152x152.png" },
+		{ rel: "apple-touch-icon", sizes: "180x180", href: "assets/images/app-icons/apple-icon-180x180.png" },
+		{ rel: "icon", type: "image/png", sizes: "192x192", href: "assets/images/app-icons/android-icon-192x192.png" },
+		{ rel: "icon", type: "image/png", sizes: "32x32", href: "assets/images/app-icons/favicon-32x32.png" },
+		{ rel: "icon", type: "image/png", sizes: "96x96", href: "assets/images/app-icons/favicon-96x96.png" },
+		{ rel: "icon", type: "image/png", sizes: "16x16", href: "assets/images/app-icons/favicon-16x16.png" }
+	],
+	meta: [
+		{ name: "viewport", content: "width=device-width, initial-scale=1" },
+		// <!-- Disable tap highlight on IE -->
+		{ name: "msapplication-tap-highlight", content: "no" },
+		// <!-- Fallback to homescreen for Chrome <39 on Android -->
+		{ name: "mobile-web-app-capable", content: "yes" },
+		{ name: "application-name", content: "Stark Starter" },
+		// <!-- Add to homescreen for Safari on iOS -->
+		{ name: "apple-mobile-web-app-capable", content: "yes" },
+		{ name: "apple-mobile-web-app-status-bar-style", content: "black" },
+		{ name: "apple-mobile-web-app-title", content: "template" },
+		// <!-- Reference: https://msdn.microsoft.com/library/dn320426(v=vs.85).aspx -->
+		{ name: "msapplication-config", content: "none" },
+		{ name: "HandheldFriendly", content: "true" },
+		// // <!-- Define the toolbar color (Android): http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android -->
+		// <!-- You can customize the default -->
+		{ name: "theme-color", content: "#0076c8" },
+		{ name: "msapplication-TileColor", content: "#0076c8" },
+		{ name: "msapplication-TileImage", content: "assets/images/app-icons/ms-icon-144x144.png" }
+	]
+};
diff --git a/showcase/package.json b/showcase/package.json
@@ -120,7 +120,7 @@
     "@angular/platform-browser-dynamic": "6.0.4",
     "@angular/platform-server": "6.0.4",
     "@angular/router": "6.0.4",
-    "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.0.0-alpha.2-2c723cb.tgz",
+    "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.0.0-alpha.3-c704297.tgz",
     "@nationalbankbelgium/stark-ui": "../packages/stark-ui",
     "@uirouter/visualizer": "6.0.0",
     "core-js": "2.5.7",
@@ -136,8 +136,8 @@
     "zone.js": "0.8.26"
   },
   "devDependencies": {
-    "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-10.0.0-alpha.2-2c723cb.tgz",
-    "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-10.0.0-alpha.2-2c723cb.tgz",
+    "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-10.0.0-alpha.3-c704297.tgz",
+    "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-10.0.0-alpha.3-c704297.tgz",
     "@types/core-js": "2.5.0",
     "@types/hammerjs": "2.0.35",
     "@types/node": "8.10.15",

diff --git a/showcase/src/index.html b/showcase/src/index.html
@@ -4,48 +4,14 @@
 	<!-- The base href is defined through the Webpack configuration and can be customized through the angular.json file -->
 	<!-- necessary for HTML5 History API which adds support for pretty URLs (see app.ts) -->
 	<meta charset="utf-8">
-	<meta name="description" content="<%= htmlWebpackPlugin.options.starkAppMetadata.description %>">
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<!-- Disable tap highlight on IE -->
-	<meta name="msapplication-tap-highlight" content="no">
-	<!-- Add to homescreen -->
-	<link rel="manifest" href="manifest.json">
-	<!-- Fallback to homescreen for Chrome <39 on Android -->
-	<meta name="mobile-web-app-capable" content="yes">
-	<meta name="application-name" content="Stark Showcase">
-	<!-- Add to homescreen for Safari on iOS -->
-	<meta name="apple-mobile-web-app-capable" content="yes">
-	<meta name="apple-mobile-web-app-status-bar-style" content="black">
-	<meta name="apple-mobile-web-app-title" content="template">
-
-	<!-- Reference: https://msdn.microsoft.com/library/dn320426(v=vs.85).aspx -->
-	<meta name="msapplication-config" content="none">
-
-	<meta name="HandheldFriendly" content="true">
-
-	<!-- Define the toolbar color (Android): http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android -->
-	<!-- You can customize the default -->
-	<meta name="theme-color" content="#0076c8">
-
-	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+	<title><%= htmlWebpackPlugin.options.starkAppMetadata.name %></title>
 
-	<link rel="apple-touch-icon" sizes="57x57" href="assets/images/app-icons/apple-icon-57x57.png">
-	<link rel="apple-touch-icon" sizes="60x60" href="assets/images/app-icons/apple-icon-60x60.png">
-	<link rel="apple-touch-icon" sizes="72x72" href="assets/images/app-icons/apple-icon-72x72.png">
-	<link rel="apple-touch-icon" sizes="76x76" href="assets/images/app-icons/apple-icon-76x76.png">
-	<link rel="apple-touch-icon" sizes="114x114" href="assets/images/app-icons/apple-icon-114x114.png">
-	<link rel="apple-touch-icon" sizes="120x120" href="assets/images/app-icons/apple-icon-120x120.png">
-	<link rel="apple-touch-icon" sizes="144x144" href="assets/images/app-icons/apple-icon-144x144.png">
-	<link rel="apple-touch-icon" sizes="152x152" href="assets/images/app-icons/apple-icon-152x152.png">
-	<link rel="apple-touch-icon" sizes="180x180" href="assets/images/app-icons/apple-icon-180x180.png">
-	<link rel="icon" type="image/png" sizes="192x192" href="assets/images/app-icons/android-icon-192x192.png">
-	<link rel="icon" type="image/png" sizes="32x32" href="assets/images/app-icons/favicon-32x32.png">
-	<link rel="icon" type="image/png" sizes="96x96" href="assets/images/app-icons/favicon-96x96.png">
-	<link rel="icon" type="image/png" sizes="16x16" href="assets/images/app-icons/favicon-16x16.png">
-	<meta name="msapplication-TileColor" content="#0076c8"><!-- Tile icon for Win8 (144x144 + tile color) -->
-	<meta name="msapplication-TileImage" content="assets/images/app-icons/ms-icon-144x144.png">
+	<meta name="description" content="{%= htmlWebpackPlugin.options.starkAppMetadata.description %}">
 
-	<title><%= htmlWebpackPlugin.options.starkAppMetadata.name %></title>
+	<% if (webpackConfig.htmlElements.headTags) { %>
+	<!--Configured Head Tags  -->
+	<%= webpackConfig.htmlElements.headTags %>
+	<% } %>
 
 	<!-- Stylesheets -->
 	<!-- Generated CSS stylesheets will be added by webpack: extract-text-webpack-plugin -->
@@ -63,12 +29,7 @@
 	<link href="<%= htmlWebpackPlugin.options.dllFiles.css[i] %>" rel="stylesheet">
 	<% } %>
 	<% } %>
-
-	<!--TODO uncomment this when HtmlElementsPlugin is enabled -->
-	<!--< % if (webpackConfig.htmlElements.headTags) { % >-->
-	<!-- Configured Head Tags  -->
-	<!--< % = webpackConfig.htmlElements.headTags % >-->
-	<!--< % } % >-->
+
 </head>
 
 <body class="">

diff --git a/starter/config/index-head-config.js b/starter/config/index-head-config.js
@@ -0,0 +1,57 @@
+/**
+ * Configuration for head elements added during the creation of index.html.
+ *
+ * All href attributes are added the publicPath (if exists) by default.
+ * You can explicitly hint to prefix a publicPath by setting a boolean value to a key that has
+ * the same name as the attribute you want to operate on, but prefix with =
+ *
+ * Example:
+ * { name: 'msapplication-TileImage', content: '/assets/icon/ms-icon-144x144.png', '=content': true },
+ * Will prefix the publicPath to content.
+ *
+ * { rel: 'apple-touch-icon', sizes: '57x57', href: '/assets/icon/apple-icon-57x57.png', '=href': false },
+ * Will not prefix the publicPath on href (href attributes are added by default
+ *
+ * @link https://github.com/gdi2290/angular-starter/blob/master/config/head-config.common.js
+ *
+ */
+module.exports = {
+	link: [
+		// <!-- Add to homescreen -->
+		{ rel: "manifest", href: "manifest.json" },
+		{ rel: "shortcut icon", type: "image/x-icon", href: "favicon.ico" },
+		{ rel: "apple-touch-icon", sizes: "57x57", href: "assets/images/app-icons/apple-icon-57x57.png" },
+		{ rel: "apple-touch-icon", sizes: "60x60", href: "assets/images/app-icons/apple-icon-60x60.png" },
+		{ rel: "apple-touch-icon", sizes: "72x72", href: "assets/images/app-icons/apple-icon-72x72.png" },
+		{ rel: "apple-touch-icon", sizes: "76x76", href: "assets/images/app-icons/apple-icon-76x76.png" },
+		{ rel: "apple-touch-icon", sizes: "114x114", href: "assets/images/app-icons/apple-icon-114x114.png" },
+		{ rel: "apple-touch-icon", sizes: "120x120", href: "assets/images/app-icons/apple-icon-120x120.png" },
+		{ rel: "apple-touch-icon", sizes: "144x144", href: "assets/images/app-icons/apple-icon-144x144.png" },
+		{ rel: "apple-touch-icon", sizes: "152x152", href: "assets/images/app-icons/apple-icon-152x152.png" },
+		{ rel: "apple-touch-icon", sizes: "180x180", href: "assets/images/app-icons/apple-icon-180x180.png" },
+		{ rel: "icon", type: "image/png", sizes: "192x192", href: "assets/images/app-icons/android-icon-192x192.png" },
+		{ rel: "icon", type: "image/png", sizes: "32x32", href: "assets/images/app-icons/favicon-32x32.png" },
+		{ rel: "icon", type: "image/png", sizes: "96x96", href: "assets/images/app-icons/favicon-96x96.png" },
+		{ rel: "icon", type: "image/png", sizes: "16x16", href: "assets/images/app-icons/favicon-16x16.png" }
+	],
+	meta: [
+		{ name: "viewport", content: "width=device-width, initial-scale=1" },
+		// <!-- Disable tap highlight on IE -->
+		{ name: "msapplication-tap-highlight", content: "no" },
+		// <!-- Fallback to homescreen for Chrome <39 on Android -->
+		{ name: "mobile-web-app-capable", content: "yes" },
+		{ name: "application-name", content: "Stark Starter" },
+		// <!-- Add to homescreen for Safari on iOS -->
+		{ name: "apple-mobile-web-app-capable", content: "yes" },
+		{ name: "apple-mobile-web-app-status-bar-style", content: "black" },
+		{ name: "apple-mobile-web-app-title", content: "template" },
+		// <!-- Reference: https://msdn.microsoft.com/library/dn320426(v=vs.85).aspx -->
+		{ name: "msapplication-config", content: "none" },
+		{ name: "HandheldFriendly", content: "true" },
+		// // <!-- Define the toolbar color (Android): http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android -->
+		// <!-- You can customize the default -->
+		{ name: "theme-color", content: "#0076c8" },
+		{ name: "msapplication-TileColor", content: "#0076c8" },
+		{ name: "msapplication-TileImage", content: "assets/images/app-icons/ms-icon-144x144.png" }
+	]
+};
diff --git a/starter/package.json b/starter/package.json
@@ -124,8 +124,8 @@
     "@angular/platform-browser-dynamic": "6.0.4",
     "@angular/platform-server": "6.0.4",
     "@angular/router": "6.0.4",
-    "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.0.0-alpha.2-e40780b.tgz",
-    "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-10.0.0-alpha.2-11f4fbc.tgz",
+    "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.0.0-alpha.3-c704297.tgz",
+    "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-10.0.0-alpha.3-c704297.tgz",
     "@uirouter/visualizer": "6.0.0",
     "core-js": "2.5.7",
     "eligrey-classlist-js-polyfill": "1.2.20180112",
@@ -140,8 +140,8 @@
     "zone.js": "0.8.26"
   },
   "devDependencies": {
-    "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-10.0.0-alpha.2-18ddc7a.tgz",
-    "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-10.0.0-alpha.2-18ddc7a.tgz",
+    "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-10.0.0-alpha.3-c704297.tgz",
+    "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-10.0.0-alpha.3-c704297.tgz",
     "@types/core-js": "2.5.0",
     "@types/hammerjs": "2.0.35",
     "@types/node": "8.10.15",