Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Drumpy/vrttv-boilerplate
Avoid setting up a project from scratch. Start using VRTTV 🎉
https://github.com/Drumpy/vrttv-boilerplate
boilerplate boilerplate-front-end boilerplate-template react tailwindcss
Last synced: 15 days ago
JSON representation
Avoid setting up a project from scratch. Start using VRTTV 🎉
- Host: GitHub
- URL: https://github.com/Drumpy/vrttv-boilerplate
- Owner: Drumpy
- License: mit
- Created: 2022-07-21T03:41:53.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-07-28T22:21:34.000Z (over 2 years ago)
- Last Synced: 2024-07-31T22:37:48.528Z (3 months ago)
- Topics: boilerplate, boilerplate-front-end, boilerplate-template, react, tailwindcss
- Language: TypeScript
- Homepage: https://vrttv-boilerplate.vercel.app/
- Size: 1.47 MB
- Stars: 43
- Watchers: 0
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
VRTTV Boilerplate
Avoid setting up a project from scratch. Start using VRTTV 🎉
View Demo
·
Report Bug
·
Request Feature
# 🤔 What’s this?
Are you tired of always creating the same structure from scratch for your projects? Me too. 🥱
This is my _go-to_ when I start a new project on front-end development.
If you found it useful somehow, I would be grateful if you could leave a star in the project's GitHub repository 💚
# 🔮 What’s inside?
- ⚡ [Vite](https://vitejs.dev/) - Next generation frontend tooling.
- 📦 [Imagemin](https://github.com/vbenjs/vite-plugin-imagemin) - Plugin for compressing image assets.
- 📦 [Vite Plugin HTML](https://github.com/vbenjs/vite-plugin-html) - Plugin for processing HTML with minify.
- 🌟 [React](https://reactjs.org/) - A JavaScript library for building user interfaces.
- 🔀 [React Router](https://reactrouter.com/docs/en/v6/getting-started/overview) - Declarative routing for React apps at any scale.
- 💜 [TypeScript](https://www.typescriptlang.org/) - A superset of JavaScript.
- 🎨 [Tailwind](https://tailwindcss.com/) - A utility-first CSS framework.
- ⚙️ [Babel](https://babeljs.io/) with [preset-env](https://babeljs.io/docs/en/babel-preset-env) - The compiler for next generation JavaScript.
- 💅 [Prettier](https://prettier.io/) - Opinionated Code Formatter.
- 🔍 [ESLint](https://eslint.org/) - Tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
- 📦 [Simple Import Sort](https://github.com/lydell/eslint-plugin-simple-import-sort/) - Easy autofixable import sorting.
- 📦 [Import Plugin](https://github.com/benmosher/eslint-plugin-import/) - Rules that help validate proper imports.
- 📦 [Tailwind Plugin](https://github.com/francoismassart/eslint-plugin-tailwindcss/) - Plugin for Tailwind CSS usage.
- And a few other ES2015+ related rules.
- 🐶 [Husky](https://github.com/typicode/husky) - Git hooks made easy.
- 🪝 commit-msg
- 🪝 pre-commit
- 🚫 [Lint Staged](https://github.com/okonet/lint-staged) - Run linters on git staged files.
- ✍️ [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) with 🎉 [Gitmoji](https://gitmoji.dev/) - A specification for adding human and machine readable meaning to commit messages.
- 🚦 [GitHub Actions](https://github.com/features/actions) - Automate your workflow on GitHub.
- 🔺 [Vercel](https://vercel.com/) - Deploy your application on Vercel.
# 🚀 Getting Started
These are the necessary steps to use 💯 of the potential of this boilerplate.
## 🚨 Prerequisites
You need this technologies :
- [Node 16>=](https://nodejs.org/en/)
- [Git](https://git-scm.com/downloads/)
- [Vercel Account](https://vercel.com/signup)
- [Vercel CLI](https://vercel.com/cli)
- [Gitmoji CLI](https://github.com/carloscuesta/gitmoji-cli#install)
## 💻 Run Locally
1. Option 1: Generate a new repository with this template
- [Use this template](https://github.com/Drumpy/vrttv-boilerplate/generate)
1. Option 2: Copy just the project scaffolding.
```bash
npx --yes degit Drumpy/vrttv-boilerplate your-folder-name
```
1. Option 3: Clone the entire repository.
```bash
git clone https://github.com/Drumpy/vrttv-boilerplate
```
2. Go to the project directory.
```bash
cd vrttv-boilerplate
```
3. Install dependencies.
```bash
npm install
```
4. Start the server.
```bash
npm run dev
```
## ⚙️ Setup GitHub Actions
1. Run Vercel CLI in your project folder. After completed, a folder **.vercel** is created in your root directory.
```bash
vercel --confirm
```
2. Go to actions secrets in your GitHub Repository.
```bash
https://github.com/your-username/your-repo-name/settings/secrets/actions/new
```
3. Add this three tokens.
```bash
# Generate this in https://vercel.com/account/tokens
VERCEL_TOKEN
```
```bash
# It is located in 'project.json' inside the '.vercel' folder
ORG_ID
```
```bash
# It is located in 'project.json' inside the '.vercel' folder
PROJECT_ID
```
### 💡 **Tip!**
You can skip GitHub Action execution by adding **[skip ci]** to your commit message.
```bash
style: change the colors of the theme [skip ci]
```
## 🐕🦺 Setup Husky
1. Run Husky command.
```bash
npx --yes husky install
```
2. Use Gitmoji CLI to commit changes.
```bash
gitmoji -c
```
3. Write your commits following the rules of [Conventional Commit](https://github.com/Drumpy/vrttv-boilerplate#-conventional-commit-rules). Examples:
```bash
feat: added navbar component
```
```bash
fix(navbar): fixed all the broken links
```
### 👇 Creating a commit as an example
### 📜 Conventional Commit Rules
Use this table as a reference when writing commits. Husky will be in charge of checking that the rules will be followed.
| Commit Type | Title | Description | Emoji |
| ----------- | ------------------------ | ----------------------------------------------------------------------------------------------------------- | :---: |
| `feat` | Features | A new feature | ✨ |
| `fix` | Bug Fixes | A bug fix | 🐛 |
| `docs` | Documentation | Documentation only changes | 📝 |
| `style` | Styles | Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) | 🎨 |
| `refactor` | Code Refactoring | A code change that neither fixes a bug nor adds a feature | ♻️ |
| `perf` | Performance Improvements | A code change that improves performance | ⚡ |
| `test` | Tests | Adding missing tests or correcting existing tests | ✅ |
| `build` | Builds | Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm) | 🚨 |
| `ci` | Continuous Integrations | Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs) | 👷 |
| `chore` | Chores | Other changes that don't modify src or test files | ➕ |
| `revert` | Reverts | Reverts a previous commit | ⏪ |
# ♾️ GitHub Actions Deployment Pipeline
- 🛑 Cancel Previous Redundant Builds
- 📝 Assign PR to creator
- 💅🏼 Linting
- 🔗 Deploy to Vercel
# 📧 Contact
Diego Do Santos - [email protected]
[contributors-shield]: https://img.shields.io/github/contributors/Drumpy/vite-boilerplate.svg?style=for-the-badge
[contributors-url]: https://github.com/Drumpy/vrttv-boilerplate/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/Drumpy/vrttv-boilerplate.svg?style=for-the-badge
[product-screenshot]: https://i.ibb.co/zf7gjMR/Card-Outline.png