Tailwind Logo

Connect to CMS running on Docker with Next.js project

XM Cloud

Published: 2023-12-05

We previously showed you how to connect your local Next.js project to XM Cloud. So is it easy to do this if you are running in a local container? In this article, we will check this.

Prerequisite

We will check the configuration of the CM server of XM Cloud that is running locally. First, in the default configuration, the hostname is as follows

  • https://xmcloudcm.localhost

Then go into the CM server and get the API key. You will use the ID of the item in /sitecore/system/Settings/Services/API Keys/xmcloudpreview. Set these two values in src\sxastarter\.env.

xmclocal01.png

We are now ready to go. Try connecting with the following command.

PowerShell 
jss start:connected

After startup, the following error message appears

Plain Text 
  ▲ Next.js 13.5.3
  - Local:        http://localhost:3000
  - Environments: .env

 ✓ Ready in 3.1s
 ✓ Compiled /src/middleware in 279ms (202 modules)
 ✓ Compiled /[[...path]] in 463ms (587 modules)
 ✓ Compiled /_error in 272ms (587 modules)
 ⨯ FetchError: request to https://xmcloudcm.localhost/sitecore/api/graph/edge failed, reason: unable to verify the first certificate        
    at ClientRequest.<anonymous> (C:\projects\xmc-demo-jp\src\sxastarter\node_modules\@sitecore-jss\sitecore-jss\node_modules\node-fetch\lib\index.js:1501:11)
    at ClientRequest.emit (node:events:517:28)
    at TLSSocket.socketErrorListener (node:_http_client:501:9)
    at TLSSocket.emit (node:events:517:28)
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  type: 'system',
  errno: 'UNABLE_TO_VERIFY_LEAF_SIGNATURE',
  code: 'UNABLE_TO_VERIFY_LEAF_SIGNATURE',
  page: '/_site_sitecoredemo-jp'
}

This is an error when Node.js tries to access a Sitecore instance that is up and running with a self-certificate.

xmclocal02.png

As a workaround, add the following line to the .env file

Plain Text 
NODE_TLS_REJECT_UNAUTHORIZED=0

Now you can access the local CMS and check the page display.

xmclocal02.png

Summary

This setting is only available locally using a self-certificate, so it is not necessary to set it for XM Cloud, which is actually running on SaaS. Use this setting as needed.

Tags