Name		Name	Last commit message	Last commit date
parent directory ..
src		src
.gitignore		.gitignore
package-lock.json		package-lock.json
package.json		package.json
readme.md		readme.md
stencil.config.ts		stencil.config.ts
tsconfig.json		tsconfig.json

readme.md

Frontend example using Stencil

Running this project

Using the command line, from root folder of the project (contains the package.json file):

npm install
npm run start
Point your browser to http://localhost:3333!

Run tests with npm run test.

Create a new component using npm run generate.

Technologies at play

End result

Plain old HTML: elements the browser understands.
Plain old CSS: styling elements in the browser.
JavaScript (compiled for browser compatibility).
Web Components: standards that allow us to create custom elements with associated style+behavior.

During development

Node: JavaScript runtime
NPM: Node package manger (handle dependencies + running package scripts)
TypeScript: Superset of JavaScript, with... types.
Stencil: complier to write web components with nice features such as
- TypeScript
- JSX (syntax to include HTML-like expressions within JavaScript/TypeScript)
SASS: adds extra features on top of CSS.
Jest: testing framework