https://github.com/grandemayta/create-vanilla-app

Create Vanilla App allows you to develop vanilla javascript projects from scratch with support to Webcomponents and Typescript
https://github.com/grandemayta/create-vanilla-app

cli typescript vanilla-js webcomponents

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/grandemayta/create-vanilla-app
• Owner: grandemayta
• Created: 2019-11-03T12:25:12.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-04T18:45:37.000Z (almost 2 years ago)
• Last Synced: 2024-09-26T21:23:02.440Z (about 2 months ago)
• Topics: cli, typescript, vanilla-js, webcomponents
• Language: JavaScript
• Homepage:
• Size: 1.07 MB
• Stars: 9
• Watchers: 2
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Create Vanilla App 🔧📦

[![Open Source Love](https://badges.frapsoft.com/os/mit/mit.svg?v=102)](https://github.com/ellerbrock/open-source-badge/)

[![made-with-javascript-doc](https://img.shields.io/badge/Made%20with-Javascript-1f425f.svg)](https://www.sphinx-doc.org/)

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

## Summary

- [Installation](#install)

- [Create a project](#create-a-project)

- [Getting started](#getting-started)

- [Scripts availables](#scripts)

- [Integration](#integration)

    - [Build for modern browsers](#build-for-modern-browsers)

    - [Build with support for legacy browsers](#build-with-support-for-legacy-browsers)

    - [Html example](#html-example)

- [Polyfills](#polyfills)

- [Browsers support](#browsers-support)

- [Todo](#todo)

## Install

```sh

npm install -g create-vanilla-app

```

## Create a Project

```sh

create-vanilla-app 

```

## Getting Started

Launch the following commands to start the application:

```sh

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:

```html

    

    

    Create Vanilla App Example Integration

    

    

    

    

```

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

:white_check_mark: Chrome




:white_check_mark: Firefox




:white_check_mark: Safari




:white_check_mark: Edge




:white_check_mark: IE11

```sh

npm run prod

```

## Todo

- [ ] Setup Unit Testing

- [ ] Setup E2E Testing

Keep calm and code!




[![Open Source Love](https://badges.frapsoft.com/os/v3/open-source.svg?v=102)](https://github.com/ellerbrock/open-source-badge/)