Topics

All topics

Sitefinity renderers

Sample: Frontend pages only
Next.js

This article contains
NEW TO SITEFINITY?

Overview

This example demonstrates how to configure your app for production to work exclusively with front-end pages. The middleware should be simplified by removing any unnecessary logic, particularly any logic related to backend pages.

Removing this disables the access to the instance's backend and should be done only to an environment that is meant to be public facing and needs its backend access restricted - like production for example. The idea here is that this approach allows for cleaner and faster processing of requests on the frontend and disables interactions with the backend on that instance. Content and widgets implementations should be handled in that environment via CI and CD and utilizing Sitefinity SiteSync.

PREREQUISITES: You must set up a Sitefinity renderer application and connect it to your Sitefinity CMS application. For more information, see Install Sitefinity in Next.js mode.

Removing backend middleware

To remove the backend middleware check from the middleware.ts file, remove the section below:

const resultBackend = await middlewareBackend(request); if (resultBackend instanceof NextResponse || resultBackend instanceof Response) { return resultBackend; }

Full frontend only middleware sample

This is how the middleware.ts file looks like without the backend check:

import { NextRequest, NextResponse } from 'next/server';
import { RootUrlService, RENDERER_NAME } from '@progress/sitefinity-nextjs-sdk/rest-sdk';
const headerBypassHostValidationKey = 'X-SF-BYPASS-HOST-VALIDATION-KEY';
const headerBypassHostKey = 'X-SF-BYPASS-HOST';
export const templateRegex = /\/sf\/system\/(?<type>.*?)\/Default\.GetPageTemplates\(selectedPages=(?<selectedPages>.*?)\)/;
const whitelistedServices: string[] = [];
if (process.env.SF_WHITELISTED_WEBSERVICES) {
whitelistedServices.push(...process.env.SF_WHITELISTED_WEBSERVICES.split(',').map(x => x.trim()[0] === '/' ? x.trim() : `/${x.trim()}`));
}
const servicePath = process.env.SF_WEBSERVICE_PATH ?
process.env.SF_WEBSERVICE_PATH.trim()[0] === '/' ?
process.env.SF_WEBSERVICE_PATH.trim() :
`/${process.env.SF_WEBSERVICE_PATH.trim()}` :
'/api/default';
export async function middleware(request: NextRequest) {
const resultFrontend = await middlewareFrontend(request);
if (resultFrontend instanceof Response) {
return resultFrontend;
}
return NextResponse.next();
}
async function middlewareFrontend(request: NextRequest) {
// handle known paths
if (request.nextUrl.pathname.startsWith('/assets') ||
request.nextUrl.pathname.startsWith('/_next') ||
request.nextUrl.pathname === '/favicon.ico') {
return NextResponse.next();
}
if (request.nextUrl.pathname === '/sfrenderer/api/v1/health/status') {
return new NextResponse(undefined, { status: 200 });
}
let bypassHost = shouldBypassHost(request);
// user defined paths that can be additionally proxied
// can be used for legacy MVC/WebForms pages or paths that are entirely custom
const whitelistedPaths: string[] = [];
if (process.env.SF_WHITELISTED_PATHS) {
const whiteListedPathsFromEnvironment = (process.env.SF_WHITELISTED_PATHS as string).split(',').map(x => x.trim()[0] === '/' ? x.trim() : `/${x.trim()}`);
whitelistedPaths.push(...whiteListedPathsFromEnvironment);
}
//handle known CMS paths
const cmsPaths = [
servicePath,
'/forms/submit',
'/sitefinity/anticsrf',
'/sitefinity/login-handler',
'/sitefinity/signout/selflog',
'/ResourcePackages',
'/web-interface/calendars',
'/web-interface/events',
'/kendo',
...whitelistedServices,
...whitelistedPaths
];
if (bypassHost ||
cmsPaths.some(path => request.nextUrl.pathname.toUpperCase().startsWith(path.toUpperCase())) ||
request.nextUrl.pathname.indexOf('.axd') !== -1 ||
isAppStatusRequest(request) ||
proxyHomePage(request)) {
return rewriteSystemRequest(request, bypassHost);
}
return request;
}
async function rewriteSystemRequest(request: NextRequest, bypassHost: string) {
const { url, headers } = generateProxyRequest(request, bypassHost);
const response = NextResponse.rewrite(url, {
request: {
headers: headers
}
});
if (bypassHost) {
response.headers.set('sf-cache-control-override', 'no-cache');
}
return response;
}
function shouldBypassHost(request: NextRequest) {
let bypassHost = '';
const remoteValidationKey = process.env.SF_REMOTE_VALIDATION_KEY;
if (remoteValidationKey) {
if (request.headers.has(headerBypassHostKey) && request.headers.has(headerBypassHostValidationKey)) {
const bypassHostKey = request.headers.get(headerBypassHostValidationKey);
const bypassHostValue = request.headers.get(headerBypassHostKey);
if (bypassHostKey && bypassHostValue && bypassHostKey === remoteValidationKey) {
bypassHost = bypassHostValue;
} else {
throw new Error(`The provided local validation key - '${remoteValidationKey}' is not valid or it is expired.`);
}
}
}
return bypassHost;
}
function generateProxyRequest(request: NextRequest, bypassHost: string) {
const headers = new Headers(request.headers);
headers.set('X-SFRENDERER-PROXY', 'true');
headers.set('X-SFRENDERER-PROXY-NAME', RENDERER_NAME);
if (!headers.has('X-SF-WEBSERVICEPATH')) {
headers.set('X-SF-WEBSERVICEPATH', RootUrlService.getWebServicePath());
}
let resolvedHost = process.env.SF_PROXY_ORIGINAL_HOST || request.headers.get('X-FORWARDED-HOST') || request.nextUrl.host;
if (!resolvedHost) {
if (process.env.PORT) {
resolvedHost = `localhost:${process.env.PORT}`;
} else {
resolvedHost = 'localhost';
}
}
const hostHeaderName = process.env.SF_HOST_HEADER_NAME || 'X-ORIGINAL-HOST';
if (process.env.SF_LOCAL_VALIDATION_KEY || process.env.SF_REMOTE_VALIDATION_KEY) {
headers.delete(hostHeaderName);
if (process.env.SF_LOCAL_VALIDATION_KEY) {
headers.set(headerBypassHostKey, resolvedHost);
headers.set(headerBypassHostValidationKey, process.env.SF_LOCAL_VALIDATION_KEY);
} else if (bypassHost) {
headers.set(hostHeaderName, bypassHost);
} else {
headers.set(hostHeaderName, resolvedHost);
}
} else {
headers.set(hostHeaderName, resolvedHost);
}
const proxyURL = new URL(process.env.SF_CMS_URL!);
const url = new URL(request.url);
headers.set('HOST', proxyURL.hostname);
url.hostname = proxyURL.hostname;
url.protocol = proxyURL.protocol;
url.port = proxyURL.port;
return { url, headers };
}
function isAppStatusRequest(request: NextRequest) {
return request.nextUrl.pathname.toLowerCase() === '/appstatus' &&
request.headers.get('accept')?.indexOf('application/json') !== -1;
}
function proxyHomePage(request: NextRequest) {
// if home page is made with a renderer, it will be handled by the home page logic here in nextjs
// if it is legacy page (MVC, Web form), proxy the request to Sitefinity
const isLegacyHomePage: string = process.env.SF_IS_HOME_PAGE_LEGACY || 'false';
return request.nextUrl.pathname === '/' && isLegacyHomePage.toLocaleLowerCase() === 'true';
}
function decodeEncodedSearchUriWithSpecialCharacters(uri: string) {
const decoded = decodeURIComponent(uri);
if (/'/i.test(decoded)) {
return uri;
}
return decoded;
}
view raw feonlymiddleware.ts hosted with ❤ by GitHub

Run the sample

This sample is available in Sitefinity’s GitHub repository. You can run and play with it.
To do this, perform the following:

  1. Go to Sitefinity’s GitHub repository Sitefinity Next.js samples.
  2. Expand Code and click Download ZIP.
  3. Extract the files on your computer.
  4. In the extracted folder, navigate to \nextjs-samples-main\nextjs-samples-main\src\fe-pages-only folder.
  5. In the command console run npm install.
  6. Open the .env.development file.
  7. In section PROXY SETTINGS, change the SF_CMS_URL property to the URL of your Sitefinity CMS site.
    If you have deployed Sitefinity CMS on the IIS, point to https://localhost:<https_port>.
  8. If your Sitefinity CMS is hosted on the cloud, in SF_LOCAL_VALIDATION_KEY= add your validation key. For more information, see Set up the project for local development (using Next.js Renderer).
  9. In the command console run npm run dev.

Want to learn more?

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?