Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/doinel1a/vite-vanilla-js
Start a Vanilla JS Web App, SPA, website or landing page using JavaScript, Tailwind CSS, ESLint, Husky, Vite and much more, in JUST 30 seconds, without the hassle of setting up your dev environment.
https://github.com/doinel1a/vite-vanilla-js
boilerplate boilerplate-front-end boilerplate-template javascript js sass scss starter tailwind tailwind-css template vanilla-javascript vanilla-js vite
Last synced: about 1 month ago
JSON representation
Start a Vanilla JS Web App, SPA, website or landing page using JavaScript, Tailwind CSS, ESLint, Husky, Vite and much more, in JUST 30 seconds, without the hassle of setting up your dev environment.
- Host: GitHub
- URL: https://github.com/doinel1a/vite-vanilla-js
- Owner: doinel1a
- License: mit
- Created: 2023-06-11T17:12:12.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-13T13:56:07.000Z (4 months ago)
- Last Synced: 2024-08-13T16:53:16.466Z (4 months ago)
- Topics: boilerplate, boilerplate-front-end, boilerplate-template, javascript, js, sass, scss, starter, tailwind, tailwind-css, template, vanilla-javascript, vanilla-js, vite
- Language: HTML
- Homepage: https://vite-vanilla-js.d1a.app
- Size: 1.11 MB
- Stars: 23
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[node]: https://nodejs.org/en
[yarn]: https://yarnpkg.com
[pnpm]: https://pnpm.io
[demo]: https://vite-vanilla-js.d1a.app
[license]: https://github.com/doinel1a/vite-vanilla-js/blob/main/LICENSE
[code-of-conduct]: https://github.com/doinel1a/vite-vanilla-js/blob/main/CODE_OF_CONDUCT.md
[issues]: https://github.com/doinel1a/vite-vanilla-js/issues
[pulls]: https://github.com/doinel1a/vite-vanilla-js/pulls
[browserslist]: https://browsersl.ist/#q=last+3+versions%2C%3E+0.2%25%2C+not+dead
[graphviz]: https://www.graphviz.org/download
[commitlint]: https://github.com/conventional-changelog/commitlint/#what-is-commitlint
[vite-react-ts-repo]: https://github.com/doinel1a/vite-react-ts-starter
[vite-react-js-repo]: https://github.com/doinel1a/vite-react-js-starter
[vite-vanilla-ts-repo]: https://github.com/doinel1a/vite-vanilla-ts
[vite-vanilla-js-repo]: https://github.com/doinel1a/vite-vanilla-js
[wp-react-ts-repo]: https://github.com/doinel1a/react-ts-starter
[wp-react-js-repo]: ''
[wp-vanilla-ts-repo]: ''
[wp-vanilla-js-repo]: https://github.com/doinel1a/webpack-vanilla-js
[react-icon]: https://skillicons.dev/icons?i=react
[ts-icon]: https://skillicons.dev/icons?i=ts
[js-icon]: https://skillicons.dev/icons?i=js
[tailwind-icon]: https://skillicons.dev/icons?i=tailwind
[chrome-icon]: https://github.com/alrra/browser-logos/blob/main/src/chrome/chrome_64x64.png
[firefox-icon]: https://github.com/alrra/browser-logos/blob/main/src/firefox/firefox_64x64.png
[edge-icon]: https://github.com/alrra/browser-logos/blob/main/src/edge/edge_64x64.png
[opera-icon]: https://github.com/alrra/browser-logos/blob/main/src/opera/opera_64x64.png
[safari-icon]: https://github.com/alrra/browser-logos/blob/main/src/safari/safari_64x64.png
# Vite Vanilla JavaScript — Template
Are you looking for a way to supercharge your development experience and build stunning web applications with ease? You are in the right place!
This development starter template is the ultimate solution to help you getting started on your project in no time, without the hassle of setting up and configuring your development environment from scratch each time you start working.
This template is ideal for front-end developers who want to build modern, fast and reliable web applications with the latest cutting edge technologies such as **JavaScript**, **TailwindCSS**, **ESLint**, **Prettier**, **Husky**, **Vite** and much more!
---
**[Demo][demo]** **|** **[Bug(label: bug)][issues]** **|** **[Feature(label: enhancement)][issues]**
---
## :bookmark: Table of contents
- :computer: [Getting started](#computer-getting-started "Go to 'Getting started' section")
- :battery: [Features](#battery-features "Go to 'Features' section")
- :arrows_clockwise: [Versions](#arrows_clockwise-versions "Go to 'Versions' section")
- :globe_with_meridians: [Browsers support](#globe_with_meridians-browsers-support "Go to 'Browsers support' section")
- :busts_in_silhouette: [Contribute](#busts_in_silhouette-contribute "Go to 'Contribute' section")
- :bookmark_tabs: [License](#bookmark_tabs-license "Go to 'License' section")
- :gem: [Acknowledgements](#gem-acknowledgements "Go to 'Acknowledgements' section")
---
## :computer: Getting started
### Prerequisites:
- JavaScript runtime **[node.js][node]**;
- **(OPTIONAL)** Alternative package manager:
- **[PNPM][pnpm]** `npm install --global pnpm`
or
- **[Yarn][yarn]** `npm install --global yarn`
### Start developing:
- Get the repository:
- click **"Use this template"** or **"Fork"** button
alternately
- **clone** the repository through your terminal:
`git clone https://github.com/doinel1a/vite-vanilla-js YOUR-PROJECT-NAME`;
- Open your terminal or code editor to the path your project is located, and run:
| | **NPM** | **PNPM** | **Yarn** |
| ------------------------------------------------ | ----------------- | -------------- | -------------- |
| To **install** the dependencies | `npm install` | `pnpm install` | `yarn install` |
| To **run** the **development server** | `npm run dev` | `pnpm dev` | `yarn dev` |
| To **build** your app **for production** | `npm run build` | `pnpm build` | `yarn build` |
| To **preview** your **production optimized app** | `npm run preview` | `pnpm preview` | `yarn preview` |
[Back to :arrow_up:](#vite-vanilla-javascript--template "Back to 'Table of contents' section")
---
## :battery: Features
This repository comes 🔋 packed with:
- **JavaScript**;
- **TailwindCSS**;
- **SASS** & **SCSS**;
- **PostCSS**;
- **Playwright**;
- **Vite**;
And with tools that enhance the development experience:
- **ESLint**;
- **Prettier**;
- **Husky**;
- **Commitlint**;
[Back to:arrow_up:](#vite-vanilla-javascript--template "Back to 'Table of contents' section")
---
## :arrows_clockwise: Versions
This repository comes configured with 2 of the industry standards for development tools: **Webpack** and **Vite**.
Both tools support **SWC (Speedy Web Compiler)**, a **Rust-based compiler**; Vite is optimized for it out of the box.
### Vite (SWC compiler)
Is a simple and fast solution thanks to it's "zero-config" approach which offers a smoother development experience.
| React - TypeScript | React - JavaScript | | Vanilla TypeScript | Vanilla JavaScript |
| :-------------------------------------------------------------------------: | :-------------------------------------------------------------------------: | :-: | :----------------------------------------------------: | :-------------------------: |
| ![React][react-icon] & ![TS][ts-icon]
**[Repo][vite-react-ts-repo]** | ![React][react-icon] & ![JS][js-icon]
**[Repo][vite-react-js-repo]** | | ![TS][ts-icon]
**[Repo][vite-vanilla-ts-repo]** | ![JS][js-icon]
**/** |
### Webpack (Babel compiler)
Is more a flexible solution, capable of handling complex configurations.
| React - TypeScript | React - JavaScript | | Vanilla TypeScript | Vanilla JavaScript |
| :-----------------------------------------------------------------------: | :----------------------------------------------------: | :-: | :-----------------------------: | :--------------------------------------------------: |
| ![React][react-icon] & ![TS][ts-icon]
**[Repo][wp-react-ts-repo]** | ![React][react-icon] & ![JS][js-icon]
**Soon!** | | ![TS][ts-icon]
**Soon!** | ![JS][js-icon]
**[Repo][wp-vanilla-js-repo]** |
[Back to:arrow_up:](#vite-vanilla-javascript--template "Back to 'Table of contents' section")
---
## :globe_with_meridians: Browsers support
The provided configuration ensures **92.3%** coverage for all browsers, in particular of the following:
| Chrome | Firefox | Edge | Opera | Safari |
| :---------------------------: | :------------------------------: | :--------------------------: | :------------------: | ---------------------------- |
| ![Google Chrome][chrome-icon] | ![Mozilla Firefox][firefox-icon] | ![Microsoft Edge][edge-icon] | ![Opera][opera-icon] | ![Apple Safari][safari-icon] |
**\*** In order to support a wider percentage of browsers, update the `./.browserslistrc` configuration file:
1. `last 3 versions`: browser version;
2. `> 0.2%`: browser usage statistics;
3. `not dead`: whether the browser is officially supported;
Update the configuration [here][browserslist] and check in real-time the **global browsers support**.
**\* The more versions to support, larger JS and CSS bundles size will be.**
[Back to:arrow_up:](#vite-vanilla-javascript--template "Back to 'Table of contents' section")
---
## :busts_in_silhouette: Contribute
Contributions are what make the open source community such an amazing place to learn, inspire, and create.
Any contribution is greatly appreciated: big or small, it can be documentation updates, adding new features or something bigger.
Please check the [**contributing guide**][code-of-conduct] for details on how to help out and keep in mind that all commits must follow the **[conventional commit format][commitlint]**.
### How to contribute:
1. **[Get started](#computer-getting-started "Go to 'Getting started' section");**
2. **For a new feature:**
1. Create a new branch: `git checkout -b feat/NEW-FEATURE`;
2. Add your changes to the staging area: `git add PATH/TO/FILENAME.EXTENSION`;
3. Commit your changes: `git commit -m "feat: NEW FEATURE"`;
4. Push your new branch: `git push origin feat/NEW-FEATURE`;
3. **For a bug fix:**
1. Create a new branch: `git checkout -b fix/BUG-FIX`;
2. Add your changes to the staging area: `git add PATH/TO/FILENAME.EXTENSION`;
3. Commit your changes: `git commit -m "fix: BUG FIX"`;
4. Push your new branch: `git push origin fix/BUG-FIX`;
4. **Open a new [pull request][pulls];**
[Back to:arrow_up:](#vite-vanilla-javascript--template "Back to 'Table of contents' section")
---
## :bookmark_tabs: License
All logos and trademarks are the property of their respective owners.
Everything else is distributed under the **MIT License** .
See the [LICENSE][license] file for more informations.
[Back to:arrow_up:](#vite-vanilla-javascript--template "Back to 'Table of contents' section")
---
## :gem: Acknowledgements
Special thanks to:
- [alrra](https://github.com/alrra) for [browser-logos](https://github.com/alrra/browser-logos);
- [tandpfun](https://github.com/tandpfun) for [skill-icons](https://github.com/tandpfun/skill-icons);
[Back to:arrow_up:](#vite-vanilla-javascript--template "Back to 'Table of contents' section")