From 6edcfd5d70986d85a273fe65e4a886bb1af26e84 Mon Sep 17 00:00:00 2001 From: illiakovalenko Date: Tue, 15 Jun 2021 22:04:50 +0300 Subject: [PATCH 1/8] Change next config --- samples/nextjs/next.config.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/samples/nextjs/next.config.js b/samples/nextjs/next.config.js index f56c907fcf..c6b9112370 100644 --- a/samples/nextjs/next.config.js +++ b/samples/nextjs/next.config.js @@ -89,6 +89,8 @@ const nextConfig = { webpack: (config, options) => { applyGraphQLCodeGenerationLoaders(config, options); + config.resolve.symlinks = false + return config; }, } From 4a7a83223cb00bc5a28345d51b108c72182fc7d6 Mon Sep 17 00:00:00 2001 From: illiakovalenko Date: Tue, 15 Jun 2021 22:36:45 +0300 Subject: [PATCH 2/8] Update PUBLIC_URL --- samples/nextjs/next.config.js | 4 ++-- samples/nextjs/src/lib/util.ts | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/samples/nextjs/next.config.js b/samples/nextjs/next.config.js index c6b9112370..27da2dcf0b 100644 --- a/samples/nextjs/next.config.js +++ b/samples/nextjs/next.config.js @@ -7,7 +7,7 @@ const isDisconnected = process.env.JSS_MODE === JSS_MODE_DISCONNECTED; // A public URL (and uses below) is required for Sitecore Experience Editor support. // This is set to http://localhost:3000 by default. See .env for more details. -const publicUrl = process.env.PUBLIC_URL; +const publicUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : process.env.PUBLIC_URL; const nextConfig = { @@ -90,7 +90,7 @@ const nextConfig = { applyGraphQLCodeGenerationLoaders(config, options); config.resolve.symlinks = false - + return config; }, } diff --git a/samples/nextjs/src/lib/util.ts b/samples/nextjs/src/lib/util.ts index 160c14f001..7773c462eb 100644 --- a/samples/nextjs/src/lib/util.ts +++ b/samples/nextjs/src/lib/util.ts @@ -3,5 +3,7 @@ * This is used primarily to enable compatibility with the Sitecore Experience Editor. */ export const getPublicUrl = (): string => { - return process.env.PUBLIC_URL || ''; + return process.env.VERCEL_URL + ? `https://${process.env.VERCEL_URL}` + : process.env.PUBLIC_URL || ''; }; From 13f5ea825727c35b0bd2248988404cb2c080be26 Mon Sep 17 00:00:00 2001 From: illiakovalenko Date: Tue, 15 Jun 2021 22:52:48 +0300 Subject: [PATCH 3/8] Remove `symlinks` option --- samples/nextjs/next.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/nextjs/next.config.js b/samples/nextjs/next.config.js index 27da2dcf0b..30fcbe1db9 100644 --- a/samples/nextjs/next.config.js +++ b/samples/nextjs/next.config.js @@ -89,7 +89,7 @@ const nextConfig = { webpack: (config, options) => { applyGraphQLCodeGenerationLoaders(config, options); - config.resolve.symlinks = false + // config.resolve.symlinks = false return config; }, From 5e7d812f05a9eb171bc9c3982f3e1670e7774391 Mon Sep 17 00:00:00 2001 From: illiakovalenko Date: Tue, 15 Jun 2021 23:02:09 +0300 Subject: [PATCH 4/8] Test --- packages/sitecore-jss-react/src/components/Text.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/sitecore-jss-react/src/components/Text.tsx b/packages/sitecore-jss-react/src/components/Text.tsx index be430c743f..75ea790581 100644 --- a/packages/sitecore-jss-react/src/components/Text.tsx +++ b/packages/sitecore-jss-react/src/components/Text.tsx @@ -35,6 +35,8 @@ export const Text: FunctionComponent = ({ return null; } + console.log('LOG VALUES FOR component:', field); + // can't use editable value if we want to output unencoded if (!encode) { // eslint-disable-next-line no-param-reassign From 461c93b998fd90278a18128e5d2623fc99649956 Mon Sep 17 00:00:00 2001 From: illiakovalenko Date: Wed, 16 Jun 2021 19:51:48 +0300 Subject: [PATCH 5/8] Remove test changes --- packages/sitecore-jss-react/src/components/Text.tsx | 2 -- samples/nextjs/next.config.js | 2 -- 2 files changed, 4 deletions(-) diff --git a/packages/sitecore-jss-react/src/components/Text.tsx b/packages/sitecore-jss-react/src/components/Text.tsx index 75ea790581..be430c743f 100644 --- a/packages/sitecore-jss-react/src/components/Text.tsx +++ b/packages/sitecore-jss-react/src/components/Text.tsx @@ -35,8 +35,6 @@ export const Text: FunctionComponent = ({ return null; } - console.log('LOG VALUES FOR component:', field); - // can't use editable value if we want to output unencoded if (!encode) { // eslint-disable-next-line no-param-reassign diff --git a/samples/nextjs/next.config.js b/samples/nextjs/next.config.js index 30fcbe1db9..12351c4b73 100644 --- a/samples/nextjs/next.config.js +++ b/samples/nextjs/next.config.js @@ -89,8 +89,6 @@ const nextConfig = { webpack: (config, options) => { applyGraphQLCodeGenerationLoaders(config, options); - // config.resolve.symlinks = false - return config; }, } From a31ff297d107164551bafa7c2d65339fc6b49769 Mon Sep 17 00:00:00 2001 From: illiakovalenko Date: Wed, 16 Jun 2021 19:58:04 +0300 Subject: [PATCH 6/8] Update comments --- samples/nextjs/next.config.js | 1 + samples/nextjs/src/lib/util.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/samples/nextjs/next.config.js b/samples/nextjs/next.config.js index 12351c4b73..f33dc38068 100644 --- a/samples/nextjs/next.config.js +++ b/samples/nextjs/next.config.js @@ -7,6 +7,7 @@ const isDisconnected = process.env.JSS_MODE === JSS_MODE_DISCONNECTED; // A public URL (and uses below) is required for Sitecore Experience Editor support. // This is set to http://localhost:3000 by default. See .env for more details. +// VERCEL_URL is provided in case if we are in Preview deployment const publicUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : process.env.PUBLIC_URL; const nextConfig = { diff --git a/samples/nextjs/src/lib/util.ts b/samples/nextjs/src/lib/util.ts index 7773c462eb..2afe49db44 100644 --- a/samples/nextjs/src/lib/util.ts +++ b/samples/nextjs/src/lib/util.ts @@ -1,6 +1,7 @@ /** * Get the publicUrl. * This is used primarily to enable compatibility with the Sitecore Experience Editor. + * VERCEL_URL is provided in case if we are in Preview deployment */ export const getPublicUrl = (): string => { return process.env.VERCEL_URL From 8a6f5b60cd92a925e278a393d6bba65f4459eb8f Mon Sep 17 00:00:00 2001 From: illiakovalenko Date: Wed, 16 Jun 2021 23:48:23 +0300 Subject: [PATCH 7/8] Extend description --- samples/nextjs/next.config.js | 3 ++- samples/nextjs/src/lib/util.ts | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/samples/nextjs/next.config.js b/samples/nextjs/next.config.js index f33dc38068..a544e369c0 100644 --- a/samples/nextjs/next.config.js +++ b/samples/nextjs/next.config.js @@ -7,7 +7,8 @@ const isDisconnected = process.env.JSS_MODE === JSS_MODE_DISCONNECTED; // A public URL (and uses below) is required for Sitecore Experience Editor support. // This is set to http://localhost:3000 by default. See .env for more details. -// VERCEL_URL is provided in case if we are in Preview deployment +// VERCEL_URL is provided by Vercel in case if we are in Preview deployment (deployment based on the custom branch), +// preview deployment has unique url, we don't know exact url. const publicUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : process.env.PUBLIC_URL; const nextConfig = { diff --git a/samples/nextjs/src/lib/util.ts b/samples/nextjs/src/lib/util.ts index 2afe49db44..a8fd894813 100644 --- a/samples/nextjs/src/lib/util.ts +++ b/samples/nextjs/src/lib/util.ts @@ -1,7 +1,8 @@ /** * Get the publicUrl. * This is used primarily to enable compatibility with the Sitecore Experience Editor. - * VERCEL_URL is provided in case if we are in Preview deployment + * VERCEL_URL is provided by Vercel in case if we are in Preview deployment (deployment based on the custom branch), + * preview deployment has unique url, we don't know exact url. */ export const getPublicUrl = (): string => { return process.env.VERCEL_URL From a90136a3655363218abce4ea30129889d4122ed0 Mon Sep 17 00:00:00 2001 From: illiakovalenko Date: Thu, 17 Jun 2021 00:10:44 +0300 Subject: [PATCH 8/8] Use getPublicUrl from base package --- packages/sitecore-jss-nextjs/src/index.ts | 2 +- packages/sitecore-jss-nextjs/src/utils.test.ts | 7 +++++++ packages/sitecore-jss-nextjs/src/utils.ts | 9 +++++++++ samples/nextjs/next.config.js | 8 ++------ samples/nextjs/src/Layout.tsx | 2 +- samples/nextjs/src/lib/util.ts | 11 ----------- 6 files changed, 20 insertions(+), 19 deletions(-) delete mode 100644 samples/nextjs/src/lib/util.ts diff --git a/packages/sitecore-jss-nextjs/src/index.ts b/packages/sitecore-jss-nextjs/src/index.ts index c4fa67b771..6310c9ad85 100644 --- a/packages/sitecore-jss-nextjs/src/index.ts +++ b/packages/sitecore-jss-nextjs/src/index.ts @@ -69,7 +69,7 @@ export { useComponentProps, } from './components/ComponentPropsContext'; -export { handleExperienceEditorFastRefresh } from './utils'; +export { handleExperienceEditorFastRefresh, getPublicUrl } from './utils'; export { EditingData, EditingPreviewData, isEditingData } from './sharedTypes/editing-data'; export { diff --git a/packages/sitecore-jss-nextjs/src/utils.test.ts b/packages/sitecore-jss-nextjs/src/utils.test.ts index 5b68e317f6..11d4803034 100644 --- a/packages/sitecore-jss-nextjs/src/utils.test.ts +++ b/packages/sitecore-jss-nextjs/src/utils.test.ts @@ -6,6 +6,7 @@ describe('utils', () => { describe('getPublicUrl', () => { after(() => { delete process.env.PUBLIC_URL; + delete process.env.VERCEL_URL; }); it('should fallback to localhost:3000 if not defined', () => { @@ -31,6 +32,12 @@ describe('utils', () => { process.env.PUBLIC_URL = 'nope'; expect(() => getPublicUrl()).to.throw(); }); + + it('should use VERCEL_URL', () => { + process.env.VERCEL_URL = 'jss.uniqueid.vercel.com'; + const result = getPublicUrl(); + expect(result).to.equal('https://jss.uniqueid.vercel.com'); + }) }); describe('getJssEditingSecret', () => { after(() => { diff --git a/packages/sitecore-jss-nextjs/src/utils.ts b/packages/sitecore-jss-nextjs/src/utils.ts index 6c48d39762..44acf6e98c 100644 --- a/packages/sitecore-jss-nextjs/src/utils.ts +++ b/packages/sitecore-jss-nextjs/src/utils.ts @@ -1,7 +1,16 @@ import chalk from 'chalk'; import { isExperienceEditorActive, resetExperienceEditorChromes } from '@sitecore-jss/sitecore-jss'; +/** + * Get the publicUrl. + * This is used primarily to enable compatibility with the Sitecore Experience Editor. + * This is set to http://localhost:3000 by default. + * VERCEL_URL is provided by Vercel in case if we are in Preview deployment (deployment based on the custom branch), + * preview deployment has unique url, we don't know exact url. + */ export const getPublicUrl = (): string => { + if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; + let url = process.env.PUBLIC_URL; if (url === undefined) { console.warn( diff --git a/samples/nextjs/next.config.js b/samples/nextjs/next.config.js index a544e369c0..12132a23dd 100644 --- a/samples/nextjs/next.config.js +++ b/samples/nextjs/next.config.js @@ -1,15 +1,11 @@ const jssConfig = require('./src/temp/config'); const packageConfig = require('./package.json').config; -const { JSS_MODE_DISCONNECTED } = require('@sitecore-jss/sitecore-jss-nextjs'); +const { JSS_MODE_DISCONNECTED, getPublicUrl } = require('@sitecore-jss/sitecore-jss-nextjs'); const disconnectedServerUrl = `http://localhost:${process.env.PROXY_PORT || 3042}/`; const isDisconnected = process.env.JSS_MODE === JSS_MODE_DISCONNECTED; -// A public URL (and uses below) is required for Sitecore Experience Editor support. -// This is set to http://localhost:3000 by default. See .env for more details. -// VERCEL_URL is provided by Vercel in case if we are in Preview deployment (deployment based on the custom branch), -// preview deployment has unique url, we don't know exact url. -const publicUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : process.env.PUBLIC_URL; +const publicUrl = getPublicUrl(); const nextConfig = { diff --git a/samples/nextjs/src/Layout.tsx b/samples/nextjs/src/Layout.tsx index 7c52c3a6d0..19a5635bd6 100644 --- a/samples/nextjs/src/Layout.tsx +++ b/samples/nextjs/src/Layout.tsx @@ -2,11 +2,11 @@ import Head from 'next/head'; import Link from 'next/link'; import { useEffect } from 'react'; import { useI18n } from 'next-localization'; -import { getPublicUrl } from 'lib/util'; import { Placeholder, VisitorIdentification, useSitecoreContext, + getPublicUrl, } from '@sitecore-jss/sitecore-jss-nextjs'; import { StyleguideSitecoreContextValue } from 'lib/component-props'; diff --git a/samples/nextjs/src/lib/util.ts b/samples/nextjs/src/lib/util.ts deleted file mode 100644 index a8fd894813..0000000000 --- a/samples/nextjs/src/lib/util.ts +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Get the publicUrl. - * This is used primarily to enable compatibility with the Sitecore Experience Editor. - * VERCEL_URL is provided by Vercel in case if we are in Preview deployment (deployment based on the custom branch), - * preview deployment has unique url, we don't know exact url. - */ -export const getPublicUrl = (): string => { - return process.env.VERCEL_URL - ? `https://${process.env.VERCEL_URL}` - : process.env.PUBLIC_URL || ''; -};