[templates/nextjs] Add .env.* support (#1741)

* add .env.* support * update changelog * add dotenv-flow * remove extra cross-env * remove conflicts * Update CHANGELOG.md Co-authored-by: Adam Brauer <[email protected]> --------- Co-authored-by: Adam Brauer <[email protected]>
Sitecore · Feb 22, 2024 · dd36bab · dd36bab
1 parent f47fc34
commit dd36bab
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,7 @@ Our versioning strategy is as follows:
 * `[templates/nextjs-xmcloud]` `[sitecore-jss]` `[sitecore-jss-nextjs]` `[sitecore-jss-react]` Add support for loading appropriate stylesheets whenever a theme is applied to BYOC and SXA components by introducing new function getComponentLibraryStylesheetLinks, which replaces getFEAASLibraryStylesheetLinks (which has been marked as deprecated) ([#1722](https://github.com/Sitecore/jss/pull/1722)) 
 * `[templates/nextjs-xmcloud]` `[sitecore-jss-nextjs]` Add protected endpoint which provides configuration information (the sitecore packages used by the app and all registered components) to be used to determine feature compatibility on Pages side. ([#1724](https://github.com/Sitecore/jss/pull/1724) [#1734](https://github.com/Sitecore/jss/pull/1734)) 
 * `[sitecore-jss-nextjs]` `[templates/nextjs]` [BYOC] Component Builder integration endpoint ([#1729](https://github.com/Sitecore/jss/pull/1729))
+* `[templates/nextjs]` Add support for `.env.*` files during bootstrap process, matching what Next.js supports OOTB for build/runtime. ([#1741](https://github.com/Sitecore/jss/pull/1741))  
 * `[sitecore-jss]` `[templates/nextjs-xmcloud]` Enable site GraphQL query for mutlisite in XMCloud instead of default search one. Site query should take "Valid for environment" SXA site setting into account when returning site list. ([#1739](https://github.com/Sitecore/jss/pull/1739))
   * To enable this on your existing app, modify the \scripts\config\plugins\multisite.ts file and add "useSiteQuery: true" to GraphQLSiteInfoService constructor call
 

diff --git a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/package.json b/packages/create-sitecore-jss/src/templates/nextjs-styleguide/package.json
@@ -8,7 +8,7 @@
     "@types/nprogress": "^0.2.0"
   },
   "scripts": {
-    "start": "cross-env-shell JSS_MODE=disconnected \"npm-run-all --serial bootstrap --parallel next:dev start:disconnected-proxy start:watch-components\"",
+    "start": "cross-env NODE_ENV=development JSS_MODE=disconnected \"npm-run-all --serial bootstrap --parallel next:dev start:disconnected-proxy start:watch-components\"",
     "start:disconnected-proxy": "ts-node --project tsconfig.scripts.json ./scripts/disconnected-mode-proxy.ts"
   }
 }
diff --git a/.../create-sitecore-jss/src/templates/nextjs-xmcloud/scripts/config/plugins/edge-platform.ts b/.../create-sitecore-jss/src/templates/nextjs-xmcloud/scripts/config/plugins/edge-platform.ts
@@ -1,4 +1,3 @@
-import 'dotenv/config';
 import chalk from 'chalk';
 import { constantCase } from 'constant-case';
 import { JssConfig } from 'lib/config';

diff --git a/packages/create-sitecore-jss/src/templates/nextjs/package.json b/packages/create-sitecore-jss/src/templates/nextjs/package.json
@@ -53,7 +53,7 @@
     "chokidar": "~3.5.3",
     "constant-case": "^3.0.4",
     "cross-env": "~7.0.3",
-    "dotenv": "^16.0.3",
+    "dotenv-flow": "^4.1.0",
     "eslint": "^8.32.0",
     "eslint-config-next": "^13.1.5",
     "eslint-config-prettier": "^8.6.0",
@@ -71,15 +71,15 @@
   "scripts": {
     "jss": "jss",
     "lint": "eslint ./src/**/*.tsx ./src/**/*.ts ./scripts/**/*.ts",
-    "bootstrap": "ts-node --project tsconfig.scripts.json scripts/bootstrap.ts && graphql-let",
-    "build": "npm-run-all --serial bootstrap next:build",
+    "bootstrap": "ts-node --require dotenv-flow/config --project tsconfig.scripts.json scripts/bootstrap.ts && graphql-let",
+    "build": "cross-env NODE_ENV=production npm-run-all --serial bootstrap next:build",
     "graphql:update": "ts-node --project tsconfig.scripts.json ./scripts/fetch-graphql-introspection-data.ts",
     "next:build": "next build",
     "next:dev": "cross-env NODE_OPTIONS='--inspect' next dev",
     "next:start": "next start",
     "scaffold": "ts-node --project tsconfig.scripts.json scripts/scaffold-component/index.ts",
-    "start:connected": "npm-run-all --serial bootstrap --parallel next:dev start:watch-components",
-    "start:production": "npm-run-all --serial bootstrap next:build next:start",
+    "start:connected": "cross-env NODE_ENV=development npm-run-all --serial bootstrap --parallel next:dev start:watch-components",
+    "start:production": "cross-env-shell NODE_ENV=production npm-run-all --serial bootstrap next:build next:start",
     "start:watch-components": "ts-node --project tsconfig.scripts.json scripts/generate-component-builder/index.ts --watch",
     "install-pre-push-hook": "ts-node --project tsconfig.scripts.json ./scripts/install-pre-push-hook.ts"
   }

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
@@ -1,4 +1,3 @@
-import 'dotenv/config';
 import fs from 'fs';
 import path from 'path';
 import { constantCase } from 'constant-case';
@@ -15,7 +14,8 @@ const defaultConfig: JssConfig = {
   sitecoreApiKey: process.env[`${constantCase('sitecoreApiKey')}`],
   sitecoreApiHost: process.env[`${constantCase('sitecoreApiHost')}`],
   sitecoreSiteName:
-    process.env[`${constantCase('sitecoreSiteName')}`] || process.env[`${constantCase('jssAppName')}`],
+    process.env[`${constantCase('sitecoreSiteName')}`] ||
+    process.env[`${constantCase('jssAppName')}`],
   graphQLEndpointPath: process.env[`${constantCase('graphQLEndpointPath')}`],
   defaultLanguage: process.env[`${constantCase('defaultLanguage')}`],
   graphQLEndpoint: process.env[`${constantCase('graphQLEndpoint')}`],