https://github.com/open-wc/create
Repository for `npm init @open-wc`
https://github.com/open-wc/create
Last synced: 2 months ago
JSON representation
Repository for `npm init @open-wc`
- Host: GitHub
- URL: https://github.com/open-wc/create
- Owner: open-wc
- Created: 2020-10-18T15:21:38.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-10-03T18:13:57.000Z (8 months ago)
- Last Synced: 2024-10-15T11:01:27.607Z (8 months ago)
- Language: JavaScript
- Size: 2.05 MB
- Stars: 22
- Watchers: 3
- Forks: 24
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
---
permalink: 'init/index.html'
title: Create Open Web Components
section: guides
tags:
- guides
---
# Create Open Web Components
Web component project scaffolding.
[//]: # 'AUTO INSERT HEADER PREPUBLISH'
## Usage
```bash
npm init @open-wc
```
WARNING
npm init requires node 18 & 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/docs/development/generator/
`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.
## Options
You may pass options to skip the CLI wizard in part or in whole.
| Option | Type | Description | |
| ----------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | --- |
| `--destinationPath` | path | The path the generator will write files to | |
| `--type` | `scaffold`\|`upgrade` | Choose scaffold to create a new project or upgrade to add features to an existing project | |
| `--scaffoldType` | `wc`\|`app` | The type of project to scaffold. wc for a single published component, app for an application | |
| `--features` | `linting`\|`testing`\|`demoing`\|`building` | Which features to include. linting, testing, demoing, or building | |
| `--typescript` | `true`\|`false` | Whether to use TypeScript in your project | |
| `--tagName` | string | The tag name for the web component or app shell element | |
| `--installDependencies` | `yarn`\|`npm`\|`false` | Whether to install dependencies. Choose npm or yarn to install with those package managers, or false to skip installation | |
| `--writeToDisk` | `true`\|`false` | Whether or not to actually write the files to disk | |
| `--help` | | This help message | |
## Scaffold generators
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.
Example usage:
```bash
npm init @open-wc
# Select "Scaffold a new project"
```
### Available scaffold generators:
- `Web Component`
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.
- `Application`
This generator scaffolds a new starter application. We recommend using this generator at the start of your web component project.
## Features
The above generators are the perfect playgrounds to prototype.
Add linting, testing, demoing and building whenever the need arises.
Example usage:
```bash
cd existing-web-component
npm init @open-wc
# select "Upgrade an existing project" or add features while scaffolding
```
### Available Upgrade features
- `Linting`
This generator adds a complete linting setup with ESLint, Prettier, Husky and commitlint.
- `Testing`
This generator adds a complete testing setup with Web Test Runner.
- `Demoing`
This generator adds a complete demoing setup with Storybook.
- `Building`
This generator adds a complete building setup with Rollup.
For information on how to extend and customize the generator, see the [docs page](https://open-wc.org/docs/development/generator/#extending)
## Commands