Host a front end with Optimizely

11 min

You can use Optimizely to build and host your NextJS site front end with an Optimizely back end for Optimizely Content Management System (SaaS).

Supported rendering modes with NextJS are Static Site Generation (SSG) and Server Side Rendering (SSR). Incremental Static Regeneration (ISR) is not yet supported. Support for other frameworks besides NextJS will be added in the future.

You should use Optimizely Graph with your front end to sync content to the back end. Use Visual Builder to edit the front-end site.

In addition to CMS SaaS, you will get access to the DXP management portal, where you can deploy and manage your front end while editing and previewing content in CMS.

📘 Note See CMS SaaS sample (github.com/episerver/content-js-sdk) for information about developing a NextJS front end for CMS SaaS.

Environment

Each back end has its own front end. (A back end can have multiple front ends, but a front end cannot have multiple back ends.) The front ends are separate sites and are primarily intended to communicate through Optimizely Graph. The content stored in CMS is transferred to Graph, where the corresponding front end site can read the content.

The following environment variables are available for the build and for the site at runtime. You can add app settings through the Management Portal UI, which are included as variables for both the build and at runtime.

OPTIMIZELY_CMS_URL

OPTIMIZELY_GRAPH_GATEWAY

OPTIMIZELY_GRAPH_SECRET

OPTIMIZELY_GRAPH_SINGLE_KEY

OPTIMIZELY_GRAPH_APP_KEY

Build the front-end code package

Clone or build a site according to the instructions at content-js-sdk, cms-saas-vercel-demo, or optimizely-saas-starter to create a demo site or a site from scratch.

Use yarn or npm to download and manage third-party libraries. Exclude the .next and node_modules folder from the code package. The install and build steps are executed during deployment to the front-end environment, which generates new folders.

Make sure to include yarn.lock-file in the code package (package-lock.json in case of npm).

Zip the source code into a package with name: <name>.head.app.<version>.zip For example: site.head.app.1.0.0.zip

The code package must contain a package.json in the root. The build script runs when deploying the site to build content and start script defined in package.json starts the site.

{
  "scripts": {
    "build": "next build",
    "start": "next start",
  },
}

When deploying the package, build runs for each deployment, which builds new static content when the site gets built.

Deploy the front end

To deploy, generate a key in the API tab (see below), and select the environments you intend to deploy to.

Begin with installing EpiCloud to manage deployments of code packages. It can be installed and imported like this using PowerShell:

Install-Module EpiCloud
Import-Module EpiCloud

Then to deploy the code package:

# Set up variables for the environment to deploy to

$projectId = "projectId"
$clientKey = "clientKey"
$clientSecret = "clientSecret"
$targetEnvironment = "Test1"

# Connect EpiCloud module to prepare for deployment
Connect-EpiCloud -ProjectId $projectId -ClientKey $clientKey -ClientSecret $clientSecret

# Upload code package
$sasUrl = Get-EpiDeploymentPackageLocation
Add-EpiDeploymentPackage -SasUrl $sasUrl o-package\testsite.he-Path ./site.head.app.1.0.0.zip

# Deploy code package to the front-end environment and complete the deployment
$deployment = Start-EpiDeployment -DeploymentPackage "testsite.head.app.1.0.0.zip" -TargetEnvironment $targetEnvironment -Wait
$deployment | Complete-EpiDeployment -Wait

Configure Visual Builder

To see your front end preview in CMS (SaaS) Visual Builder:

Go to Settings > Import Data to import a content pack/content model into CMS.

Go to Settings > Applications to create and configure an application in CMS.

Deploy the front end source code from the DXP management portal. Make sure your site has preview routes configured.

Go to Settings > Applications > Select your application > Hostnames > Add hostname to adjust the application configuration in CMS to map domains. Use the hostname from DXP management portal head to map to the app. This enables the site content to show up in the Visual Builder.

Go to Settings > Scheduled jobs to reindex of content in Optimizely Graph.

DXP management portal features

You should be using Opti ID to sign in. First, check that Opti ID is enabled on your Product access for the account:

Log into CMS.

Go to CMS > Product Access > Developer Portal (front end) > Details tab.

Confirm that Opti ID Enabled is selected.

Go to Admin Center > Users > {select a user} > Add Product Access to ensure you user has Power User access to the Developer portal (front end) product.

Click Developer Portal from the top navigation in CMS, or go to the DXP management portal URL, to log in to the DXP management portal and view your front-end hosting project..

Deployment tab

Track the status of deployments and available environments.

Recent Deployments – Displays deployment. The Start (UTC) column shows when the deployment was run. Click on the link to display the deployment log. You can filter the Recent Deployments list from the Target Environment menu.

View deployment log – Select a deployment from the Recent Deployments list to display the log for information about the deployment's success or failure. The following image shows a sample successful deployment.

The following image shows a failed deployment.

Troubleshoot tab

Troubleshoot issues encountered by exporting or viewing real-time logs, restarting the app, purging CDN cache, and more.

Restart site – Select Environment and Site and click Restart Web App. See Restart a web appRestart a web app.

CDN Cache – Click Purge Cache to clear the cache if you, for example, had a problem with an image that needs a version number. See Purge CDN cachePurge CDN cache.

Application Logs – Stream live logs from your instance so you can see what actually happens. You can also generate a download link. See Configure logging.

Open Log Stream Window – Click to stream a live log from your application.

Project Security – Select the level of security you want (Medium or I'm under attack). For example, if you have a distributed denial of service (DDoS) attack or a number of bots try to attack your site, select I'm under attack to help mitigate layer 7 DDoS attacks. Validated users access your website, and suspicious traffic is blocked. See Cloudflare's Under Attack mode article.

Environment information – Select the environment and Click Get Outbound IPs to generate an allow list of outbound IP addresses of the user infrastructure hosting their site.

API tab

Manage deployment API, Graph, and other credentials. The API tab is where you generate the keys you need to trigger deployments

Click Add API Credentials to generate the keys you need to trigger deployments.

App Settings tab

The App Settings tab lets you configure and control settings related to your application. See Environment variables and app settings in Azure App Service for a list of available app setting environment variables.