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.
We recommend the use of
@latest in order to always run the latest version of the CLI. With this command you never need to upgrade WebComponents.dev's CLI.
npx wcd-cli@latest --help to have the latest options and commands details.
Create a new local WebComponents.dev project, based on one of the templates available.
npx wcd-cli@latest create --help or
npm init wcd -- --help to explore all options.
Renders a project from your local file system.
npx wcd-cli@latest serve --help to explore all options.
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.
|query||the query to your project where query has format "owner/name"|
|--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 running
npm install: this is a behavior of
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
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
npx wcd-cli@latest checkout --help to explore all options.
Compiles a WebComponents.dev project branch and copies the result to a local folder.
checkout the branch name is not just the display name. Check
checkout documentation for more details.
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.