2

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?

1 Answer 1

2

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

2
  • What is the downside of skipping static path collection when running in SSG? Mar 10, 2023 at 13:46
  • 1
    Skipping static path collection when running in SSG will result in no pages being statically generated. All pages will be built and cached during Incremental Static Revalidation (ISR) when a first visitor will request each page. The first visit of each page might result in an HTTP 404 error while the page is being built and cached in the background. Oct 3, 2023 at 0:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.