npm package: @reboot-wc/create
Description: Easily setup all the tools of Open Web Components.
Author: open-wc
Latest version: 0.38.69

---
permalink: 'init/index.html'
title: Crear Web Components
section: guides
tags:
  - guides
---

# Crear Web Components

Andamiaje para proyectos en Web components

[//]: # 'AUTO INSERT HEADER PREPUBLISH'

## Usage

```bash
npm init @reboot-wc
```

<div class="custom-block warning"><p class="custom-block-title">Advertencia</p> <p><code>npm init</code> requiere node 14 &amp; npm 6 o superior</p></div>

Éste proceso iniciara un menú guiado através de todas las opciones disponibles

    $ npm init @reboot-wc
    npx: installed 14 in 4.074s

```
██████╗ ███████╗██████╗  ██████╗  ██████╗ ████████╗     
██╔══██╗██╔════╝██╔══██╗██╔═══██╗██╔═══██╗╚══██╔══╝   Open Web Components
██████╔╝█████╗  ██████╔╝██║   ██║██║   ██║   ██║   
██╔══██╗██╔══╝  ██╔══██╗██║   ██║██║   ██║   ██║   
██║  ██║███████╗██████╔╝╚██████╔╝╚██████╔╝   ██║   Estándares para un desarrollo web moderno más rápido
╚═╝  ╚═╝╚══════╝╚═════╝  ╚═════╝  ╚═════╝    ╚═╝     

          Ctrl+C or Esc para salir


    ¿Que deseas hacer? › - Utiliza las flechas. Enter para selecionar.
    ❯  Crear andamio arquetipo para un nuevo proyecto
       Actualizar un proyecto existente
```

## Opciones

Se pueden pasar parametros para saltarse las preguntas del wizard parcialmente o en su totalidad

| Option                  | Type                                        | Description                                                                                                               |     |
| ----------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | --- |
| `--destinationPath`     | path                                        | La ruta donde el generador escribirá los archivos to                                                                                |     |
| `--type`                | `scaffold`\|`upgrade`                       | scaffold para crear un andamio en un nuevo proyecto o upgrade para actualizar un proyecto existente                                 |     |
| `--scaffoldType`        | `wc`\|`app`                                 | El tipo de proyecto a crear el andamio. wc para un componente simple o app para una aplicación                              |     |
| `--features`            | `linting`\|`testing`\|`demoing`\|`building` | Qué características incluir. linting, testing, demoing, o building                                                         |     |
| `--typescript`          | `true`\|`false`                             | Si se desea utilizar TypeScript en el proyecto                                                                                 |     |
| `--tagName`             | string                                      | La etiqueta para el web component o elemento shell                                                                    |     |
| `--installDependencies` | `yarn`\|`npm`\|`false`                      | Si se desea instalar dependencias. Elegir npm o yarn para instalarlas o false para saltar la instalación |     |
| `--writeToDisk`         | `true`\|`false`                             | ¿Escribir los archivos al disco?                                                                        |     |
| `--help`                |                                             | Este mensaje de ayuda                                                                                                          |     |

## Generador de Andamio

Éste generador te ayuda a iniciar una nueva app o web component.
Creará una nueva carpeta y configurará todo lo necesario para iniciar inmediatamente.

Ejemplo de uso:

```bash
npm init @reboot-wc
# Seleccionar "Andamiar un nuevo proyecto"
```

### Generadores de Andamio disponibls:

- `Web Component`<br/>
  Este generador crea un andamio inciial de proyecto para crear un web component. Se recomienda cuando se desea desarrollar y publicar un componente individual.
  <br/>

- `Application`<br/>
  Este generador crea un andamio inicial de proyecto para crear una aplicación. Se recomienda cuando se desea iniciar un proyecto basado en web components
  <br/>

## Características

Los generadores anteriores son el campo de juego ideal para prototipar.
Se puede agregar linting, testing, demo y building cuando sea necesario.

Ejemplo de uso:

```bash
cd existing-web-component
npm init @reboot-wc
# seleccionar "Actualizar un proyecto existente" o agregar características  mientras se realiza el andamio
```

### Características dispponibles para actualización

- `Linting`<br>
  Este generador agrega una configuracion completa de lintin con ESlint, Prettier, Husky y commitlint
  <br/>

- `Testing`<br>
  Este generador agrega una configuración completa de pruebas con Web Test Runner y Puppeteer
  <br/>

- `Demoing`<br>
  Este generador agrega una configuración completa con Storybook
  <br/>

- `Building`<br>
  Este generador agrega una configuración crompleta con Rollup
  <br/>