Skip to content

Instantly share code, notes, and snippets.

@aweber1

aweber1/__readme.md

Last active September 5, 2019 22:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save aweber1/2c73fe38c8c0d6e59e69866d18bf2d69 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save aweber1/2c73fe38c8c0d6e59e69866d18bf2d69 to your computer and use it in GitHub Desktop.
Download ZIP
Sitecore JSS + TypeScript + Manifest + Path Mapping
Raw
__readme.md

Notes

Typical examples of using Sitecore JSS with TypeScript involve using ts-node for the manifest generation process to compile manifest definition files. ts-node uses standard node resolution process to resolve modules, it does not respect the paths property from tsconfig.json which is a TypeScript compiler feature.

If you want to use the TypeScript compiler path mapping feature for manifest generation, it is recommended to use the tsconfig-paths library: https://github.com/dividab/tsconfig-paths

Then you simply need to register tsconfig-paths in config.js when you register ts-node and be sure they are both configured to use the same tsconfig.json file. This can easily be done by setting the TS_NODE_PROJECT environment variable.

Also be sure that the paths and baseUrl properties are properly set in the tsconfig.json file you use for manifest generation. Manifest generation is a separate process from building your JSS+TypeScript app, so it will typically make more sense to have a dedicated tsconfig.json file for manifest generation as opposed to extending the tsconfig.json used by the app.

file/folder structure:

/src
  sitecore-config.ts
/sitecore
  config.js
  tsconfig.json
  /definitions
    something.sitecore.ts
Raw
config.js
// this file is imported by default prior to executing the jss manifest command
// use this to enable transpilation or any other pre-manifest configurations that are needed.
const path = require('path');
const tsconfigPath = path.resolve(__dirname, '../tsconfig.json');
process.env['TS_NODE_PROJECT'] = tsconfigPath;
console.log(
`Enabling TypeScript transpilation for the manifest using configuration '${
process.env['TS_NODE_PROJECT']
}'...`
);
require('ts-node/register');
// be sure to require `tsconfig-paths` after `ts-node`
require('tsconfig-paths/register');
Raw
sitecore-config.js
export const APP_NAME = 'my app yo!';
Raw
something.sitecore.ts
import { CommonFieldTypes, Manifest } from '@sitecore-jss/sitecore-jss-manifest';
import { APP_NAME } from 'app/sitecore-config';
export default function(manifest: Manifest): void {
console.log('APP_Name', APP_NAME);
manifest.addComponent({
name: 'BlahComponent',
fields: [
{
name: 'someifled',
type: CommonFieldTypes.Checkbox,
},
],
});
}
Raw
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"importHelpers": true,
"sourceMap": true,
"declaration": false,
"module": "commonjs",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"noUnusedLocals": false,
"target": "es5",
"newLine": "LF",
"lib": ["es2017", "dom", "esnext.asynciterable"],
"paths": {
"app/*": ["../src/*"]
},
"baseUrl": "."
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment