[RAV] Support .env file (#999)

* [RAV] Support .env file * update .env comments * update angular.json * fix linting issues * apply changes
Sitecore · May 2, 2022 · 3dabcdd · 3dabcdd
1 parent c982b99
commit 3dabcdd
Show file tree

Hide file tree

Showing 44 changed files with 303 additions and 190 deletions.
diff --git a/packages/create-sitecore-jss/src/templates/angular/.env b/packages/create-sitecore-jss/src/templates/angular/.env
@@ -0,0 +1,33 @@
+# Your Sitecore API key is needed to build the app. Typically, the API key is
+# defined in `scjssconfig.json` (as `sitecore.apiKey`). This file may not exist
+# when building locally (if you've never run `jss setup`), or when building in a
+# higher environment (since `scjssconfig.json` is ignored from source control).
+# In this case, use this environment variable to provide the value at build time.
+SITECORE_API_KEY=
+
+# Your Sitecore API hostname is needed to build the app. Typically, the API host is
+# defined in `scjssconfig.json` (as `sitecore.layoutServiceHost`). This file may
+# not exist when building locally (if you've never run `jss setup`), or when building
+# in a higher environment (since `scjssconfig.json` is ignored from source control).
+# In this case, use this environment variable to provide the value at build time.
+SITECORE_API_HOST=
+
+# Your GraphQL Edge endpoint. This is required for Sitecore Experience Edge.
+# For Sitecore XM, this is typically optional. By default, the endpoint is calculated using
+# the resolved Sitecore API hostname + the `graphQLEndpointPath` defined in your `package.json`.
+GRAPH_QL_ENDPOINT=
+
+# Your default app language.
+DEFAULT_LANGUAGE=
+
+# The way in which layout and dictionary data is fetched from Sitecore
+FETCH_WITH=<%- fetchWith %>
+
+# Sitecore JSS npm packages utilize the debug module for debug logging.
+# https://www.npmjs.com/package/debug
+# Set the DEBUG environment variable to 'sitecore-jss:*' to see all logs:
+#DEBUG=sitecore-jss:*
+# Or be selective and show for example only layout service logs:
+#DEBUG=sitecore-jss:layout
+# Or everything BUT layout service logs:
+#DEBUG=sitecore-jss:*,-sitecore-jss:layout
diff --git a/packages/create-sitecore-jss/src/templates/angular/angular.json b/packages/create-sitecore-jss/src/templates/angular/angular.json
@@ -12,7 +12,7 @@
       "projectType": "application",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-builders/custom-webpack:browser",
           "options": {
             "outputPath": "dist/browser/",
             "index": "src/index.html",
@@ -31,7 +31,10 @@
             "allowedCommonJsDependencies": [
               "zen-observable",
               "js-sha256"
-            ]
+            ],
+            "customWebpackConfig": {
+              "path": "./webpack.config.js"
+            }
           },
           "configurations": {
             "production": {
@@ -60,7 +63,7 @@
           }
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular-builders/custom-webpack:dev-server",
           "options": {
             "browserTarget": "<%- appName %>:build",
             "port": 3000,
@@ -127,7 +130,7 @@
         }
       }
     },
