Boilerplate to create custom elements
Boilerplate to create custom elements
git clone https://github.com/aelbore/create-custom-elements.git
npm install
npm start
npm test
.
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
npm run clean.all