Deploying to production

Contents

In this chapter is optional, but gives you insight into running Next in production mode, and how to configure XP to access the preview server on a different URL.

Dev vs Prod

So far, you have been running Next in dev mode. Before proceeding to live servers - you should try running the app in production mode locally. When running in production mode Next optimizes the build and performance of the app.

Task: Production mode

The Next app has three config files .env holds common values, while .env.development and .env.production are runmode-specific.
  1. Verify that your production configuration references the draft API:

    .env.production
    ...
    
    CONTENT_API_URL=http://localhost:8080/site/hmdb/draft/hmdb/_graphql
    When compared to the .env.development configuration, the main difference is referencing the master branch, vs the draft branch. The master branch holds your published content.
  2. Start Next in production mode:

    npm run prod

    When pointing your browser to http://localhost:4242, you should see see the draft items, like in dev mode. This time however - Next is running in optimized mode, which is what you will normally use for server deployments. Sweet!

    As you may have noticed, this has caused preview to stop working, simply because Next is now running on a different port :4242.

Task: Preview location

Let’s have a look at how you can configure your app and SDK use a different location than the default localhost:3000.

When working in your local Enonic SDK, the sandboxes are stored in your home directory and the .enonic/ folder.

  1. Create a configuration file in your sandbox, with the following value:

    .enonic/sandboxes/<mysandbox>/home/config/<app-name>.cfg
    nextjsUrl=http://localhost:4242

    XP will automatically pickup the configuration and inject it in your app.

  2. Refresh item in Content Studio, and you should once again see the preview.

Task: Rendering live content

So far, we have always been rendering draft items - with a simple switch, next can also render published items.

  1. Update your next configuration to reference the master branch API instead:

    .env.production
    ...
    
    CONTENT_API_URL=http://localhost:8080/site/hmdb/master/hmdb/_graphql
    When compared to the .env.development configuration, the main difference is referencing the master branch, vs the draft branch. The master branch holds your published content.
  2. Restart Next, still using production mode:

    npm run prod

    At this point, your site has not yet been published - and Next will not be able to access the API and it’s content.

    When pointing your browser to http://localhost:4242, you should see the 404 error page.

    404

  3. From Content Studio, select your site and publish it using the Publish Tree option from the top right action menu.

    "Mark as ready" In order to publish items, they all need to be marked as "Ready", you can quickly mark all relevant items as ready directly within the publishing wizard if needed.

    publish wizard

    After publishing, Next should now be rendering your site once again. This time however - it renders the published items.

With production mode, and live content tested - its time to start playing with real servers!


Contents