Create Open Web Components
npm init @open-wc
npm init requires node 10 & npm 6 or higher
This will kickstart a menu guiding you through all available actions.
$ npm init @open-wc npx: installed 14 in 4.074s _.,,,,,,,,,._ .d'' ``b. Open Web Components Recommendations .p' Open `q. .d' Web Components `b. Start or upgrade your web component project with .d' `b. ease. All our recommendations at your fingertips. :: ................. :: `p. .q' See more details at https://open-wc.org/init/ `p. open-wc.org .q' `b. @openWc .d' `q.. ..,' Note: you can exit any time with Ctrl+C or Esc '',,,,,,,,,,'' ? What would you like to do today? › - Use arrow-keys. Return to submit. ❯ Scaffold a new project Upgrade an existing project
Our generators are very modular you can pick and choose as you see fit.
These generators help you kickstart a new app or web component. They will create a new folder and set up everything you need to get started immediately.
npm init @open-wc # Select "Scaffold a new project"
Available scaffold generators:
This generator scaffolds a starting point for a web component. We recommend using this generator when you want to develop and publish a single web component.
This generator scaffolds a minimal application for quick prototyping, and does not come with any linting, testing, or building configs.
This generator scaffolds a new starter application. We recommend using this generator at the start of your web component project.
This generator will internally select the following features for you:
- linting - testing - building rollup
The above generators are the perfect playgrounds to prototype. Add linting, testing, demoing and building whenever the need arises.
cd existing-web-component npm init @open-wc # select "Upgrade an existing project" or add features while scaffolding
This generator adds a complete linting setup with ESLint, Prettier, Husky and commitlint.
This generator adds a complete testing setup with Karma, and Karma Browserstack.
This generator adds a complete demoing setup with Storybook.
Building > Rollup
This generator adds a complete building setup with rollup.
Building > Webpack
This generator adds a complete building setup with webpack.
This generator adds a complete automating setup with CircleCi.