Using CLI Tools #

Following this tutorial you will learn how to utilize Duet’s Command Line Interface to create simple websites that can be shared via GitHub Pages, Amazon S3, and Azure Storage.

Before moving further, please make sure you have Node.js 12.x or newer installed. You can install the latest version through their website.

For guidance on deploying prototypes created with the Duet CLI to Github pages, please refer to Sharing Prototypes.

Getting started #

As the first step, you will want to install Duet’s Command Line Interface globally on your machine using Node Package Manager. To do so, run the following command in your terminal:

npm install -g @duetds/cli

Once you’ve installed the CLI package, you can open up any directory in your terminal and run Duet’s “create” command. Create command allows you to quickly set up a development environment with everything you might need from Duet preconfigured:

$ create-duet-app
or 
$ @duetds/cli 
or
$ cda

Alternatively, you can run the CLI without having to install by using npx, which is included with npm:

npx @duetds/cli

Running either of the above commands will next ask you to choose the template that you want to use in your project:

Please choose which Duet template to use (Use arrow keys)

  ❯ Eleventy
    Eleventy-SSR
    HTML
    Angular
    React

Picking Eleventy or Eleventy-SSR generates a multi-page project with features like global navigation and footer (SSR in this context means “Server Side Rendered”). The HTML option generates a simple one page project that has fonts, components, and CSS Framework preloaded. The Angular option generates an angular project configured to use the @duetds/angular package, fonts, CSS framework, and a basic router/multi-page setup. The React option generates a react project derived from create-react-app, which comes configured to use the @duetds/react package, fonts, and CSS framework.

The full feature set for both Eleventy templates include:

Preconfigured Eleventy project starter with commands for developing, testing, and building the project.
Everything you need to create a simple production ready static website: Header and Footer partials, global navigation, LocalTapiola favicons, Manifest files, Robots.txt, and HTML/CSS/JS minification.
SSR (Server Side Rendering) for Duet Web Components.
Use Duet Design Tokens in SCSS without configuration.
Additionally comes with Duet Fonts and Duet CSS Framework preconfigured.

Once you’ve picked the template, you will be next asked to from a list of available versions, these reflect the versions of the framework used within the templates, for instance angular/13.1.0 would respond to the angular-cli version of 13.1.0

Please choose a version

  ❯ 12.2.14
    13.1.0
    13.10.12

Once you’ve picked the template, you will be next asked to enter a name for the project. This is also the name of the directory that will be generated. By default, if you just hit enter, the project will be called “duet-prototype”:

Enter a name for this project (duet-prototype)

Finally, the last step asks whether you want to initialize a GIT repository or not. This defaults to “No”:

Initialize a git repository? (y/N)

After this Duet’s Command Line Interface will generate a project for you and show step by step what’s happening:

Initialize a git repository? Yes

  ✔ Create project directory
  ✔ Copy project files
  ✔ Create build and deploy automation
  ✔ Configure .gitignore
  ✔ Initialize git
  ✔ Install dependencies

Once finished, run cd [project-name] and refer to the README.md file inside this directory for further template specific usage instructions.

Troubleshooting #

If you experience any issues while getting set up with Duet CLI, please head over to the Support page for more guidelines and help.

Edit