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

.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('/')}`)) ?? [];

docs/5-fetching.md

@@ -70,7 +70,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('/')}/`);
 

docs/6-rendering-react.md

@@ -167,7 +167,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('/')}/`);
 

samples/fx-integration/.env.in

@@ -0,0 +1,23 @@
+# 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=
+
+

samples/fx-integration/.gitignore

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

samples/fx-integration/README.md

@@ -9,7 +9,7 @@ You need a Optimizely CMS instance and Optimizely Feature Experimentation instan
 Create an `.env` file with the following content. You will learn how to get the values for the variables in the next steps.
 
 ```
-OPTIMIZELY_CMS_HOST=
+OPTIMIZELY_CMS_URL=
 OPTIMIZELY_GRAPH_SINGLE_KEY=
 OPTIMIZELY_CMS_CLIENT_ID=
 OPTIMIZELY_CMS_CLIENT_SECRET=
@@ -20,7 +20,7 @@ OPTIMIZELY_FX_ACCESS_TOKEN=
 
 ### CMS credentials
 
-1. Put the URL of your CMS as the `OPTIMIZELY_CMS_HOST` variable. For example `https://app-1234.cms.optimizely.com/`
+1. Put the URL of your CMS as the `OPTIMIZELY_CMS_URL` variable. For example `https://app-1234.cms.optimizely.com/`
 2. Go to your CMS instance → Settings → API Keys.
 3. Under **Render Content**, the _Single Key_ variable, is the variable `OPTIMIZELY_GRAPH_SINGLE_KEY`
 4. In the same page, under **Manage Content**, click "Create API key".

samples/fx-integration/src/app/en/[...slug]/page.tsx

@@ -23,7 +23,7 @@ export default async function Page({ params }: Props) {
   const variation = await getVariation(path);
 
   const client = new GraphClient(process.env.OPTIMIZELY_GRAPH_SINGLE_KEY!, {
-    graphUrl: process.env.OPTIMIZELY_GRAPH_URL,
+    graphUrl: process.env.OPTIMIZELY_GRAPH_GATEWAY,
   });
 
   if (!variation) {

samples/fx-integration/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
@@ -26,7 +26,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} />

samples/graph-webhooks-cache-invalidation/.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=

samples/graph-webhooks-cache-invalidation/.gitignore

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

samples/graph-webhooks-cache-invalidation/src/app/webhooks/[id]/route.ts

@@ -20,7 +20,7 @@ async function revalidateDocId(docId: string) {
   // but to search in Graph, we need only the UUID without separation dashes `-`
   const id = docId.split('_')[0].replaceAll('-', '');
   const client = new GraphClient(process.env.OPTIMIZELY_GRAPH_SINGLE_KEY!, {
-    graphUrl: process.env.OPTIMIZELY_GRAPH_URL,
+    graphUrl: process.env.OPTIMIZELY_GRAPH_GATEWAY,
   });
 
   const getPathQuery = `

samples/hello-world/.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=

samples/hello-world/.gitignore

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

samples/hello-world/src/app/[...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 content = await client.getContentByPath(`/${slug.join('/')}/`);
 

samples/hello-world/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.getPreviewContent(
@@ -19,7 +19,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} />

samples/nextjs-template/.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=

samples/nextjs-template/.gitignore

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

samples/nextjs-template/src/app/[...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 c = await client.getContentByPath(`/${slug.join('/')}/`);
 

samples/nextjs-template/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.getPreviewContent(
@@ -20,7 +20,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} />