Code Monkey home page Code Monkey logo

open-wc-create's Introduction

permalink title section tags
init/index.html
Create Open Web Components
guides
guides

Create Open Web Components

Web component project scaffolding.

Usage

npm init @open-wc

WARNING

npm init requires node 14 & 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.

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:

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:

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

Commands

open-wc-create's People

Contributors

renovate-bot avatar thepassle avatar bennypowers avatar westbrook avatar larsdenbakker avatar stephenwade avatar dakmor avatar renovate[bot] avatar jlengrand avatar btopro avatar mservaising avatar web-padawan avatar vikerman avatar jorenbroekema avatar movrack avatar tornadoblue avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.