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 - 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.
🚀
Getting Started
These are the necessary steps to use
🚨
Prerequisites
You need this technologies :
💻
Run Locally
- 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
⚙️
Setup GitHub Actions
- 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_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]
🐕🦺
Setup Husky
- 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 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 |
|
♾️
GitHub Actions Deployment Pipeline
-
🛑 Cancel Previous Redundant Builds -
📝 Assign PR to creator - 💅🏼 Linting
-
🔗 Deploy to Vercel
📧
Contact
Diego Do Santos - [email protected]