@boomerang-io/webapp-spa-server 0.0.11-beta.15

package/CHANGELOG.md

@@ -0,0 +1,49 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [1.7.5](https://github.ibm.com/Boomerang-Lib/boomerang.carbon.utilities/compare/@boomerang.carbon.utilities/boomerang-webapp-server@1.7.4...@boomerang.carbon.utilities/boomerang-webapp-server@1.7.5) (2020-05-26)
+
+
+### Bug Fixes
+
+* config ([c8c57f8](https://github.ibm.com/Boomerang-Lib/boomerang.carbon.utilities/commit/c8c57f81ab3d70ce5d456d53b70c889cfcac8969))
+
+
+
+
+
+## [1.7.4](https://github.ibm.com/Boomerang-Lib/boomerang.carbon.utilities/compare/@boomerang.carbon.utilities/boomerang-webapp-server@1.7.3...@boomerang.carbon.utilities/boomerang-webapp-server@1.7.4) (2020-05-26)
+
+
+### Bug Fixes
+
+* some tests ([253a0ae](https://github.ibm.com/Boomerang-Lib/boomerang.carbon.utilities/commit/253a0aee7e12d68544a66e3192c01fe65099f22a))
+
+
+
+
+
+## [1.7.3](https://github.ibm.com/Boomerang-Lib/boomerang.carbon.utilities/compare/@boomerang.carbon.utilities/boomerang-webapp-server@1.7.2...@boomerang.carbon.utilities/boomerang-webapp-server@1.7.3) (2020-05-26)
+
+
+### Bug Fixes
+
+* some tests ([167ea7b](https://github.ibm.com/Boomerang-Lib/boomerang.carbon.utilities/commit/167ea7b951f151cba28ca547b4ad8d5aecb50a04))
+
+
+
+
+
+## 1.7.2 (2020-05-26)
+
+**Note:** Version bump only for package @boomerang.carbon.utilities/boomerang-webapp-server
+
+
+
+
+
+## 1.7.1 (2020-05-26)
+
+**Note:** Version bump only for package @boomerang.carbon.utilities/boomerang-webapp-server

package/README.md

@@ -0,0 +1,107 @@
+# Webapp SPA Server
+
+Provide a consistent way to deploy Boomerang React SPAs with client-side routing into an IBM Cloud Private environment.
+
+## Features
+
+- Serve static assets
+- Client-side routing support for SPAs
+- Dynamic data and script injection into HTML document at run-time
+- Logging with [@boomerang-io/logger-middleware](https://github.com/boomerang-io/webapp-packages/src/packages/logger-middleware)
+- Cloud native health checking with [Cloud Native Health Connect](@cloudnative/health-connect)
+- New Relic monitoring
+
+## Design
+
+The server can be invoked via a command line or imported as a configurable function to be executed.
+
+- CLI - for easy stand alone use that can be invoked via a script e.g. in `npm scripts`
+- Function - create server and run it within a `node.js` file
+
+## CLI
+
+The server can be run via the CLI interface with configuration pass as options.
+
+Enter the following to see the manual
+
+```shell
+boomerang-webapp-server --help
+```
+
+Command
+
+```shell
+boomerang-webapp-server serve
+```
+
+Options
+
+| **Option**                  | **Alias** | **Description**                                                                                  |
+| :-------------------------- | :-------: | :----------------------------------------------------------------------------------------------- |
+| --cors                      |    -c     | CORS configuration using [cors](https://www.npmjs.com/package/cors) package. Accepts JSON string |
+| --disableInjectHTMLHeadData |    -d     | Toggle whether the app needs to inject data into the header. Defaults to `false`                 |
+| --dotenvFilePath            |    -p     | Path to local .env file to read in. Useful for local testing                                     |
+
+## Use as a function
+
+```javascript
+const server = require("@boomerang-io/webapp-spa-server");
+server({
+  cors: {},
+  disableInjectHTMLHeadData: true,
+});
+```
+
+## Environment Variables
+
+The following env variables are assumed to exist either from a local `.env` file or passed in to the container at runtime. If nothing is passed it, it will default to the following:
+
+|         **Variable**         |                                **Purpose**                                |       **Type**       |
+| :--------------------------: | :-----------------------------------------------------------------------: | :------------------: |
+|           APP_ROOT           |                      Root context of the application                      |        string        |
+|          BUILD_DIR           |      directory relative to the exeuction where app files are located      |        string        |
+| HTML_HEAD_INJECTED_DATA_KEYS |          Environment variables to inject into the HTML document           | comma delimited list |
+|  HTML_HEAD_INJECTED_SCRIPTS  | Scripts to inject into HTML document. Files need to be in the `BUILD_DIR` | comma delimited list |
+|      NEW_RELIC_APP_NAME      |                          App name for monitoring                          |        string        |
+|    NEW_RELIC_LICENSE_KEY     |                        License key for monitoring                         |        string        |
+|             PORT             |                         Port for server to run on                         |        number        |
+
+## Defaults
+
+Some of the values, both config and environment variables have defaults in the server that make deploying to the IBM Cloud Private work out-of-the-box.
+
+APP_ROOT
+
+- "/"
+
+BUILD_DIR
+
+- "build"
+
+CORS
+
+```json
+{
+  "origin": "*",
+  "allowedHeaders": "Content-Type, Authorization, Content-Length, X-Requested-With",
+  "methods": "DELETE,GET,OPTIONS,PATCH,POST,PUT"
+}
+```
+
+HTML_HEAD_INJECTED_DATA_KEYS
+
+- APP_ROOT
+- BASE_APPS_ENV_URL
+- BASE_LAUNCH_ENV_URL
+- BASE_SERVICE_ENV_URL
+- BASE_WWW_ENV_URL
+- CORE_APPS_ENV_URL
+- CORE_ENV_URL
+- CORE_SERVICE_ENV_URL
+- PRODUCT_APPS_ENV_URL
+- PRODUCT_ENV_URL
+- PRODUCT_SERVICE_ENV_URL
+
+PORT
+
+- 3000

package/cli.js

@@ -0,0 +1,40 @@
+#!/usr/bin/env node
+
+/**
+ * Import and execute app
+ */
+const app = require("./index");
+
+require("yargs") // eslint-disable-line
+  .command("serve", "start the webapp server", (yargs) => {
+    const { cors, dotenvFilePath, disableInjectHTMLHeadData } = yargs.argv;
+    // Import .env file
+    if (dotenvFilePath) {
+      require("dotenv").config({
+        path: require("path").join(process.cwd(), dotenvFilePath),
+      });
+    }
+    // Invoke server
+    app({ cors, disableInjectHTMLHeadData });
+  })
+  .option("cors", {
+    alias: "c",
+    describe: "CORS configuration using cors package. Accepts JSON string.",
+    type: "string",
+  })
+
+  .option("disableInjectHTMLHeadData", {
+    alias: "d",
+    describe: "Enable injection of data and scripts into the head of the HTML file.",
+    default: false,
+    type: "boolean",
+  })
+  .option("dotenvFilePath", {
+    alias: "p",
+    default: false,
+    describe: "Path to local .env file to read in. Useful for local testing.",
+    type: "string",
+  })
+  .coerce({
+    cors: JSON.parse,
+  }).argv;

package/config.js

@@ -0,0 +1,20 @@
+exports.defaultHtmlHeadInjectDataKeys = [
+  "APP_ROOT",
+  "BASE_APPS_ENV_URL",
+  "BASE_LAUNCH_ENV_URL",
+  "BASE_SERVICE_ENV_URL",
+  "BASE_WWW_ENV_URL",
+  "BOSUN_PRODUCT_APP_ENV_URL",
+  "BOSUN_PRODUCT_SERVICE_ENV_URL",
+  "CICD_PRODUCT_APP_ENV_URL",
+  "CICD_PRODUCT_SERVICE_ENV_URL",
+  "CORE_APPS_ENV_URL",
+  "CORE_ENV_URL",
+  "CORE_SERVICE_ENV_URL",
+  "NEW_RELIC_BROWSER_ID",
+  "NEW_RELIC_BROWSER_KEY",
+  "PRODUCT_STANDALONE",
+  "PRODUCT_SERVICE_ENV_URL",
+  "PRODUCT_APPS_ENV_URL",
+  "PRODUCT_ENV_URL",
+];

package/index.js

@@ -0,0 +1,228 @@
+"use strict";
+/*eslint-env node*/
+
+const path = require("path");
+const fs = require("fs");
+const cors = require("cors");
+const serialize = require("serialize-javascript");
+const boomerangLogger = require("@boomerang-io/logger-middleware")("webapp-spa-server/index.js");
+const health = require("@cloudnative/health-connect");
+const defaultHtmlHeadInjectDataKeys = require("./config").defaultHtmlHeadInjectDataKeys;
+
+// Get logger function
+const logger = boomerangLogger.logger;
+
+/**
+ * Begin exported module
+ */
+
+function createBoomerangServer({
+  corsConfig = {
+    origin: "*",
+    allowedHeaders: "Content-Type, Authorization, Content-Length, X-Requested-With",
+    methods: "DELETE,GET,OPTIONS,PATCH,POST,PUT",
+  },
+  disableInjectHTMLHeadData,
+}) {
+  /**
+   * Read in values from process.env object
+   * Set defaults for the platform for unprovided values
+   */
+  const {
+    APP_ROOT = "/",
+    PORT = 3000,
+    HTML_HEAD_INJECTED_DATA_KEYS = defaultHtmlHeadInjectDataKeys.join(),
+    NEW_RELIC_APP_NAME,
+    NEW_RELIC_LICENSE_KEY,
+    HTML_HEAD_INJECTED_SCRIPTS,
+    BUILD_DIR = "build",
+    BASE_LAUNCH_ENV_URL,
+    GA_SITE_ID,
+  } = process.env;
+  console.log("PROCESS ENV: ", process.env);
+
+  // Monitoring
+  if (NEW_RELIC_APP_NAME && NEW_RELIC_LICENSE_KEY) {
+    require("newrelic");
+  }
+
+  /**
+   * Start Express app
+   */
+  const express = require("express");
+  const app = express();
+
+  // Compression
+  const compression = require("compression");
+  app.use(compression());
+
+  // Logging
+  app.use(boomerangLogger.middleware);
+
+  // Security
+  const helmet = require("helmet");
+  app.use(helmet());
+  app.disable("x-powered-by");
+  app.use(cors(corsConfig));
+
+  // Parsing
+  const bodyParser = require("body-parser");
+  app.use(bodyParser.urlencoded({ extended: true }));
+
+  // Initialize healthchecker and add routes
+  const healthchecker = new health.HealthChecker();
+  app.use("/health", health.LivenessEndpoint(healthchecker));
+  app.use("/ready", health.ReadinessEndpoint(healthchecker));
+
+  // Create endpoint for the app serve static assets
+  const appRouter = express.Router();
+
+  /**
+   * Next two routes are needed for serving apps with client-side routing
+   * Do NOT return index.html file by default if `disableInjectHTMLHeadData = true`. We need append data to it.
+   * It will be returned on the second route
+   * https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-apps-with-client-side-routing
+   */
+  console.log("0: ",GA_SITE_ID,BASE_LAUNCH_ENV_URL, "URL and ID");
+
+  if (!disableInjectHTMLHeadData) {
+    appRouter.use(
+      "/",
+      express.static(path.join(process.cwd(), BUILD_DIR), {
+        index: false,
+      })
+    );
+    appRouter.get("/*", (req, res) =>
+      injectEnvDataAndScriptsIntoHTML(
+        res,
+        BUILD_DIR,
+        HTML_HEAD_INJECTED_DATA_KEYS,
+        HTML_HEAD_INJECTED_SCRIPTS,
+        APP_ROOT,
+        GA_SITE_ID,
+        BASE_LAUNCH_ENV_URL
+      )
+    );
+  } else {
+    appRouter.use("/", express.static(path.join(process.cwd(), BUILD_DIR)));
+  }
+
+  app.use(APP_ROOT, appRouter);
+
+  // Start server on the specified port and binding host
+  app.listen(PORT, "0.0.0.0", function () {
+    logger.debug("server starting on", PORT);
+    logger.debug(`serving on root context: ${APP_ROOT}`);
+    logger.info(`View app: http://localhost:${PORT}${APP_ROOT}`);
+  });
+
+  // Return server if needed to be used in an app
+  return app;
+}
+
+/**
+ * Start utility functions
+ */
+
+/**
+ * Add JSON data and scripts to the html file based on environment. Enables same docker image to be used in any environment
+ * https://medium.com/@housecor/12-rules-for-professional-javascript-in-2015-f158e7d3f0fc
+ * https://stackoverflow.com/questions/33027089/res-sendfile-in-node-express-with-passing-data-along
+ * @param {function} res - Express response function
+ * @param {string} buildDir - build directory for building up path to index.html file
+ * @param {string} injectedDataKeys - string of comma delimited values
+ * @param {string} injectedScripts - string of comma delimited values
+ * @param {string} appRoot - root context off app. Used for script injection
+ * @param {string} gaSiteId - siteID to be injected on scripts to support GA
+ * @param {string} baseLaunchUrl - base url to determine GA primaryCategory
+ */
+function injectEnvDataAndScriptsIntoHTML(
+  res,
+  buildDir,
+  injectedDataKeys,
+  injectedScripts,
+  appRoot,
+  gaSiteId,
+  baseLaunchUrl
+) {
+  /**
+   * Create objects to be injected into application via the HEAD tag
+   */
+  // Build script for GA integration
+  console.log("1: ",gaSiteId, "GA Site ID");
+  const headScripstGA = Boolean(gaSiteId)
+    ? `<script type="text/javascript">
+      window.idaPageIsSPA = true;
+      window._ibmAnalytics = {
+        settings: {
+          name: "IBM_Services_Essentials",
+          isSpa: true,
+          tealiumProfileName: "ibm-web-app",
+        },
+        trustarc: {
+          isCookiePreferencesButtonAlwaysOn: false,
+        },
+      };
+      digitalData = {
+        page: {
+          pageInfo: {
+            ibm: {
+              siteID: '${gaSiteId}',
+            }
+          },
+          category: {
+            primaryCategory: 'PC100'
+          }
+        }
+      };
+    </script>
+    <script src="//1.www.s81c.com/common/stats/ibm-common.js" type="text/javascript"></script>
+    `
+    : "";
+  // Build up object of external data to append
+  const headInjectedData = injectedDataKeys.split(",").reduce((acc, key) => {
+    acc[key] = process.env[key];
+    return acc;
+  }, {});
+
+  // Build up string of scripts to append, absolute path
+  const headScriptsTags = injectedScripts
+    ? injectedScripts
+        .split(",")
+        .reduce((acc, currentValue) => `${acc}<script src="${appRoot}/${currentValue}"></script>`, "")
+    : "";
+  // Set the response type so browser interprets it as an html file
+  res.type(".html");
+
+  // Read in HTML file and add callback functions for EventEmitter events produced by ReadStream
+  fs.createReadStream(path.join(process.cwd(), buildDir, "index.html"))
+    .on("end", () => {
+      res.end();
+    })
+    .on("error", (e) => logger.error(e))
+    .on("data", (chunk) => res.write(addHeadData(chunk)));
+
+  /**
+   * Convert buffer to string and replace closing head tag with env-specific data and additional scripts
+   * Serialize data for security
+   * https://medium.com/node-security/the-most-common-xss-vulnerability-in-react-js-applications-2bdffbcc1fa0
+   * @param {Buffer} chunk
+   * @return {string} replaced string with data interopolated
+   */
+  console.log("2: ", headScripstGA, "GA script");
+  function addHeadData(chunk) {
+    return chunk.toString().replace(
+      "</head>",
+      `<script>
+        window._SERVER_DATA = ${serialize(headInjectedData, {
+          isJSON: true,
+        })};
+      </script>
+      ${headScripstGA}
+      ${headScriptsTags}
+      </head>`
+    );
+  }
+}
+
+module.exports = createBoomerangServer;

package/newrelic.js

@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * New Relic agent configuration.
+ *
+ * See lib/config.default.js in the agent distribution for a more complete
+ * description of configuration variables and their potential values.
+ */
+exports.config = {
+  /**
+   * Array of application names.
+   */
+  app_name: process.env.NEW_RELIC_APP_NAME,
+  /**
+   * Your New Relic license key.
+   */
+  license_key: process.env.NEW_RELIC_LICENSE_KEY,
+  proxy_host: process.env.NEW_RELIC_PROXY_HOST,
+  proxy_port: process.env.NEW_RELIC_PROXY_PORT,
+  logging: {
+    /**
+     * Level at which to log. 'trace' is most useful to New Relic when diagnosing
+     * issues with the agent, 'info' and higher will impose the least overhead on
+     * production applications.
+     */
+    level: "info",
+  },
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@boomerang-io/webapp-spa-server",
+  "description": "Webapp Server for React-based SPA w/ client-side routing",
+  "version": "0.0.11-beta.15",
+  "author": {
+    "name": "Tim Bula",
+    "email": "timrbula@gmail.com"
+  },
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:boomerang-io/webapp-packages",
+    "directory": "packages/webapp-spa-server"
+  },
+  "homepage": "https://github.com/boomerang-io/webapp-packages",
+  "bugs": {
+    "url": "https://github.com/boomerang-io/webapp-packages/issues"
+  },
+  "bin": {
+    "boomerang-webapp-server": "./cli.js"
+  },
+  "main": "index.js",
+  "scripts": {
+    "dev": "nodemon --exec npm run-script start",
+    "start": "node tester.js"
+  },
+  "dependencies": {
+    "@boomerang-io/logger-middleware": "0.0.1",
+    "@cloudnative/health-connect": "1.0.2",
+    "body-parser": "1.18.3",
+    "compression": "1.7.3",
+    "cors": "2.8.5",
+    "dotenv": "6.2.0",
+    "express": "4.16.4",
+    "helmet": "^3.23.1",
+    "newrelic": "^7.3.1",
+    "serialize-javascript": "4.0.0",
+    "yargs": "^16.2.0"
+  },
+  "devDependencies": {
+    "nodemon": "1.18.10"
+  },
+  "keywords": [
+    "express",
+    "node",
+    "server",
+    "spa"
+  ]
+}

package/tester.js

@@ -0,0 +1,5 @@
+// Used for development
+require("dotenv").config({
+  path: "./.env.local",
+});
+require("./index")({});