-    "<%- appName %>-e2e": {
+    "angular-e2e": {
       "root": "",
       "sourceRoot": "",
       "projectType": "application",

diff --git a/packages/create-sitecore-jss/src/templates/angular/package.json b/packages/create-sitecore-jss/src/templates/angular/package.json
@@ -33,7 +33,7 @@
     "build:client": "cross-env-shell ng build --prod --deploy-url $npm_package_config_sitecoreDistPath/browser/ --output-path=$npm_package_config_buildArtifactsPath/browser/",
     "build:server": "cross-env-shell ng run <%- appName %>:server:production --output-path=$npm_package_config_buildArtifactsPath/server --output-hashing=none --bundle-dependencies true",
     "postbuild:server": "move-cli ./dist/server/main.js ./dist/server.bundle.js && del-cli ./dist/server",
-    "bootstrap": "cross-env-shell FETCH_WITH=<%- fetchWith %> \"ts-node --project src/tsconfig.webpack-server.json scripts/bootstrap.ts\"",
+    "bootstrap": "ts-node --project src/tsconfig.webpack-server.json scripts/bootstrap.ts",
     "graphql:update": "ts-node --project src/tsconfig.webpack-server.json ./scripts/update-graphql-fragment-data.ts"
   },
   "private": true,
@@ -63,7 +63,6 @@
     "@apollo/client": "^3.3.12",
     "@ngx-translate/core": "~13.0.0",
     "@ngx-translate/http-loader": "~6.0.0",
-    "@sitecore-jss/sitecore-jss": "^21.0.0-canary",
     "@sitecore-jss/sitecore-jss-angular": "^21.0.0-canary",
     "apollo-angular": "~2.4.0",
     "bootstrap": "^4.3.1",
@@ -77,6 +76,7 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
+    "@angular-builders/custom-webpack": "^11.1.1",
     "@angular-devkit/build-angular": "0.1102.18",
     "@angular-eslint/builder": "2.0.2",
     "@angular-eslint/eslint-plugin": "2.0.2",
@@ -103,6 +103,8 @@
     "cookie-parser": "~1.4.5",
     "cross-env": "~7.0.3",
     "del-cli": "^3.0.1",
+    "dotenv": "^16.0.0",
+    "dotenv-webpack": "^7.1.0",
     "enhanced-resolve": "5.7.0",
     "eslint": "^7.22.0",
     "eslint-plugin-import": "2.22.1",

diff --git a/packages/create-sitecore-jss/src/templates/angular/scripts/bootstrap.ts b/packages/create-sitecore-jss/src/templates/angular/scripts/bootstrap.ts
@@ -1,3 +1,4 @@
+import 'dotenv/config';
 import { constants } from '@sitecore-jss/sitecore-jss-angular';
 import { generateConfig } from './generate-config';
 const projects = require('../angular.json').projects;

diff --git a/packages/create-sitecore-jss/src/templates/angular/scripts/disconnected-mode-proxy.ts b/packages/create-sitecore-jss/src/templates/angular/scripts/disconnected-mode-proxy.ts
@@ -11,20 +11,21 @@ import * as fs from 'fs';
 import { join } from 'path';
 import { createDefaultDisconnectedServer, DisconnectedServerOptions } from '@sitecore-jss/sitecore-jss-dev-tools';
 import { ManifestInstance } from '@sitecore-jss/sitecore-jss-dev-tools';
-const packageJson = require('../package.json');
+import { environment } from '../src/environments/environment';
 
-const config = (packageJson as {
+const config = (environment as {
   [key: string]: unknown;
-  config: { [key: string]: unknown; appName: string; language: string };
-}).config;
+  jssAppName: string;
+  defaultLanguage: string
+});
 
 const touchToReloadFilePath = 'src/environments/environment.ts';
 
 const proxyOptions: DisconnectedServerOptions = {
   appRoot: join(__dirname, '..'),
-  appName: config.appName,
+  appName: config.jssAppName,
   watchPaths: ['./data'],
-  language: config.language,
+  language: config.defaultLanguage,
   // Additional transpilation is not needed
   requireArg: null,
   port: 3043,

diff --git a/packages/create-sitecore-jss/src/templates/angular/src/app/jss-data-fetcher.service.ts b/packages/create-sitecore-jss/src/templates/angular/src/app/jss-data-fetcher.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
-import { HttpResponse } from '@sitecore-jss/sitecore-jss';
+import { HttpResponse } from '@sitecore-jss/sitecore-jss-angular';
 import { Observable } from 'rxjs';
 
 @Injectable()

diff --git a/packages/create-sitecore-jss/src/templates/angular/src/app/lib/dictionary-service-factory.ts b/packages/create-sitecore-jss/src/templates/angular/src/app/lib/dictionary-service-factory.ts
@@ -1,34 +1,30 @@
-import { 
-  DictionaryService, 
-<% if (fetchWith.toUpperCase() === 'GRAPHQL') { -%>
-  GraphQLDictionaryService
-<% } else if (fetchWith.toUpperCase() === 'REST') { -%>
-  RestDictionaryService
-<% } -%>  
+import {
+  DictionaryService,
+  GraphQLDictionaryService,
+  RestDictionaryService,
+  constants,
 } from '@sitecore-jss/sitecore-jss-angular';
 import { environment as env } from '../../environments/environment';
 
 export class DictionaryServiceFactory {
   create(): DictionaryService {
-  <% if (fetchWith.toUpperCase() === 'GRAPHQL') { -%>
-  return new GraphQLDictionaryService({
-    endpoint: env.graphQLEndpoint,
-    apiKey: env.sitecoreApiKey,
-    siteName: env.jssAppName,
-    /*
-    The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current
-    app. If your Sitecore instance only has 1 JSS App, you can specify the root item ID here;
-    otherwise, the service will attempt to figure out the root item for the current JSS App using GraphQL and app name.
-    rootItemId: '{GUID}'
-    */
-  });
-  <% } else if (fetchWith.toUpperCase() === 'REST') { -%>
-  return new RestDictionaryService({
-    apiHost: env.sitecoreApiHost,
-    apiKey: env.sitecoreApiKey,
-    siteName: env.jssAppName,
-  });
-  <% } -%>
+    return process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL
+      ? new GraphQLDictionaryService({
+          endpoint: env.graphQLEndpoint,
+          apiKey: env.sitecoreApiKey,
+          siteName: env.jssAppName,
+          /*
+            The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current
+            app. If your Sitecore instance only has 1 JSS App, you can specify the root item ID here;
+            otherwise, the service will attempt to figure out the root item for the current JSS App using GraphQL and app name.
+            rootItemId: '{GUID}'
+          */
+        })
+      : new RestDictionaryService({
+          apiHost: env.sitecoreApiHost,
+          apiKey: env.sitecoreApiKey,
+          siteName: env.jssAppName,
+        });
   }
 }
 

diff --git a/packages/create-sitecore-jss/src/templates/angular/src/app/lib/layout-service-factory.ts b/packages/create-sitecore-jss/src/templates/angular/src/app/lib/layout-service-factory.ts
@@ -1,29 +1,25 @@
-import { 
+import {
   LayoutService,
-<% if (fetchWith.toUpperCase() === 'GRAPHQL') { -%>
-  GraphQLLayoutService
-<% } else if (fetchWith.toUpperCase() === 'REST') { -%>
-  RestLayoutService
-<% } -%> 
+  GraphQLLayoutService,
+  RestLayoutService,
+  constants,
 } from '@sitecore-jss/sitecore-jss-angular';
 import { environment } from '../../environments/environment';
 
 export class LayoutServiceFactory {
   create(): LayoutService {
-    <% if (fetchWith.toUpperCase() === 'GRAPHQL') { -%>
-    return new GraphQLLayoutService({
-      endpoint: environment.graphQLEndpoint,
-      apiKey: environment.sitecoreApiKey,
-      siteName: environment.jssAppName,
-    });
-    <% } else if (fetchWith.toUpperCase() === 'REST') { -%>
-    return new RestLayoutService({
-      apiHost: environment.sitecoreApiHost,
-      apiKey: environment.sitecoreApiKey,
-      siteName: environment.jssAppName,
-      configurationName: 'default',
-    });
-    <% } -%>
+    return process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL
+      ? new GraphQLLayoutService({
+          endpoint: environment.graphQLEndpoint,
+          apiKey: environment.sitecoreApiKey,
+          siteName: environment.jssAppName,
+        })
+      : new RestLayoutService({
+          apiHost: environment.sitecoreApiHost,
+          apiKey: environment.sitecoreApiKey,
+          siteName: environment.jssAppName,
+          configurationName: 'default',
+        });
   }
 }
 

diff --git a/packages/create-sitecore-jss/src/templates/angular/webpack.config.js b/packages/create-sitecore-jss/src/templates/angular/webpack.config.js
@@ -0,0 +1,7 @@
+const Dotenv = require("dotenv-webpack");
+
+module.exports = {
+  plugins: [
+    new Dotenv(),
+  ],
+}
diff --git a/...es/create-sitecore-jss/src/templates/nextjs-styleguide/scripts/disconnected-mode-proxy.ts b/...es/create-sitecore-jss/src/templates/nextjs-styleguide/scripts/disconnected-mode-proxy.ts
@@ -12,17 +12,17 @@
 import fs from 'fs';
 import path from 'path';
 import { createDefaultDisconnectedServer } from '@sitecore-jss/sitecore-jss-dev-tools';
-import { config } from '../package.json';
+import config from '../src/temp/config';
 
 const touchToReloadFilePath = 'src/temp/config.js';
 
 const serverOptions = {
   appRoot: path.join(__dirname, '..'),
-  appName: config.appName,
+  appName: config.jssAppName,
   // Prevent require of ./sitecore/definitions/config.js, because ts-node is running
   requireArg: null,
   watchPaths: ['./data'],
-  language: config.language,
+  language: config.defaultLanguage,
   port: Number(process.env.PROXY_PORT) || 3042,
   onManifestUpdated: () => {
     // if we can resolve the config file, we can alter it to force reloading the app automatically

diff --git a/...mplates/nextjs-styleguide/src/lib/sitemap-fetcher/plugins/disconnected-sitemap-service.ts b/...mplates/nextjs-styleguide/src/lib/sitemap-fetcher/plugins/disconnected-sitemap-service.ts
@@ -1,4 +1,4 @@
-import { DisconnectedSitemapService } from '@sitecore-jss/sitecore-jss-nextjs';
+import { DisconnectedSitemapService, constants } from '@sitecore-jss/sitecore-jss-nextjs';
 import { ManifestInstance } from '@sitecore-jss/sitecore-jss-dev-tools';
 import { SitemapFetcherPlugin } from '..';
 
@@ -16,7 +16,7 @@ class DisconnectedSitemapServicePlugin implements SitemapFetcherPlugin {
    */
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   getManifest() {
-    if (process.env.JSS_MODE !== 'disconnected') return null;
+    if (process.env.JSS_MODE !== constants.JSS_MODE.DISCONNECTED) return null;
 
     try {
       // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -34,7 +34,7 @@ class DisconnectedSitemapServicePlugin implements SitemapFetcherPlugin {
     // If we are in Export mode
     if (process.env.EXPORT_MODE) {
       // Disconnected Export mode
-      if (process.env.JSS_MODE === 'disconnected') {
+      if (process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED) {
         return this._disconnectedSitemapService.fetchExportSitemap();
       }
     }

diff --git a/packages/create-sitecore-jss/src/templates/nextjs/.env b/packages/create-sitecore-jss/src/templates/nextjs/.env
@@ -36,6 +36,9 @@ SITECORE_API_HOST=
 # the resolved Sitecore API hostname + the `graphQLEndpointPath` defined in your `package.json`.
 GRAPH_QL_ENDPOINT=
 
+# Your default app language.
+DEFAULT_LANGUAGE=
+
 # The way in which layout and dictionary data is fetched from Sitecore
 FETCH_WITH=<%- fetchWith %>
 

diff --git a/packages/create-sitecore-jss/src/templates/nextjs/package.json b/packages/create-sitecore-jss/src/templates/nextjs/package.json
@@ -56,6 +56,7 @@
     "chokidar": "~3.1.1",
     "constant-case": "^3.0.4",
     "cross-env": "~6.0.3",
+    "dotenv": "^16.0.0",
     "eslint": "^7.32.0",
     "eslint-config-next": "^11.0.1",
     "eslint-config-prettier": "^6.15.0",

diff --git a/packages/create-sitecore-jss/src/templates/nextjs/scripts/bootstrap.ts b/packages/create-sitecore-jss/src/templates/nextjs/scripts/bootstrap.ts
@@ -1,3 +1,4 @@
+import 'dotenv/config';
 import { generateConfig } from './generate-config';
 import { constants } from '@sitecore-jss/sitecore-jss-nextjs';
 import chalk from 'chalk';

diff --git a/packages/create-sitecore-jss/src/templates/nextjs/scripts/generate-config.ts b/packages/create-sitecore-jss/src/templates/nextjs/scripts/generate-config.ts
@@ -81,5 +81,6 @@ function transformPackageConfig() {
   return {
     jssAppName: packageConfig.config.appName,
     graphQLEndpointPath: packageConfig.config.graphQLEndpointPath,
+    defaultLanguage: packageConfig.config.language || 'en',
   };
 }
diff --git a/packages/create-sitecore-jss/src/templates/nextjs/src/lib/dictionary-service-factory.ts b/packages/create-sitecore-jss/src/templates/nextjs/src/lib/dictionary-service-factory.ts
@@ -2,12 +2,13 @@ import {
   DictionaryService,
   RestDictionaryService,
   GraphQLDictionaryService,
+  constants,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import config from 'temp/config';
 
 export class DictionaryServiceFactory {
   create(): DictionaryService {
-    return process.env.FETCH_WITH === 'GraphQL'
+    return process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL
       ? new GraphQLDictionaryService({
           endpoint: config.graphQLEndpoint,
           apiKey: config.sitecoreApiKey,

diff --git a/packages/create-sitecore-jss/src/templates/nextjs/src/lib/layout-service-factory.ts b/packages/create-sitecore-jss/src/templates/nextjs/src/lib/layout-service-factory.ts
@@ -2,12 +2,13 @@ import {
   LayoutService,
   RestLayoutService,
   GraphQLLayoutService,
+  constants,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import config from 'temp/config';
 
 export class LayoutServiceFactory {
   create(): LayoutService {
-    return process.env.FETCH_WITH === 'GraphQL'
+    return process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL
       ? new GraphQLLayoutService({
           endpoint: config.graphQLEndpoint,
           apiKey: config.sitecoreApiKey,

diff --git a/...reate-sitecore-jss/src/templates/nextjs/src/lib/page-props-factory/plugins/normal-mode.ts b/...reate-sitecore-jss/src/templates/nextjs/src/lib/page-props-factory/plugins/normal-mode.ts
@@ -3,9 +3,9 @@ import { DictionaryService, LayoutService } from '@sitecore-jss/sitecore-jss-nex
 import { dictionaryServiceFactory } from 'lib/dictionary-service-factory';
 import { layoutServiceFactory } from 'lib/layout-service-factory';
 import { SitecorePageProps } from 'lib/page-props';
+import config from 'temp/config';
 import { Plugin, isServerSidePropsContext } from '..';
 import { extractPath } from '../extract-path';
-import pkg from '../../../../package.json';
 
 class NormalModePlugin implements Plugin {
   private dictionaryService: DictionaryService;
@@ -27,8 +27,8 @@ class NormalModePlugin implements Plugin {
     // Get normalized Sitecore item path
     const path = extractPath(context.params);
 
-    // Use context locale if Next.js i18n is configured, otherwise use language defined in package.json
-    props.locale = context.locale ?? pkg.config.language;
+    // Use context locale if Next.js i18n is configured, otherwise use default language
+    props.locale = context.locale ?? config.defaultLanguage;
 
     // Fetch layout data, passing on req/res for SSR
     props.layoutData = await this.layoutService.fetchLayoutData(