Create-vanilla-app NPM

Create Vanilla App 🔧📦

Create Vanilla App allows you to develop vanilla javascript projects from scratch with support to Webcomponents, Sass and Typescript.

Summary

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:

<!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>