Customizing Disconnected Data
When disconnected mode starts up, it creates a mock version of the JSS services that would run in connected mode on Sitecore.
These mock services may need to be customized to account for server-side customizations to Layout Service, so that disconnected mode receives the same customizations.
The Disconnected Mode Proxy
Disconnected mode starts up a local HTTP server to run the mock APIs. This is defined in the sample apps in scripts/disconnected-mode-proxy
, and this is what will be customized when you want to alter the disconnected mode data.
The default disconnected mode proxy comes with a number of options to customize its data. The sitecore-jss-dev-tools
package exports the DisconnectedLayoutServiceOptions
TypeScript typing that documents the full array of options and their signatures. TS-aware editors, like VS Code, will enable reading this metadata even if the file is not TypeScript.
const proxyOptions = {
appRoot: __dirname,
appName: config.appName,
watchPaths: ['../data'],
language: config.language,
port: 3042,
compilers: ['@babel/register'],
...
};
Customizing the Context
When customizing the Layout Service context on the Sitecore side, you may wish to apply similar customizations when disconnected. The customizeContext
hook allows you to do just that:
const proxyOptions = {
appRoot: __dirname,
customizeContext: (context, route, currentManifest, request, response) => {
return { myCustomContextProperty: 'helloworld', ...context };
},
...
};
Customizing Component Data
When customizing component data using Rendering Contents Resolvers or Integrated GraphQL on the Sitecore side, you may wish to apply similar customizations when disconnected. The customizeRendering
hook allows you to do just that:
const proxyOptions = {
appRoot: __dirname,
customizeRendering: (rendering, rawManifestRendering) => {
// mock integrated GraphQL results for a specific component name
if (rendering.componentName === 'ContentBlock' && rendering.fields) {
rendering.fields = {
data: {
item: {
id: 'mock-graphql-result-id',
heading: {
jss: rendering.fields.heading,
}
}
}
};
return rendering;
}
// customize data based on a flag value added to the component definition on the route
// i.e. in YAML,
// - componentName: Whatever
// addCoolStuff: true
if (rawManifestRendering.dataSource.addCoolStuff) {
return {
coolStuff: [
'React',
'Vue',
],
...transformed,
};
}
// returning falsy will cause JSS to use the default value
return undefined; // is a function
},
...
};
Advanced Customizations
The disconnected server in sample apps defaults to using the createDefaultDisconnectedServer()
helper function. This function provides basic customization APIs and encapsulates the registrations of several middlewares that make the disconnected server work. You can also unpack the function and register the middleware yourself if you need to do advanced customizations that are not supported by the default DisconnectedServerOptions
.