Avoid setting up a project from scratch. Start using VRTTV 🎉
View Demo
·
Report Bug
·
Request Feature
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 💚
- ⚡ Vite - Next generation frontend tooling.
- 📦 Imagemin - Plugin for compressing image assets.
- 📦 Vite Plugin HTML - Plugin for processing HTML with minify.
- 🌟 React - A JavaScript library for building user interfaces.
- 🔀 React Router - Declarative routing for React apps at any scale.
- 💜 TypeScript - A superset of JavaScript.
- 🎨 Tailwind - A utility-first CSS framework.
- ⚙️ Babel with preset-env - The compiler for next generation JavaScript.
- 💅 Prettier - Opinionated Code Formatter.
- 🔍 ESLint - Tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
- 📦 Simple Import Sort - Easy autofixable import sorting.
- 📦 Import Plugin - Rules that help validate proper imports.
- 📦 Tailwind Plugin - Plugin for Tailwind CSS usage.
- And a few other ES2015+ related rules.
- 🐶 Husky - Git hooks made easy.
- 🪝 commit-msg
- 🪝 pre-commit
- 🚫 Lint Staged - Run linters on git staged files.
- ✍️ Conventional Commits with 🎉 Gitmoji - A specification for adding human and machine readable meaning to commit messages.
- 🚦 GitHub Actions - Automate your workflow on GitHub.
- 🔺 Vercel - Deploy your application on Vercel.
These are the necessary steps to use 💯 of the potential of this boilerplate.
You need this technologies :
- Option 1: Generate a new repository with this template
- Option 2: Copy just the project scaffolding.
npx --yes degit Drumpy/vrttv-boilerplate your-folder-name- Option 3: Clone the entire repository.
git clone https://github.com/Drumpy/vrttv-boilerplate- Go to the project directory.
cd vrttv-boilerplate- Install dependencies.
npm install- Start the server.
npm run dev- Run Vercel CLI in your project folder. After completed, a folder .vercel is created in your root directory.
vercel --confirm- Go to actions secrets in your GitHub Repository.
https://github.com/your-username/your-repo-name/settings/secrets/actions/new- Add this three tokens.
# Generate this in https://vercel.com/account/tokens
VERCEL_TOKEN# It is located in 'project.json' inside the '.vercel' folder
ORG_ID# It is located in 'project.json' inside the '.vercel' folder
PROJECT_IDYou can skip GitHub Action execution by adding [skip ci] to your commit message.
style: change the colors of the theme [skip ci]- Run Husky command.
npx --yes husky install- Use Gitmoji CLI to commit changes.
gitmoji -c- Write your commits following the rules of Conventional Commit. Examples:
feat: added navbar componentfix(navbar): fixed all the broken links
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 | ⏪ |
- 🛑 Cancel Previous Redundant Builds
- 📝 Assign PR to creator
- 💅🏼 Linting
- 🔗 Deploy to Vercel
Diego Do Santos - [email protected]