Deploying to production

Contents

In this chapter you will launch cloud instances of both Enonic and Next - link them together, and watch the glorious result.

Introduction

Running a full deployment involves a single instance of Enonic XP, and two instances of the Next.js application - one for previewing, and one for handling the live traffic.

To complete this chapter, we recommend using Enonic to host the XP side of things, and Vercel for the Next apps - Vercel are the makers of Next.js.

Enonic and Next.js are both open source software projects and can be deployed more or less anywhere. Have a look at the Kubernetes operator for Enonic XP if you are keen on hosting it yourself.

Task: Sign up to Enonic and deploy your app

Complete the steps below to deploy your app on Enonic Cloud:

  1. Sign up for a free trial.

  2. Create a new solution using the CMS essentials template

  3. Connect Enonic CLI to the cloud by running this command, and follow the instructions:

    enonic cloud login
  4. Install the enonic app from your project folder by running this command:

    enonic cloud app install
  5. Verify that the app was installed from the list of apps in the Enonic console.

  6. Log into your Enonic XP cloud environment and launch Content Studio to verify that the app automatically initialized the hmdb project and site on the server, just like on your local machine.

    If yo don’t want to re-create your content, you may export and then import content from your local machine, to the server using the Data Toolbox application.

Task: Expose content API via route

In order for the Next app to access the drafts API, you will need to create a so-called route.

The purpose of routes is to expose internal endpoints like :8080/site/<project>/<branch>/<path-to-site> to the internet.
  1. Create a new route called Drafts from the solution console".

    Use the following settings:

    Internal path

    /site/hmdb/draft/hmdb

    Public path

    /drafts

    ID provider

    -empty-

  2. Verify that the route is working by clicking the link in the route details. You should be seeing an error message from the proxy.

  3. Access the API by appending /_graphql to the route URL. You will need this URL when connecting the Next server to the API later.

Task: Add your next.js app to Git

Vercel requires access to a Git repo, where your user has write access.

  1. Create a new Git repo - Vercel supports Github, Gitlab and Bitbucket.

  2. Commit and push all of your Next.js project files to the new repo.

    Make a note of the URL to the new repo, as you will need this in the next step

Taks: Deploy Next app

You are now ready to deploy the preview version of the Next app.

  1. Sign up to Vercel: https://vercel.com/

  2. Create a new project enonic-tutorial-drafts and connect it to the repo you created in step 2.

  3. Add environment variables referencing the drafts API - like this:

    KEY

    CONTENT_API_URL

    VALUE

    <absolute url to the content drafts API>

  4. Verify the result by visiting the app, it will try to render your front-page, if you didn’t import any custom content, you will now see a 404:

    404

    Check the Vercel function logs if you are not getting the expected result.

Task: Enable preview

With a Next.js preview server running, you can now connect it to Content Studio.

  1. Edit the application configuration from Enonic Console/solution/applications/<your app, i.e. Headless Movie DB>, and add the following value (NB: case sensitive).

    nextjsUrl=<absolute url to your next.js drafts server>

  2. Verify that preview is now working in Content Studio by selecting a person item. This should automatically work since person views are hardcoded.

  3. Add some content to your front-page, using the page editor and preview functionality. This will make the last step of the tutorial a bit more interesting, maybe something like this?

    cloud preview

Final task: Go live!

As your final step, deploy a new instance of the Next.js app, which will be used to render the published (aka live) content.

  1. Start by creating the route Live route in the Enonic console, this time use the following values:

    Internal path

    /site/hmdb/master/hmdb

    Public path

    /live

    ID provider

    -empty-

  2. Create a new project enonic-tutorial-live in Vercel, using the same Github repo as before

  3. This time however, Configure the project to access the "Live" API instead of "Drafts" (remember to add the /_graphql extension).

    Once the the server has started, it should render a 404 page once more. This time however, it is because your content has not yet been published.

  4. Publish the content from Content Studio by selecting the site, and then Publish Tree from the top right menu.

  5. After publishing, your site Next server should be live and kicking:

    live

Summary, and whats next?

🎉 Congratulations 🥳 - You've reached the end of this tutorial - we hope you enjoyed it!

The following topics were not covered, but will be added in later versions:

  • Securing your drafts API and preview server

  • Importing and exporting content between instances

  • Caching and performance optimization in Next

  • Multi-site preview handling (i.e. translated sites)

  • and more…​

There are obviously many aspects of Enonic and Next.js that will never be covered by this tutorial, however - to learn more about Enonic, we recommend getting started with the following resources:


Contents