Create Web Components Project

Basic setup

Prerequisites:

• NodeJS > 16

1. Install the template

   Recommend running install each time a new project is created, in case template package was updated

npm install --global @zywave/create-web-components-project

2. From your project directory run

create-web-components-project

3. Follow the prompts to setup both a new monorepo project and your first web component

   This will create a monorepo to manage multiple packages (web components) and their respective package.json's, and a packages directory with your newly made web component

4. To add more web components run command below, from your monorepo project directory (where the root level package.json is)

create-web-components-project component

5. This runs through web components prompts, and output's the component to a packages directory

6. Setup a project token for Changesets merge request bot

   • Once newly created project repo is on Gitlab, lets add a "project access token"
     • Settings > Access Tokens > Project Access Tokens
     • Fill out fields as so:
       • Token name: Changesets_Bot
       • Clear the expiration date
       • Select a role: Reporter
       • Select scopes: API
     • Copy the generated token value to clipboard, you only will see this value once
   • Add the token as a project variable
     • Settings > CI/CD > Variables > Add variable
     • Fill out fields as so:
       • Key: Changesets_Bot
       • Value: (paste your token value)
       • Protect variable: unchecked
       • Mask variable: checked
     • Add variable
   • Changesets is vital to semver bumping packages when they're updated and is needed to release package updates, and this token we setup is for a bot as a failsafe to teach people how to use changesets if it's missing (or even needed) for a merge request
     • See your newly created project's README for additional release and Changesets info

CLI documentation

Commands

Default (no command)

Default (no command) example:

create-web-components-project

Project is setup in current working directory

Default (no command) with --output option example:

create-web-components-project --output=../my/relative/path-dir

Project is setup relative to output value given, this directory must already exist

For either configuration default command will setup:

• A monorepo project
• A web component
  • Behind the scenes the component command is invoked, more details on: component command
• Installs NPM dependencies
• Builds project

component command

Prerequisites:

1. The default command was executed to setup a monorepo project
2. Always run the component command from the monorepo root directory (where the root level package.json is)

Component example:

create-web-components-project component

A component is added to the monorepo project, defaulting to the packages directory

Component with --output option example:

create-web-components-project component --output=my/custom-packages/dir

A component is added to the monorepo project, relative to output value given, this directory must already exist