[node-headless-ssr-proxy] [node-headless-ssr-experience-edge] Provide ability to use .env (#977)

* Created a .env file with all the variables we pull from process.env in the config.js file (with empty values). Added the dotenv package to load the variables from the .env file.

* Implemented the same changes to node-headless-ssr-experience-edge template. Added the require(dotenv).config() to the app entry points (index.js).

* Added comments on how to use the feature and changed .env files to .env.example

* Revert "Added comments on how to use the feature and changed .env files to .env.example"

This reverts commit 52bb689.

* Added PORT variable to node-headless-ssr-proxy/.env

* Created a .env file with all the variables we pull from process.env (with empty values). Added the dotenv package to load the variables from the .env file. Calling the dotenv config() in the index.js.

* Added new line at the end to node-headless-ssr-experience-edge/.env

Author: sc-nikolaoslazaridis

packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/.env

@@ -0,0 +1,6 @@
+SITECORE_JSS_APP_NAME=
+SITECORE_JSS_SERVER_BUNDLE=
+SITECORE_EXPERIENCE_EDGE_ENDPOINT=
+SITECORE_API_KEY=
+PORT=
+DEFAULT_LANGUAGE=

packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/index.js

@@ -1,7 +1,8 @@
 const express = require('express');
 const compression = require('compression');
+require('dotenv').config();
 const { GraphQLLayoutService } = require('@sitecore-jss/sitecore-jss/layout');
-const { GraphQLDictionaryService} = require('@sitecore-jss/sitecore-jss/i18n');
+const { GraphQLDictionaryService } = require('@sitecore-jss/sitecore-jss/i18n');
 const config = require('./config');
 
 const server = express();
@@ -89,7 +90,9 @@ server.use(async (req, res) => {
 
     const viewBag = { dictionary: {} };
 
-    viewBag.dictionary = await dictionaryService.fetchDictionaryData(layoutData.sitecore.context.language);
+    viewBag.dictionary = await dictionaryService.fetchDictionaryData(
+      layoutData.sitecore.context.language
+    );
 
     renderView(
       (err, result) => {

packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/package.json

@@ -26,7 +26,8 @@
   "dependencies": {
     "@sitecore-jss/sitecore-jss": "^21.0.0-canary",
     "compression": "^1.7.4",
-    "express": "^4.17.1"
+    "express": "^4.17.1",
+    "dotenv": "^16.0.0"
   },
   "private": true
 }

packages/create-sitecore-jss/src/templates/node-headless-ssr-proxy/.env

@@ -0,0 +1,8 @@
+SITECORE_JSS_APP_NAME=
+SITECORE_JSS_SERVER_BUNDLE=
+SITECORE_API_HOST=
+SITECORE_API_KEY=
+SITECORE_LAYOUT_SERVICE_ROUTE=
+SITECORE_PATH_REWRITE_EXCLUDE_ROUTES=
+SITECORE_ENABLE_DEBUG=
+PORT=

packages/create-sitecore-jss/src/templates/node-headless-ssr-proxy/config.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 const { RestDictionaryService } = require('@sitecore-jss/sitecore-jss/i18n');
-const httpAgents = require("./httpAgents");
+const httpAgents = require('./httpAgents');
 
 /**
  * The JSS application name defaults to providing part of the bundle path as well as the dictionary service endpoint.
@@ -17,7 +17,7 @@ const serverBundle = require(bundlePath);
 
 httpAgents.setUpDefaultAgents(serverBundle);
 
-const apiHost = process.env.SITECORE_API_HOST || 'http://my.sitecore.host'
+const apiHost = process.env.SITECORE_API_HOST || 'http://my.sitecore.host';
 
 appName = appName || serverBundle.appName;
 
@@ -96,16 +96,16 @@ const config = {
     // when proxying to a SSL Sitecore instance.
     // This is a major security issue, so NEVER EVER set this to false
     // outside local development. Use a real CA-issued certificate.
-		secure: true,
-		xfwd: true
-	},
-	/**
-	 * Custom headers handling.
-	 * You can remove different headers from proxy response.
-	*/
-	setHeaders: (req, serverRes, proxyRes) => {
-		delete proxyRes.headers['content-security-policy'];
-	},
+    secure: true,
+    xfwd: true,
+  },
+  /**
+   * Custom headers handling.
+   * You can remove different headers from proxy response.
+   */
+  setHeaders: (req, serverRes, proxyRes) => {
+    delete proxyRes.headers['content-security-policy'];
+  },
   /**
    * Custom error handling in case our app fails to render.
    * Return null to pass through server response, or { content, statusCode }
@@ -139,7 +139,7 @@ const config = {
       return {};
     }
 
-    return dictionaryService.fetchDictionaryData(language).then(phrases => {
+    return dictionaryService.fetchDictionaryData(language).then((phrases) => {
       const viewBag = {
         dictionary: phrases,
       };

packages/create-sitecore-jss/src/templates/node-headless-ssr-proxy/index.js

@@ -1,5 +1,6 @@
 const express = require('express');
 const compression = require('compression');
+require('dotenv').config();
 const scProxy = require('@sitecore-jss/sitecore-jss-proxy').default;
 const config = require('./config');
 const cacheMiddleware = require('./cacheMiddleware');
@@ -38,7 +39,7 @@ server.use((req, res, next) => {
   }
 
   next();
-})
+});
 
 // For any other requests, we render app routes server-side and return them
 server.use('*', scProxy(config.serverBundle.renderView, config, config.serverBundle.parseRouteUrl));

packages/create-sitecore-jss/src/templates/node-headless-ssr-proxy/package.json

@@ -29,7 +29,8 @@
     "agentkeepalive": "^4.1.3",
     "compression": "~1.7.3",
     "express": "~4.16.4",
-    "memory-cache": "^0.2.0"
+    "memory-cache": "^0.2.0",
+    "dotenv": "^16.0.0"
   },
   "private": true
 }