@spartacus/schematics v1.5.0-RC.0

Getting Started

Spartacus schematics allows you to install Spartacus libraries in your project

Adding Spartacus libraries to your Angular project

Run the following command from your project root:

ng add @spartacus/schematics

Available options

• baseUrl: Base url of your CX OCC backend
• baseSite: Name of your base site
• useMetaTags: Whether or not to configure baseUrl and mediaUrl in the meta tags from index.html
• featureLevel: Application feature level. (default: 1.3)
• overwriteAppComponent: Overwrite content of app.component.html file. (default: false)
• pwa: Include PWA features while constructing application.
• ssr: Include Server-side Rendering configuration.

Other commands

By defaut ng add @spartacus/schematics will add only basic spartacus configuration. You are able extend application with features like PWA or SSR with commands listed below:

• ng g @spartacus/schematics:add-pwa - adds Spartacus-specific PWA module
• ng g @spartacus/schematics:add-ssr - adds server-side rendering configuration
• ng g @spartacus/schematics:add-cms-component - generates a cms component, and adds the CMS component mapping to the specified module (or generates a new module). For more see CMS component schematic

Steps performed by Spartacus schematics

1. Add required dependencies
2. Import Spartacus modules in app.module and setup default configuration
3. Import Spartacus styles to main.scss
4. Add cx-storefront component to your app.component
5. (Optionally) update index.html with Spartacus URL endpoints in meta tags
6. If --pwa flag included:
   • Add PWA/ServiceWorker support for your project
7. If --ssr flag included:
   • Add ssr dependencies
   • Provide additional files required for SSR

CMS component schematic

Available options for CMS component schematic

The following options are available:

• --declareCmsModule - specifies to which module to add the newly generated CMS component. If omitted, a new module is generated.
• --cmsComponentData, alias --cms - inject the CmsComponentData in the new component. By default it is true
• --cmsComponentDataModel, alias --cms-model - Specify the model class for the CmsComponentData, e.g. MyModel. This argument is required if --cmsComponentData is true.
• --cmsComponentDataModelPath, --cms-model-path - Specify the import path for the CmsComponentData. Default is @spartacus/core.

Besides the custom options, the add-cms-component supports almost all options that are available for the Angular's component and module schematics. The full list can be seen here.

The following Angular's options are not supported:

• deprecated options.
• --module option for component - if you want to specify an existing module for the component, use --declareCmsModule. The module option is only applied to the Angular's module schematic.
• --skipImport option.

Examples

Here are some examples how add-cms-component schematic can be used:

• ng g @spartacus/schematics:add-cms-component myAwesomeCms --cms-model=MyModel - generates my-awesome-cms.component.ts component and my-awesome-cms.module.ts module
• ng g @spartacus/schematics:add-cms-component myAwesomeCms --cms-model=MyModel --declareCmsModule=my-cms-path/my-cms - generates my-awesome-cms.component.ts and adds it to the specified my-cms-path/my-cms.module.ts.'s CMS mapping.
• ng g @spartacus/schematics:add-cms-component myAwesomeCms --cms-model=MyModel --module=app - generates my-awesome-cms.component.ts component, my-awesome-cms.module.ts module and imports it to the specified app.module.ts
• ng g @spartacus/schematics:add-cms-component myAwesomeCms --cms-model=MyModel --module=app --declareCmsModule=my-cms-path/my-cms - generates my-awesome-cms.component.ts component and adds it to the specified my-cms-path/my-cms.module.ts module. It also imports my-cms.module.ts to the specified app.module.ts

Building and using Spartacus Schematics from source

This section is for Spartacus developers and anybody else who works with Spartacus source code.

Prerequisites

Install angular schematics globally: npm install -g @angular-devkit/schematics-cli

Building and testing schematics

1. To build schematics use yarn build
2. To run tests use yarn test

Running schematics on separate / new project

1. Run npm pack in schematics directory. It will generate the spartacus-schematics-x.x.x.tgz file.
2. Generate a new Angular app (using ng new command) or choose an existing one
3. Install and run schematics in your app using either:

• ng add path-to-file/spartacus-schematics-x.x.x.tgz (it will execute default schematics)
• yarn add path-to-file/spartacus-schematics-x.x.x.tgz and ng g @spartacus/schematics:add-spartacus