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 TypeScript, TailwindCSS, ESLint, Prettier, Husky, Vite and much more!
Demo | Bug(label: bug) | Feature(label: enhancement)
- 💻 Getting started
- 🔋 Features
- 🔃 Versions
- 🌐 Browsers support
- 👥 Contribute
- 📑 License
- 💎 Acknowledgements
- JavaScript runtime node.js;
- (OPTIONAL) Alternative package manager:
-
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-ts YOUR-PROJECT-NAME
;
- click "Use this template" or "Fork" button
-
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
This repository comes 🔋 packed with:
- TypeScript;
- TailwindCSS;
- SASS;
- PostCSS;
- Playwright;
- Vite;
And with tools that enhance the development experience:
- ESLint;
- Prettier;
- Husky;
- Commitlint;
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.
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 | |
---|---|---|---|---|
Repo |
Repo |
/ |
Repo |
Is more a flexible solution, capable of handling complex configurations.
React - TypeScript | React - JavaScript | Vanilla TypeScript | Vanilla JavaScript | |
---|---|---|---|---|
Repo |
Soon! |
Soon! |
Repo |
The provided configuration ensures 92.3% coverage for all browsers, in particular of the following:
Chrome | Firefox | Edge | Opera | Safari |
---|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
* In order to support a wider percentage of browsers, update the ./.browserslistrc
configuration file:
last 3 versions
: browser version;> 0.2%
: browser usage statistics;not dead
: whether the browser is officially supported;
Update the configuration here and check in real-time the global browsers support.
* The more versions to support, larger JS and CSS bundles size will be.
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 for details on how to help out and keep in mind that all commits must follow the conventional commit format.
- Get started;
- For a new feature:
- Create a new branch:
git checkout -b feat/NEW-FEATURE
; - Add your changes to the staging area:
git add PATH/TO/FILENAME.EXTENSION
; - Commit your changes:
git commit -m "feat: NEW FEATURE"
; - Push your new branch:
git push origin feat/NEW-FEATURE
;
- Create a new branch:
- For a bug fix:
- Create a new branch:
git checkout -b fix/BUG-FIX
; - Add your changes to the staging area:
git add PATH/TO/FILENAME.EXTENSION
; - Commit your changes:
git commit -m "fix: BUG FIX"
; - Push your new branch:
git push origin fix/BUG-FIX
;
- Create a new branch:
- Open a new pull request;
All logos and trademarks are the property of their respective owners.
Everything else is distributed under the MIT License .
See the LICENSE file for more informations.
Special thanks to:
- alrra for browser-logos;
- tandpfun for skill-icons;