@duetds/cli

Duet Design System CLI

This package includes Duet Design System CLI, project templates, and related tools.

Usage

For usage instructions, please see Duet Design System documentation.

Architecture

This package exports a CLI program create-duet-app. It streamlines the process of creating projects using Duet, and deploying password-protected prototype to github pages, by offering a number of boilerplate templates:

• Vanilla HTML/JavaScript
• 11ty
• 11ty SSR
• React
• Angular

Running create-duet-app does the following:

1. Prompts to select a template
2. Prompts to enter a name for the project
3. Prompts to initialise a git repository
4. Copies selected template to the named directory
5. Copy shared/template.* to named directory (renaming to remove "template" prefix)
6. Copy shared/.github/workflows to named directory
7. Install dependencies

Github pages

The CLI offers the ability to easily deploy password-protected apps/prototypes to github pages.

For information on how to deploy a prototype to github pages please see Sharing Prototypes

For technical and architectural information, please see the architecture document.

How to add new templates

A template has these minimum requirements:

• A unique directory under templates/.
• A readme explaining the template, and how to use
• A package.json (see below for further requirements)
• Content and URL structure roughly matching existing templates:
  • Duet Fonts, tokens, CSS framework included and ready to use
  • Use latest for all Duet dependencies in package.json

The package.json has the following requirements:

1. Have as devDependencies the following packages: crypto-js, yargs, replace-in-file, npm-run-all, ncp
2. Include a script named build:prototype in the scripts field. This is script is called by github actions to build and deploy to github pages

The build:prototype script must meet the following requirements:

1. It must build the project for production
2. It must output to a directory named /dist/$DUET_TOKEN
3. It must ensure all assets and links are relative to /$DUET_PROJECT_NAME/$DUET_TOKEN
   • In the react template, this is done by setting the PUBLIC_URL environment variable before calling react-scripts build
   • In Angular this is done by passing --baseHref=/$DUET_PROJECT_NAME/$DUET_TOKEN/ as a flag to the ng command
   • How this is done varies depending on the technology used in the template
4. After the build is complete, it must run the following code node ./.github/workflows/encrypt.js $DUET_TOKEN [passphrase], where [passphrase] is your chosen password

Copyright

Copyright © 2020 LocalTapiola/Turva.