Docs Developer Site
DeveloperDocsNext.xp1.xDeployment

Deploying to production

Contents

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

Introduction

To complete this chapter, you´ll be using Enonic to host the XP side of things, and Vercel for the front-end - Vercel are the makers of Next.js.

Both Enonic and Next.js are open source software projects and can be deployed more or less anywhere. Have a look at the Enonic platform hosting page for more details.

Task: Sign up to Enonic

Create an account to get a free developer instance of Enonic XP

  1. Sign up for a free developer instance.

  2. Create a new solution using the CMS essentials template. This will install applications like Content Studio and Guillotine automatically.

When the new solution has started, launch Enonic XP Admin to verify that everything is up and running.

Task: Install your app

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

    enonic cloud login

  2. Install your enonic app directly from the app folder by running this command:

    enonic cloud app install

  3. Verify that the app was installed from Solution → Applications in the Enonic Console.

  4. From XP Admin, open Content Studio to verify that your app automatically initialized the Movie DB project and imported content on the server, just like on your local machine.

Task: Expose API via route

The purpose of routes is to expose APIs and other endpoints in Enonic XP like :8080/site/<project>/<branch> to the internet.

  1. Create a new route called "API" from Solution → Routes.

    Use the following settings:

    Internal path

    /site/hmdb

    Public path

    /api

    ID provider

    -empty-

  2. Make a note of the route URL - you will find it in the route details.

The URL should look something like this: https://account-solution-environment.enonic.net/api.

Task: Add your front-end to Git

Vercel will need to access the code from 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 your Next.js app files to a new Git repo.

Task: Deploy Next app

You are now ready to deploy the the front-end application.

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

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

  3. Add the following environment variables to the project (name:value):

    • CONTENT_API_DRAFT:<enonic route URL>/draft

    • CONTENT_API_MASTER:<enonic route URL>/master

    • API_TOKEN:<yourSecret>

  4. Verify the result. The front-page of your app should now display a 404 - as you are back to the originally imported content without a site.

    Make a note of the URL to the Vercel app, you will need it later

    404

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

Task: Link Content Studio to Vercel

With the front-end running, you can finally link it to Content Studio, and start building pages again.

You now have to create your site and tree structure once more, or for convenience, you may export content from your local machine, and importing it to the server using the Data Toolbox app.

  1. Install the Next.XP app Solution → Applications → Install → Search for Next.XP, select it an click install

  2. Add configuration. This time, rather than configuring the app within the site, do this via config files.

    This is safer and more flexible than storing the configuration within the content.

    console configure app

    Add the following to the app config field: 
    nextjs.url = <Vercel app URL>
nextjs.secret = <yourSecret>
    To support multiple sites and front-ends, use this format instead: 
    nextjs.<projectID>.<siteName>.url = <Vercel app URL>
nextjs.<projectID>.<siteName>.secret = <yourSecret>
    If you imported content from your local environment, the following two steps can be skipped

  3. Add the Next.XP app to the site. Since you have already placed configuration on file, simply adding the app to the site will do the trick.

  4. Save and verify that the configuration is working by testing the Content Studio preview.

Task: Publish a page

It’s time to test that everything is working.

  1. If you did not import content, create the front-page (once again) by using the page editor. Maybe something like this will do?

    cloud preview

  2. Go live by publishing the new page, and verify that your live site gets updated. Voila!

    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 covered in later versions of this tutorial:

  • Handling Rich text in form fields

  • Multi-site / localization

  • and more…​

There are other aspects of Enonic and Next.js that will never be covered by this tutorial - to learn more about Enonic check out the following resources:

Contents

Contents