Content Studio preview
Contents
In this chapter, you’ll enable Content Studio to load the preview directly from Next.
Task: Enable preview
To get preview going, you need to make a few changes to the Enonic app:
Add the NextJS integration:
The Nextjs library will provide the features we need to setup the preview, and then some.Add it to your dependencies list by adding the following line:
/build.gradledependencies { ... include 'com.enonic.lib:lib-nextjs:<version>' ... }
Ensure <version> is replaced by the most current version available. Visit the library on Enonic Market. Click Get started
and choose the latest version.Update site configuration
To trigger the next.js integration in Content Studio, we must update the controller mappings, and add a configuration form to the site. Replace your current site.xml with this:
src/main/resources/site/site.xml<?xml version="1.0" encoding="UTF-8"?> <site xmlns="urn:enonic:xp:model:1.0"> <x-data name="SoMe" allowContentTypes="person|movie"/> <x-data name="spotlight" allowContentTypes="media:image"/> <form> <input type="TextLine" name="nextjsUrl"> <label>NextJS server URL</label> </input> <input type="TextLine" name="nextjsToken"> <label>NextJS API token</label> </input> </form> <mappings> <mapping controller="/lib/nextjs/proxy.js" order="99"> <pattern>/.*</pattern> </mapping> </mappings> </site>
Studying the file above, you will see the proxy mapping to /.*
, which essentially means "catch all" URL patterns.The form contains one field for the server URL, and one for the API token.Redeploy the Enonic app to activate the changes:
enonic project deploy
Activate the preview
Select the root item
Headless Movie Database
and click edit.Configure the "Headless Movie DB" application by clicking the pencil icon.
Finally - if you did not change the API token in the Next app, use these values:
http://localhost:3000
, andmySecretKey
.After applying and saving the changes, you should be able see the live preview in Content Studio.
That completes the preview setup, moving forward, we’ll make it possible to create pages editorially.