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.