First Handlebars web part demo sample

config/config.json

@@ -1,12 +1,13 @@
 {
-  "entries": [
-    {
-      "entry": "./lib/webparts/handlebarsDemo/HandlebarsDemoWebPart.js",
-      "manifest": "./src/webparts/handlebarsDemo/HandlebarsDemoWebPart.manifest.json",
-      "outputPath": "./dist/handlebars-demo.bundle.js"
-    }
-  ],
-  "externals": {},
+  "entries": [{
+    "entry": "./lib/webparts/handlebarsDemo/HandlebarsDemoWebPart.js",
+    "manifest": "./src/webparts/handlebarsDemo/HandlebarsDemoWebPart.manifest.json",
+    "outputPath": "./dist/handlebars-demo.bundle.js"
+  }],
+  "externals": {
+    // "handlebars": "https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.amd.js"
+    "handlebars": "./node_modules/handlebars/dist/handlebars.amd.min.json"
+  },
   "localizedResources": {
     "handlebarsDemoStrings": "webparts/handlebarsDemo/loc/{locale}.js"
   }

config/copy-static-assets.json

@@ -0,0 +1,6 @@
+// copy-static-assets.json
+{
+  "includeExtensions": [
+    "hbs"
+  ]
+}

gulpfile.js

@@ -3,4 +3,22 @@
 const gulp = require('gulp');
 const build = require('@microsoft/sp-build-web');
 
+// Custom config section starts here
+const loaderConfig = [{
+  test: /\.hbs/,
+  loader: "handlebars-template-loader"
+}];
+
+
+build.configureWebpack.mergeConfig({
+  additionalConfiguration: (generatedConfiguration) => {
+    generatedConfiguration.module.loaders.push([
+      { test: /\.hbs/, loader: "handlebars-template-loader" }
+    ]);
+
+    return generatedConfiguration;
+
+  }
+});
+
 build.initialize(gulp);

package.json

@@ -9,7 +9,8 @@
     "@microsoft/sp-client-base": "~1.0.0",
     "@microsoft/sp-core-library": "~1.0.0",
     "@microsoft/sp-webpart-base": "~1.0.0",
-    "@types/webpack-env": ">=1.12.1 <1.14.0"
+    "@types/webpack-env": ">=1.12.1 <1.14.0",
+    "handlebars": "^4.0.6"
   },
   "devDependencies": {
     "@microsoft/sp-build-web": "~1.0.0",

src/templates/HelloWorld.hbs

@@ -0,0 +1,14 @@
+<div class="{{styles.helloWorld}}">
+  <div class="{{styles.container}}">
+    <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white {{styles.row}}">
+      <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
+        <span class="ms-font-xl ms-fontColor-white">Welcome to SharePoint!</span>
+        <p class="ms-font-l ms-fontColor-white">Customize SharePoint experiences using Web Parts.</p>
+        <p class="ms-font-l ms-fontColor-white">{{description}}</p>
+        <a href="https://aka.ms/spfx" class="{{styles.button}}">
+          <span class="{{styles.label}}">Learn more</span>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>

src/webparts/handlebarsDemo/HandlebarsDemoWebPart.ts

@@ -10,24 +10,25 @@ import styles from './HandlebarsDemo.module.scss';
 import * as strings from 'handlebarsDemoStrings';
 import { IHandlebarsDemoWebPartProps } from './IHandlebarsDemoWebPartProps';
 
+// Importing handlebars
+import * as Handlebars from 'handlebars';
+
+// load and precompile template
+var HelloWorldTemplate = <HandlebarsTemplateDelegate>require('../../templates/HelloWorld.hbs');
+
 export default class HandlebarsDemoWebPart extends BaseClientSideWebPart<IHandlebarsDemoWebPartProps> {
 
   public render(): void {
-    this.domElement.innerHTML = `
-      <div class="${styles.helloWorld}">
-        <div class="${styles.container}">
-          <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
-            <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
-              <span class="ms-font-xl ms-fontColor-white">Welcome to SharePoint!</span>
-              <p class="ms-font-l ms-fontColor-white">Customize SharePoint experiences using Web Parts.</p>
-              <p class="ms-font-l ms-fontColor-white">${escape(this.properties.description)}</p>
-              <a href="https://aka.ms/spfx" class="${styles.button}">
-                <span class="${styles.label}">Learn more</span>
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>`;
+
+    // bind data to template
+    var data = {
+      styles: styles,
+      description: this.properties.description
+    }
+
+    // compile and add template
+    this.domElement.innerHTML = HelloWorldTemplate(data);
+
   }
 
   protected get dataVersion(): Version {

typings.json

@@ -0,0 +1,5 @@
+{
+  "globalDependencies": {
+    "handlebars": "registry:dt/handlebars#4.0.5+20160810231743"
+  }
+}