Create Vanilla App 🔧📦
Create Vanilla App allows you to develop vanilla javascript projects from scratch with support to Webcomponents, Sass and Typescript.
Summary
- Installation
- Create a project
- Getting started
- Scripts availables
- Integration
- Polyfills
- Browsers support
- Todo
Install
npm install -g create-vanilla-app
Create a Project
create-vanilla-app <name-of-your-project>
Getting Started
Launch the following commands to start the application:
npm start
Scripts:
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 |
Integration
Build tasks will create the following output:
Build for modern browsers:
├── dist/
├── styles.min.css
├── bundle.min.js
Build with support for legacy browsers:
├── 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
Html example:
Create Vanilla App Example Integration <!-- If you want support legacy browser just remove this comment <script src="polyfills.min.js" nomodule></script> <script src="webcomponents-loader.js"></script> -->
Polyfills
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
Browsers support
✅ Chrome
✅ Firefox
✅ Safari
✅ Edge
✅ IE11
npm run prod
Todo
- Setup Unit Testing
- Setup E2E Testing