CMS-44989 Update environment variable names and improve documentation for configuration.

Author: TRomesh

.github/workflows/vercel-preview.yaml

@@ -3,8 +3,8 @@ env:
   VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
   VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
   OPTIMIZELY_GRAPH_SINGLE_KEY: ${{ secrets.OPTIMIZELY_GRAPH_SINGLE_KEY }}
-  OPTIMIZELY_CMS_HOST: ${{ secrets.OPTIMIZELY_CMS_HOST }}
-  OPTIMIZELY_GRAPH_URL: ${{ secrets.OPTIMIZELY_GRAPH_URL }}
+  OPTIMIZELY_CMS_URL: ${{ secrets.OPTIMIZELY_CMS_URL }}
+  OPTIMIZELY_GRAPH_GATEWAY: ${{ secrets.OPTIMIZELY_GRAPH_GATEWAY }}
 on:
   push:
     branches-ignore:

.github/workflows/vercel-prod.yaml

@@ -3,8 +3,8 @@ env:
   VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
   VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
   OPTIMIZELY_GRAPH_SINGLE_KEY: ${{ secrets.OPTIMIZELY_GRAPH_SINGLE_KEY }}
-  OPTIMIZELY_CMS_HOST: ${{ secrets.OPTIMIZELY_CMS_HOST }}
-  OPTIMIZELY_GRAPH_URL: ${{ secrets.OPTIMIZELY_GRAPH_URL }}
+  OPTIMIZELY_CMS_URL: ${{ secrets.OPTIMIZELY_CMS_URL }}
+  OPTIMIZELY_GRAPH_GATEWAY: ${{ secrets.OPTIMIZELY_GRAPH_GATEWAY }}
 on:
   push:
     branches:

__test__/test-website/.env.in

@@ -0,0 +1,21 @@
+# Base URL of your CMS instance
+# Example: https://example.cms.optimizely.com/
+OPTIMIZELY_CMS_URL=
+
+# Content Graph endpoint (optional)
+# Use to specify a non-production instance or different version
+# Default: https://cg.optimizely.com/content/v2
+OPTIMIZELY_GRAPH_GATEWAY=
+
+# Content Graph authentication key
+# Found in: CMS instance > Settings > API Keys
+OPTIMIZELY_GRAPH_SINGLE_KEY=
+
+# CLI client credentials for syncing manifest data
+# Create in: CMS instance > Settings > API Keys > Create API key
+OPTIMIZELY_CMS_CLIENT_ID=
+OPTIMIZELY_CMS_CLIENT_SECRET=
+
+# Feature Experimentation credentials
+OPTIMIZELY_FX_SDK_KEY=
+OPTIMIZELY_FX_ACCESS_TOKEN=

__test__/test-website/.gitignore

@@ -32,6 +32,7 @@ yarn-error.log*
 
 # env files (can opt-in for committing if needed)
 .env*
+!.env.in
 
 # vercel
 .vercel

__test__/test-website/src/app/all/[...slug]/page.tsx

@@ -14,7 +14,7 @@ export default async function Page({ params }: Props) {
   const { slug } = await params;
 
   const client = new GraphClient(process.env.OPTIMIZELY_GRAPH_SINGLE_KEY!, {
-    graphUrl: process.env.OPTIMIZELY_GRAPH_URL,
+    graphUrl: process.env.OPTIMIZELY_GRAPH_GATEWAY,
   });
 
   const content = await client.getContentByPath(`/${slug.join('/')}/`);

__test__/test-website/src/app/en/[...slug]/page.tsx

@@ -32,7 +32,7 @@ export default async function Page({ params, searchParams }: Props) {
   const path = `/en/${slug.join('/')}/`;
 
   const client = new GraphClient(process.env.OPTIMIZELY_GRAPH_SINGLE_KEY!, {
-    graphUrl: process.env.OPTIMIZELY_GRAPH_URL,
+    graphUrl: process.env.OPTIMIZELY_GRAPH_GATEWAY,
   });
 
   const variation = (await searchParams).variation;

__test__/test-website/src/app/missing-content-types/page.tsx

@@ -17,9 +17,9 @@ export default async function Page({ searchParams }: Props) {
   const { path } = await searchParams;
 
   const client = new GraphClient(process.env.OPTIMIZELY_GRAPH_SINGLE_KEY!, {
-    graphUrl: process.env.OPTIMIZELY_GRAPH_URL,
+    graphUrl: process.env.OPTIMIZELY_GRAPH_GATEWAY,
   });
-  const c = await client.fetchContent(path);
+  const c = await client.getContentByPath(path);
 
   return <pre>{c}</pre>;
 }

__test__/test-website/src/app/multi-host/[...slug]/page.tsx

@@ -14,7 +14,7 @@ export default async function Page({ params }: Props) {
   const { slug } = await params;
 
   const client = new GraphClient(process.env.OPTIMIZELY_GRAPH_SINGLE_KEY!, {
-    graphUrl: process.env.OPTIMIZELY_GRAPH_URL,
+    graphUrl: process.env.OPTIMIZELY_GRAPH_GATEWAY,
   });
   const host =
     process.env.NEXTJS_HOST ?? `https://localhost:${process.env.PORT ?? 3000}`;

__test__/test-website/src/app/preview/page.tsx

@@ -9,7 +9,7 @@ type Props = {
 
 export default async function Page({ searchParams }: Props) {
   const client = new GraphClient(process.env.OPTIMIZELY_GRAPH_SINGLE_KEY!, {
-    graphUrl: process.env.OPTIMIZELY_GRAPH_URL,
+    graphUrl: process.env.OPTIMIZELY_GRAPH_GATEWAY,
   });
 
   const response = await client
@@ -30,7 +30,7 @@ export default async function Page({ searchParams }: Props) {
   return (
     <>
       <Script
-        src={`${process.env.OPTIMIZELY_CMS_HOST}/util/javascript/communicationinjector.js`}
+        src={`${process.env.OPTIMIZELY_CMS_URL}/util/javascript/communicationinjector.js`}
       ></Script>
       <PreviewComponent />
       <OptimizelyComponent opti={response} />

__test__/test-website/src/app/related/[...slug]/page.tsx

@@ -13,7 +13,7 @@ export default async function Page({ params }: Props) {
   const { slug } = await params;
 
   const client = new GraphClient(process.env.OPTIMIZELY_GRAPH_SINGLE_KEY!, {
-    graphUrl: process.env.OPTIMIZELY_GRAPH_URL,
+    graphUrl: process.env.OPTIMIZELY_GRAPH_GATEWAY,
   });
 
   const children = (await client.getItems(`/${slug.join('/')}`)) ?? [];