1. Deployment options for JSS Next.js apps

Use the Vercel Deployment Protection feature with JSS apps

Version:

Deployment Protection is a feature of the Vercel cloud platform that allows developers and editors to limit access to their site deployments. Enabling this feature requires making some changes based on how your JSS app is configured.

To use Deployment Protection with JSS apps:

  1. In your app's scripts\config\plugins\fallback.ts file, modify how publicUrl is set. For example:

    const publicUrlFallback = (process.env.NODE_ENV !== 'production' ? getPublicUrl() : '');
return Object.assign({}, config, {
  publicUrl: config.publicUrl || publicUrlFallback,
});
    Important

    If you're using one of your Deployment Protection enabled Vercel URLs as your rendering host endpoint for editing, you must complete the remaining steps in this procedure to enable Sitecore’s editing tools to use your Vercel deployment with Protection Bypass. Otherwise, no further changes are needed.

  2. Configure the Protection Bypass token in Vercel.

  3. Add the bypass token to your rendering host settings, depending on whether you use SXA or local file edits to configure your site settings:

    SXA site settings

    1. In SXA, open your rendering host definition located in /sitecore/system/Settings/Services/Rendering Hosts/. For example, if your definition is named vercel, open /sitecore/system/Settings/Services/Rendering Hosts/vercel.

    2. Add the query string parameter x-vercel-protection-bypass=<bypass_token> to the URLs in the following fields, making sure to include the bypass token value from Vercel:

      • Server side rendering engine endpoint URL

      • Server side rendering engine application URL

      • Server side rendering engine configuration URL

      The following example represents an updated URL for Server side rendering engine application URL:

      https://<vercel_deployment_url>/?x-vercel-protection-bypass=<bypass_token>
    Config file site settings

    Open the config file for your app and, in the <app> node for your application, add the query string parameter x-vercel-protection-bypass=<bypass_token> to the values of the following attributes, making sure to include the bypass token value from Vercel:

    • serverSideRenderingEngineEndpointUrl

    • serverSideRenderingEngineApplicationUrl

    The following example represents an updated URL for serverSideRenderingEngineApplicationUrl:

    https://<vercel_deployment_url>/?x-vercel-protection-bypass=<bypass_token>

  4. If Vercel Deployment Protection is enabled for a deployment URL other than the automatically-generated one, and you are using this other URL as your rendering host endpoint, do the following in Vercel:

    1. Add the PUBLIC_URL environment variable.

    2. Set the new variable's value to the protocol and hostname used by your rendering host settings, such as https://<vercel_deployment_url>.

    Important

    Relative paths are often sufficient in preview deployments. You can set PUBLIC_URL='' to use relative paths. This avoids potential CORS or CSP issues caused by cross-domain asset requests in dynamic Vercel environments.

Important

If you use the Protection Bypass token to access the site in normal mode, you must use both the x-vercel-protection-bypass and x-vercel-set-bypass-cookie headers, or use query string parameters, to properly render all the static assets.

If you have suggestions for improving this article, let us know!