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

⚙️ 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.
  1. Add this three tokens.

  # Generate this in https://vercel.com/account/tokens

  # It is located in 'project.json' inside the '.vercel' folder

  # It is located in 'project.json' inside the '.vercel' folder

⚙️ 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]


View Github