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
- Option 1: Copy just the project scaffolding.
npx degit Drumpy/vrttv-boilerplate your-folder-name
- Option 2: 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
- Open with your browser to see the result.
http://localhost:5173/
⚙️ 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
⚙️ Setup Husky
- Run Husky command.
npx husky install
- 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]
