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 💚

(back to top)

🔮 What’s inside?

• ⚡ 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.

(back to top)

🚀 Getting Started

These are the necessary steps to use 💯 of the potential of this boilerplate.

🚨 Prerequisites

You need this technologies :

• Node 16>=
• Git
• Vercel Account
• Vercel CLI
• Gitmoji CLI

💻 Run Locally

1. Option 1: Generate a new repository with this template

• Use this template

1. Option 2: Copy just the project scaffolding.

npx --yes degit Drumpy/vrttv-boilerplate your-folder-name

1. Option 3: Clone the entire repository.

git clone https://github.com/Drumpy/vrttv-boilerplate

2. Go to the project directory.

cd vrttv-boilerplate

3. Install dependencies.

npm install

4. Start the server.

npm run dev

(back to top)

⚙️ Setup GitHub Actions

1. Run Vercel CLI in your project folder. After completed, a folder .vercel is created in your root directory.

vercel --confirm

2. Go to actions secrets in your GitHub Repository.

https://github.com/your-username/your-repo-name/settings/secrets/actions/new

3. 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_ID

💡 Tip!

You can skip GitHub Action execution by adding [skip ci] to your commit message.

style: change the colors of the theme [skip ci]

(back to top)

🐕‍🦺 Setup Husky

1. Run Husky command.

npx --yes husky install

2. Use Gitmoji CLI to commit changes.

gitmoji -c

3. Write your commits following the rules of Conventional Commit. Examples:

feat: added navbar component

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	⏪

(back to top)

♾️ GitHub Actions Deployment Pipeline

• 🛑 Cancel Previous Redundant Builds
• 📝 Assign PR to creator
• 💅🏼 Linting
• 🔗 Deploy to Vercel

(back to top)

📧 Contact

Diego Do Santos - [email protected]

(back to top)