Skip to content

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

Notifications You must be signed in to change notification settings

grandemayta/create-vanilla-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Create Vanilla App 🔧📦

Open Source Love made-with-javascript-doc

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>

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

Keep calm and code!
Open Source Love

About

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

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published