https://github.com/m4thieulavoie/webcomponents-starter

Starter project with Web Components, TypeScript and Webpack support out of the box
https://github.com/m4thieulavoie/webcomponents-starter

html javascript sass typescript vaadin web-components webcomponents webpack

Last synced: 11 months ago
JSON representation

Starter project with Web Components, TypeScript and Webpack support out of the box

• Host: GitHub
• URL: https://github.com/m4thieulavoie/webcomponents-starter
• Owner: m4thieulavoie
• License: mit
• Created: 2020-12-19T18:05:58.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2024-05-18T00:38:21.000Z (about 2 years ago)
• Last Synced: 2024-05-18T12:35:14.544Z (about 2 years ago)
• Topics: html, javascript, sass, typescript, vaadin, web-components, webcomponents, webpack
• Language: TypeScript
• Homepage:
• Size: 2.17 MB
• Stars: 5
• Watchers: 3
• Forks: 0
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
# webcomponents-starter

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

[![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com/)

[![CircleCI](https://circleci.com/gh/circleci/circleci-docs.svg?style=shield)](https://circleci.com/gh/m4thieulavoie/webcomponents-starter)

`webcomponents-starter` aims to be a battery-included starter project for any Web Components enthousiasth. Its goal is to accelerate your development process by providing all the behind-the-scenes tools, such as

- Webpack

- Typescript

- SASS

- Prettier/eslint/stylelint

- A few Web Components examples (Made with FAST here)

- vaadin router

This repo is based on this [vaadin article](https://vaadin.com/learn/tutorials/using-web-components) for Web Components in Webpack, and this [Webpack article](https://webpack.js.org/guides/typescript/) for the Typescript support

## Getting started

### Clone the project

```bash

git clone git@github.com:m4thieulavoie/webcomponents-starter.git

```

### Install dependencies

Then, to init the project

```bash

cd webcomponents-starter

npm install

```

### Start the project

If you want to run the project, simply run

```bash

npm start

```

`Webpack` will then indicate you to open `localhost:3000`. When you'll do so, you'll see the project running.

## Web Components

### Underlying framework

For the sake of this project, we rely on [FAST Components](https://github.com/microsoft/fast) to accelerate the development of components. Definitely feel free to get rid of the dependency and add your favourite framework if you feel like it!

### Polyfills

We provide `@webcomponents/webcomponentsjs` in the project, but disabled it by default (for bundle size reasons). If you want to support older browsers, head in `index.ts` and uncomment the line that `require`s `webcomponentsjs`.