CG-4678 update music festival react sample site and readme article to use preview tokens for on page editing (#37)

CG-4678

Author: thachnd

samples/musicfestival-backend-dotnet/MusicFestival.Backend.csproj

@@ -8,12 +8,12 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="EPiServer.CMS" Version="12.20.0" />
-    <PackageReference Include="EPiServer.ContentDefinitionsApi" Version="3.8.0" />
-    <PackageReference Include="EPiServer.ContentDeliveryApi.Cms" Version="3.8.0" />
-    <PackageReference Include="EPiServer.ContentManagementApi" Version="3.8.0" />
+    <PackageReference Include="EPiServer.CMS" Version="12.22.4" />
+    <PackageReference Include="EPiServer.ContentDefinitionsApi" Version="3.9.0" />
+    <PackageReference Include="EPiServer.ContentDeliveryApi.Cms" Version="3.9.0" />
+    <PackageReference Include="EPiServer.ContentManagementApi" Version="3.9.0" />
     <PackageReference Include="EPiServer.OpenIDConnect" Version="3.8.0" />
     <PackageReference Include="EPiServer.OpenIDConnect.UI" Version="3.8.0" />
-    <PackageReference Include="Optimizely.ContentGraph.Cms" Version="3.0.0" />
+    <PackageReference Include="Optimizely.ContentGraph.Cms" Version="3.4.0" />
   </ItemGroup>
 </Project>

samples/musicfestival-backend-dotnet/Startup.cs

@@ -39,7 +39,7 @@ public void ConfigureServices(IServiceCollection services)
                                 User=sa;Password=Admin123!;
                                 Trust Server Certificate=True;Connect Timeout=30";
         var connectionstring = _configuration.GetConnectionString("EPiServerDB")
-                                ?? (isMacOs? macOsConnString: localDBConnString);
+                                ?? (isMacOs ? macOsConnString : localDBConnString);
         services.Configure<DataAccessOptions>(o =>
         {
             o.SetConnectionString(connectionstring);
@@ -133,7 +133,10 @@ public void ConfigureServices(IServiceCollection services)
             o.IncludeNumericContentIdentifier = true;
         });
 
-        services.AddContentGraph(_configuration, OpenIDConnectOptionsDefaults.AuthenticationScheme);
+        services.AddContentGraph(OpenIDConnectOptionsDefaults.AuthenticationScheme, options =>
+        {
+            options.EnablePreviewTokens = true;
+        });
         services.AddHostedService<ProvisionDatabase>();
     }
 
@@ -147,7 +150,7 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
         app.UseStaticFiles();
         app.UseRouting();
         app.UseCors(b => b
-            .WithOrigins(new[] { $"{_frontendUri}"})
+            .WithOrigins(new[] { $"{_frontendUri}" })
             .WithExposedContentDeliveryApiHeaders()
             .WithExposedContentDefinitionApiHeaders()
             .WithHeaders("Authorization")

samples/musicfestival-frontend-react/.env

@@ -1,4 +1,4 @@
-REACT_APP_CG_PROXY_URL=http://localhost:8082/EpiServer/ContentGraph/CGProxy/Query
+REACT_APP_CG_PREVIEW_URL=https://cg.optimizely.com/content/v2
 REACT_APP_CONTENT_GRAPH_GATEWAY_URL=https://cg.optimizely.com/content/v2?auth=INPUT_SINGLE_KEY_HERE
 
 REACT_APP_LOGIN_AUTHORITY=http://localhost:8082

samples/musicfestival-frontend-react/src/App.tsx

@@ -5,7 +5,7 @@ import ArtistContainerPage from './pages/ArtistContainerPage';
 import ArtistDetailsPage from './pages/ArtistDetailsPage';
 import authService from './authService';
 import { useState } from 'react';
-import { isEditOrPreviewMode } from './helpers/urlHelper'
+import { isEditOrPreviewMode, getPreviewTokenFromUrl } from './helpers/urlHelper'
 import './App.css';
 import Footer from './components/Footer';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
@@ -16,7 +16,7 @@ import { BlockPage } from './pages/BlockPage';
 
 let previousSavedMessage: any = null;
 const singleKeyUrl = process.env.REACT_APP_CONTENT_GRAPH_GATEWAY_URL as string
-const hmacKeyUrl = process.env.REACT_APP_CG_PROXY_URL as string
+const previewUrl = process.env.REACT_APP_CG_PREVIEW_URL as string
 
 const App = () => {
     const queryClient = useQueryClient();
@@ -36,21 +36,18 @@ const App = () => {
         }
     });
 
-    authService.getAccessToken().then((_token) => {
-        _token && setToken(_token)
-        modeEdit && !_token && !data && authService.login()
-    })
+    const previewToken = getPreviewTokenFromUrl(window.location.search);
 
-    variables = generateGQLQueryVars(token, window.location.pathname)
+    variables = generateGQLQueryVars(previewToken, window.location.pathname)
     if (modeEdit) {
-        if (token) {
-            headers = { 'Authorization': 'Bearer ' + token };
+        if (previewToken) {
+            headers = { 'Authorization': 'Bearer ' + previewToken };
         }
-        url = hmacKeyUrl
+        url = previewUrl
         subcribeContentSavedEvent((message: any) => mutate(message))
     }
 
-    const { data: queryData } = useStartQuery({ endpoint: url, fetchParams: { headers: headers } }, variables, { staleTime: 2000, enabled: !modeEdit || !!token });
+    const { data: queryData } = useStartQuery({ endpoint: url, fetchParams: { headers: headers } }, variables, { staleTime: 2000, enabled: !modeEdit || !!previewToken });
     data = queryData
 
     if (!data) {

samples/musicfestival-frontend-react/src/components/SearchButton.tsx

@@ -2,7 +2,7 @@ import {useEffect, useRef, useState} from "react";
 import {useSearchParams} from "react-router-dom";
 import {ArtistAutocompleteQuery, Ranking, useArtistAutocompleteQuery} from "../generated";
 import {generateGQLSearchQueryVars} from "../helpers/queryCacheHelper";
-import {getRankingFromSearchParams, isEditOrPreviewMode} from "../helpers/urlHelper";
+import {getRankingFromSearchParams, isEditOrPreviewMode, getPreviewTokenFromUrl } from "../helpers/urlHelper";
 
 type CustomString = string | number | readonly string[] | undefined
 
@@ -18,10 +18,12 @@ function SearchButton({filterValue}: any): JSX.Element {
     const [orderBy] = useState("ASC")
 
     let modeEdit = isEditOrPreviewMode()
-    let variables = generateGQLSearchQueryVars(token, window.location.pathname, searchValue as string | null, orderBy, ranking);
+    const previewToken = getPreviewTokenFromUrl(window.location.search);
+
+    let variables = generateGQLSearchQueryVars(previewToken, window.location.pathname, searchValue as string | null, orderBy, ranking);
     const autocompleteData = useArtistAutocompleteQuery({endpoint: singleKeyUrl}, variables, {
         staleTime: 2000,
-        enabled: !modeEdit || !!token
+        enabled: !modeEdit || !!previewToken
     }).data;
 
     const onSearch = (event: any) => {