Logo

VRTTV Boilerplate

Avoid setting up a project from scratch. Start using VRTTV ๐ŸŽ‰

๐Ÿค” Whatโ€™s this?

Are you tired of always creating the same structure from scratch for your projects? I also. ๐Ÿฅฑ

This is my go-to when I start a new project on front-end development.

If you want to contribute, feel free to submit Pull Request ๐Ÿ’š

๐Ÿ”ฎ 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

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

๐Ÿšจ Prerequisites

You need this technologies :

๐Ÿ’ป Run Locally

  1. Option 1: Copy just the project scaffolding.
  npx degit Drumpy/vrttv-boilerplate your-folder-name
  1. Option 2: Clone the entire repository.
  git clone https://github.com/Drumpy/vrttv-boilerplate
  1. Go to the project directory.
  cd vrttv-boilerplate
  1. Install dependencies.
  npm install
  1. Start the server.
  npm run dev
  1. Open with your browser to see the result.
  http://localhost:5173/

โš™๏ธ Setup Github Actions

  1. Run Vercel CLI in your project folder. After completed, a folder .vercel is created in your root directory.
  vercel --confirm
  1. Go to actions secrets in your Github Repository.
  https://github.com/your-username/your-repo-name/settings/secrets/actions/new
  1. 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

โš™๏ธ Setup Husky

  1. Run Husky command.
  npx husky install
  1. Use Gitmoji CLI to commit changes.
  gitmoji -c

โ™พ๏ธ GitHhub Actions Deployment Pipeline

  • ๐Ÿ›‘ Cancel Previous Redundant Builds
  • ๐Ÿ“ Assign PR to creator
  • ๐Ÿ’…๐Ÿผ Linting
  • ๐Ÿ”— Deploy to Vercel

๐Ÿ“ง Contact

Diego Do Santos – [email protected]

GitHub

View Github