Content Studio preview
Contents
In this chapter, we’ll enable editors to preview the Next rendering directly from Content Studio.
Task: Enable preview
To get preview working, we need to make a few changes to the Enonic application:
Follow the steps below to get it working:
-
Add a proxy controller, that can fetch rendered HTML and assets from the Next server
Rather than implementing this ourselves, we’ll simply add the Nextjs proxy library to the Enonic application we created earlier.
The proxy is optimized for Next, as it performs some special handling and processing related to assets and the /_next path.
Add the include line below to your project’s build.gradle filedependencies { ... include 'com.enonic.lib:lib-nextjs-proxy:<version>' ... }
<version> must be replaced by the current version. Visit the library on Enonic Market. Click Get started
and choose the latest version. -
Add a controller mapping
In this step, we will activate Content Studio’s preview to use the proxy
Update the
site.xml
, mappings section to look like this:src/main/resources/site/site.xml... <mappings> <mapping controller="/controllers/graphql.js" order="50"> <pattern>/_graphql</pattern> </mapping> <mapping controller="/lib/nextjs-proxy/proxy.js" order="99"> <pattern>/.*</pattern> </mapping> </mappings> ...
This effectively replaces the preview that shipped with the app, with the proxy. All requests excluding
/_graphql
(which contains the headless API) will now be be handled by the proxy instead - as you can see from the/.*
pattern, which essentially means "catch all" URL patterns.If the headless API mappings come in conflicts with your Next.js app, you can always change the mapping above. Redeploy the Enonic app after saving the changes:
enonic project deploy
-
Verify the preview
By default, the proxy is configured to access the Next.js server on localhost:3000, later we will look into how this can be changed - but essentially this means everything should be working instantly.
From Content Studio, select (or edit) any item in the content hierarchy, and it should be rendered by Next.js and visible in the preview panel on the right:
That completes the preview setup, moving forward, we’ll make it possible to build pages editorially.