Docs Developer Site
Next.XP5 - Preview

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:

  1. 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.gradle 
    dependencies {
    ...
    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.

  2. 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.

  3. Redeploy the Enonic app to activate the changes:

    enonic project deploy

  4. Activate the preview

    Select the root item Headless Movie Database and click edit.

    edit site

    Configure the "Headless Movie DB" application by clicking the pencil icon.

    edit site app

    Finally - if you did not change the API token in the Next app, use these values: http://localhost:3000, and mySecretKey.

    edit hmdb app

  5. After applying and saving the changes, you should be able see the live preview in Content Studio.

    morgan freeman preview

That completes the preview setup, moving forward, we’ll make it possible to create pages editorially.

Contents