Create Vanilla App allows you to develop vanilla javascript projects from scratch with support to Webcomponents and Typescript
Create Vanilla App allows you to develop vanilla javascript projects from scratch with support to Webcomponents, Sass and Typescript.
npm install -g create-vanilla-app
create-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
Arrays
Objects
Strings
✅ Chrome ✅ Firefox ✅ Safari ✅ Edge ✅ IE11
npm run prod
Keep calm and code!