Generating Documentation

Learn how to generate documentation for Ionic projects using Compodoc and SassDoc.

Configuring publishing settings

To publish our documented code, we need to run both the Compodoc and SassDoc utilities from the command line using NPM.

Fortunately, we can embed and configure a task within the package.json file to publish the TypeScript and Sass documentation for the animations-app project. This will then be run from the command line.

Within the scripts section of the package.json file for the animations-app project, enter the following configuration (some lines have been removed for readability):

"scripts": {
  // ...
  "docs": "./node_modules/.bin/compodoc -p ./tsconfig.json -d ./documentation/jsdocs -n \"AnimationApp Docs\" -e html && sassdoc ./src/theme/app.mixins.scss -d ./documentation/sassdoc"
},

Here, we’ve introduced a script named docs (pretty imaginative name, huh?) which runs both the Compodoc and SassDoc utilities using the following command line instructions:

  • The ./node_modules/.bin/compodoc command is a path to the Compodoc utility.
  • The -p ./tsconfig.json command is a command-line flag indicating the configuration file we want the Compodoc utility to use, which we’ll get to in the next section.
  • The -d ./documentation/jsdocs command is an optional command line flag that allows us to specify the destination directory where we want the HTML documentation to be published to. If this location doesn’t exist, it will be created.
  • The -n \"AnimationApp Docs\" command is an optional command line flag that provides a custom name for the published documentation.
  • The -e html command is an optional command line flag that allows us to determine the export format for the published documentation (JSON or HTML, default to HTML).
  • The && command signifies that we wish to run another command.
  • The sassdoc is the name of the SassDoc utility that we want to run.
  • The ./src/theme/app.mixins.scss command is the path to or name of the Sass file(s) that we want the SassDoc utility to generate documentation for.
  • The -d ./documentation/sassdoc command is an optional command line flag allowing us to specify the destination directory where we want the HTML documentation to be published to, and if this location doesn’t exist, it will be created.

Get hands-on with 1200+ tech skills courses.