# Open Web Component Recommendations Open Web Components provides a set of defaults, recommendations and tools to help facilitate your web component project. Our recommendations include: developing, linting, testing, building, tooling, demoing, publishing and automating. [](code-of-conduct.md) [](https://circleci.com/gh/open-wc/open-wc) [](https://www.browserstack.com/automate/public-build/M2UrSFVRang2OWNuZXlWSlhVc3FUVlJtTDkxMnp6eGFDb2pNakl4bGxnbz0tLUE5RjhCU0NUT1ZWa0NuQ3MySFFWWnc9PQ==--86f7fac07cdbd01dd2b26ae84dc6c8ca49e45b50) [](https://renovatebot.com/) ## Usage ```bash # in a new or existing folder: npm init @open-wc # requires node 10 & npm 6 or higher ``` This will kickstart a menu guiding you through all available actions. ``` $ npm init @open-wc npx: installed 30 in 1.762s _.,,,,,,,,,._ .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 ``` ## Homepage For more details please visit us at [open-wc.org](https://open-wc.org). ## Packages | Package | Version | Description | | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------- | | [building-rollup](./packages/building-rollup) | [](https://www.npmjs.com/package/@open-wc/building-rollup) | Default configuration for working with rollup. | | [building-webpack](./packages/building-webpack) | [](https://www.npmjs.com/package/@open-wc/building-webpack) | Default configuration for working with webpack. | | [chai-dom-equals](./packages/chai-dom-equals) | [](https://www.npmjs.com/package/@open-wc/chai-dom-equals) | Chai Plugin to compare dom and shadow dom trees. Part of open-wc recommendations. | | [create](./packages/create) | [](https://www.npmjs.com/package/@open-wc/create) | Scaffold web components following open-wc recommendations. | | [demoing-storybook](./packages/demoing-storybook) | [](https://www.npmjs.com/package/@open-wc/demoing-storybook) | Storybook configuration following open-wc recommendations. | | [eslint-config](./packages/eslint-config) | [](https://www.npmjs.com/package/@open-wc/eslint-config) | Eslint configuration following open-wc recommendations. | | [es-dev-server](./packages/es-dev-server) | [](https://www.npmjs.com/package/es-dev-server) | Development server for modern web apps. | | [polyfills-loader](./packages/polyfills-loader) | [](https://www.npmjs.com/package/@open-wc/polyfills-loader) | Load web component polyfills using dynamic imports. | | [prettier-config](./packages/prettier-config) | [](https://www.npmjs.com/package/@open-wc/prettier-config) | Prettier configuration following open-wc recommendations. | | [scoped-elements](./packages/scoped-elements) | [](https://www.npmjs.com/package/@open-wc/scoped-elements) | Auto define custom elements to scope them and avoid the name collision. | | [semantic-dom-diff](./packages/semantic-dom-diff) | [](https://www.npmjs.com/package/@open-wc/semantic-dom-diff) | To compare dom and shadow dom trees. Part of open-wc recommendations. | | [testing](./packages/testing) | [](https://www.npmjs.com/package/@open-wc/testing) | Testing following open-wc recommendations. | | [testing-helpers](./packages/testing-helpers) | [](https://www.npmjs.com/package/@open-wc/testing-helpers) | Testing Helpers following open-wc recommendations. | | [testing-karma](./packages/testing-karma) | [](https://www.npmjs.com/package/@open-wc/testing-karma) | Testing with Karma following open-wc recommendations. | | [testing-karma-bs](./packages/testing-karma-bs) | [](https://www.npmjs.com/package/@open-wc/testing-karma-bs) | Testing with Karma using Browserstack following open-wc recommendations. | | [testing-wallaby](./packages/testing-wallaby) | [](https://www.npmjs.com/package/@open-wc/testing-wallaby) | Testing with wallaby following open-wc recommendations. | | [webpack-import-meta-loader](./packages/webpack-import-meta-loader) | [](https://www.npmjs.com/package/@open-wc/webpack-import-meta-loader) | Webpack loader plugin to support import.meta. | ## Contact Feel free to reach out to us on [twitter](https://twitter.com/OpenWc) or create [a github issue](https://github.com/open-wc/open-wc/issues/new) for any feedback or questions you might have. You can also find us on the Polymer slack in the [#open-wc](https://slack.com/share/IUQNUPWUF/awabyN8iYH4dXX6aGpu16ES9/enQtOTc2Nzc2ODEyOTY3LWM5ZGExNGFiMmM4NDY2YWI2MzYwOGY5ZTNlZjk4OGU4NTFhMGJjNmVhNGI4MzVlNTMwNGRiNGIxNjc4MGJhNDg) channel. You can join the Polymer slack by visiting [https://www.polymer-project.org/slack-invite](https://www.polymer-project.org/slack-invite). ## We Proudly Use ## Guide ```bash # bootstrap/setup yarn install # linting npm run lint # local testing npm run test # testing via browserstack npm run test:bs # run commands only for a specific scope lerna run --scope @open-wc/ --stream ```