create-custom-elements

Boilerplate to create custom elements

Getting Started

• Clone repository

  git clone https://github.com/aelbore/create-custom-elements.git
  

• Install dependencies

  npm install
  

• Start the Application

  npm start
  

  • this will build, watch the file changes, live reload and open browser
• Run unit test

  npm test
  

Step by Step example

• Star Rating
• Vanilla Javascript

Demo

• plnkr
• stackblitz
• codesandbox

Project Structure

.
├── node_modules 
├── server                                # mock/fake data serve as you api         
├── src                                   # all your code should be inside `src` folder
|   ├─ app                                # Application Project specific folder
|   |  ├─ app.element.html 
|   |  ├─ app.element.scss
|   |  ├─ app.element.ts 
|   |  ├─ index.ts  
|   |  └─ package.json    
|   ├─ elements                           # reusable custom elements 
|   |  ├─ <input>                         # example of web components folder
|   |  |  ├─ src                          # this should mandatory, all source code should be inside `src`
|   |  |  |  ├─ index.ts                  # export .ts file <input.element.ts>
|   |  |  |  ├─ input.element.html        # <optional>, all your markup codes
|   |  |  |  ├─ input.element.scss        # <optional>, all your style codes, you can have `.css`.
|   |  |  |  ├─ input.element.spec.ts     # <optional>, spec file, contain your unit test
|   |  |  |  └─ input.element.ts          # main web component, define your custom elements
|   |  |  └── package.json                # <mandatory> `name` should be same as folder name
|   |  ├─ .....	 	             
|   |  |  
|   ├─ libs
|      ├─ <profile-card>                   # library or micro-app web components
|      |  ├─ src                           # this should mandatory, all source code should be inside `src`
|      |  |  ├─ index.ts                   # <mandatory> export .ts file <profile-card.element.ts>
|      |  |  ├─ profile-card.element.html  # <optional>, all your markup codes
|      |  |  ├─ profile-card.element.scss  # <optional>, all your style codes, you can have `.css`.
|      |  |  ├─ profile-card.element.ts    # <mandatory> main web component, define your custom elements
|      |  |  └─ profile-card.ts            # <optional> define your model, service or utils here.
|      |  └── package.json                 # <mandatory> `name` should be same as folder name
|      ├─ .....	
|
|
├── README.md
├── .devtools.json                        # add config for build and server ie. static folders.  
├── rollup.config.js                      # rollup config, override default config.  
├── gulpfile.js                           # customize your build, add task      
├── package.json
└── tsconfig.json

Delete dist and .tmp folder

npm run clean.all