Create Vanilla App allows you to develop vanilla javascript projects from scratch with support to Webcomponents, Sass and Typescript.
- Installation
- Create a project
- Getting started
- Scripts availables
- Integration
- Polyfills
- Browsers support
- Todo
npm install -g create-vanilla-appcreate-vanilla-app <name-of-your-project>Launch the following commands to start the application:
npm start| Command | Description |
|---|---|
| npm start | Lift the application in local mode |
| npm run dev | Generate a build in dev mode |
| npm run prod | Generate a build in prod mode |
| npm run dev:legacy | Generate a build in dev mode to support legacy browsers |
| npm run prod:legacy | Generate a build in prod mode to support legacy browsers |
Build tasks will create the following output:
├── dist/
├── styles.min.css
├── bundle.min.js
├── dist/
├── styles.min.css
├── bundle.min.js
├── polyfills.min.js
├── webcomponents-loader.js
├── bundles/ # These scripts will load at runtime
├── webcomponents-ce.js
├── webcomponents-sd-ce-pf.js
├── webcomponents-sd-ce.js
├── webcomponents-sd.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Vanilla App Example Integration</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<app-greetings fullname="Charlotte"></app-greetings>
<!-- If you want support legacy browser just remove this comment
<script src="polyfills.min.js" nomodule></script>
<script src="webcomponents-loader.js"></script>
-->
<script src="bundle.min.js"></script>
</body>
</html>We support the following features:
-
Generics
- Symbol
- fetch
- Promise
- Async / Await
-
Arrays
- entries
- from
- find
- findIndex
- includes
- keys
- values
-
Objects
- assign
- entries
- values
-
Strings
- endsWith
- includes
- startsWith
✅ Chrome
✅ Firefox
✅ Safari
✅ Edge
✅ IE11
npm run prod- Setup Unit Testing
- Setup E2E Testing
Keep calm and code!
