Using Duet Design System’s 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 inst…


This content originally appeared on Ariel Salminen and was authored by Ariel Salminen

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

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 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.


This content originally appeared on Ariel Salminen and was authored by Ariel Salminen


Print Share Comment Cite Upload Translate Updates
APA

Ariel Salminen | Sciencx (2020-03-23T00:00:00+00:00) Using Duet Design System’s CLI Tools. Retrieved from https://www.scien.cx/2020/03/23/using-duet-design-systems-cli-tools/

MLA
" » Using Duet Design System’s CLI Tools." Ariel Salminen | Sciencx - Monday March 23, 2020, https://www.scien.cx/2020/03/23/using-duet-design-systems-cli-tools/
HARVARD
Ariel Salminen | Sciencx Monday March 23, 2020 » Using Duet Design System’s CLI Tools., viewed ,<https://www.scien.cx/2020/03/23/using-duet-design-systems-cli-tools/>
VANCOUVER
Ariel Salminen | Sciencx - » Using Duet Design System’s CLI Tools. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2020/03/23/using-duet-design-systems-cli-tools/
CHICAGO
" » Using Duet Design System’s CLI Tools." Ariel Salminen | Sciencx - Accessed . https://www.scien.cx/2020/03/23/using-duet-design-systems-cli-tools/
IEEE
" » Using Duet Design System’s CLI Tools." Ariel Salminen | Sciencx [Online]. Available: https://www.scien.cx/2020/03/23/using-duet-design-systems-cli-tools/. [Accessed: ]
rf:citation
» Using Duet Design System’s CLI Tools | Ariel Salminen | Sciencx | https://www.scien.cx/2020/03/23/using-duet-design-systems-cli-tools/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts