Build NextJS app on CI without accessing Sitecore

Question

I've got a JSS application created using Next.js Getting Started template. During development, when I have local Sitecore instance runnung, I can build the app using jss build command. On the CI server the app is being built when the rendering container starts which seems too late. If there are build errors, the container will never start. See the Docker file fragment:

EXPOSE 3000
ENTRYPOINT "npm run start:connected"

To prevent that, I'd like to build next.js app in advance. Ideally, on a pull request validation. But, if executed without Sitecore instance running, the jss build fails with connection error:

info  - Creating an optimized production build
info  - Compiled successfully

> Build error occurred
FetchError: request to https://cm.localhost/sitecore/api/graph/edge failed, reason: connect ECONNREFUSED 127.0.0.1:443

It even does what I need - compiles the frontend app. It just needs to be stopoed before sending the request to Sitecore. How to do that?

Answer 1

One solution is to introduce a CI=true environment variable on your build server (or Azure DevOps pipeline). With it being defined only on your build server, you can adjust your application code not to call Sitecore during the build process.

In [[...path]].tsx, in the getStaticPaths function, your app is calling the Sitecore sitemap fetcher to get all the routes defined in your content tree. This is the call you can skip with that extra environment variable.

The original code looks like this:

if (process.env.NODE_ENV !== 'development') {
  const paths = await sitemapFetcher.fetch(context);
  ...
}

The modified code can look like this:

if (process.env.NODE_ENV !== 'development' && process.env.CI !== 'true') {
  const paths = await sitemapFetcher.fetch(context);
  ...
}

This will skip assembling all of your Sitecore pages with their renderings. So there might still be runtime errors. However, the rest of the code will be compiled and all of the code will be checked for type issues by the TypeScript compiler.

It seems like starting with the upcoming v21 release of Sitecore JSS, the sample application will come with a similar feature using a different environment variable:

if (process.env.NODE_ENV !== 'development' && !process.env.DISABLE_SSG_FETCH) {
  ... 
}

Source: https://github.com/Sitecore/jss/commit/cc6a5878cce723db26983a727c02cc2c19448bfa