CLI
WebComponents.dev comes with a CLI for local development.
Use the CLI with your favorite IDE on your local machine. Works with Visual Studio Code, WebStorm or any other local editor.
Usage
npx wcd-cli@latest
We recommend the use of npx and @latest in order to always run the latest version of the CLI. With this command you never need to upgrade WebComponents.dev's CLI.
Use npx wcd-cli@latest --help to have the latest options and commands details.
Commands
create
Create a new local WebComponents.dev project, based on one of the templates available.
Use npx wcd-cli@latest create --help or npm init wcd -- --help to explore all options.
serve
Renders a project from your local file system.
Use npx wcd-cli@latest serve --help to explore all options.
link
This command brings the power of npm/yarn/pnpm link to your project.
It is useful when working locally on a project that depends on your project. This way, your local project can reference the project in its current state without needing to release it.
The idea is basically to run the link in the directory where you declared your dependency to the project. Under the hood, we detect the package manager you use and call it to do the linking. It supports --watch too, making it a great way to improve your developer experience.
Arguments
| query | the query to your project where query has format "owner/name" |
Options
| --watch | watch mode - automatically update the linked package when the project is updated |
| --npm_dedupe | npm dedupe dependencies - recommended in some cases, like React environments, as React does not support being duplicated |
| --branch | branch (defaults to the main branch) |
| --yarn | use yarn link instead of npm |
Check "Open Link details" button in the top-right corner in WebComponents.dev to find the current --branch value or to copy the entire command.
Please note that we generally comply to the package manager implementation - we really only provide it with the compiled version of your project. Therefore if you meet inconsistencies with
link, it is very possible the behavior comes from the package manager. For example, the linked dependency will be replaced by the actual one when runningnpm install: this is a behavior ofnpmitself.
checkout
Checkouts an existing project locally.
An intended use case is to start working locally on an existing project in combination with the serve command, but it may be used in other situations as it also allows you to get the compiled output of your project with the --compile parameter.
Pay attention that --branch option is not just a branch name, but depends on what type of branch it is (default, live or local) and must include the branch creator ID if present. Check "Open Link details" button in the top-right corner in WebComponents.dev to find the current --branch value.
Use npx wcd-cli@latest checkout --help to explore all options.
export
DEPRECATED: Use checkout instead
Compiles a WebComponents.dev project branch and copies the result to a local folder.
Similarly to checkout the branch name is not just the display name. Check checkout documentation for more details.
Use npx wcd-cli@latest export --help to explore all options. Has --source-only option to export just the sources. This is useful if you didn't connect your project to source control and want to get your raw files locally.