vite-react-ts

First contact using:

• Vite.js

• TypeScript

• React

• PostCSS

• TailwindCSS

Commands

Creation

npm create vite@latest vite-react-ts -- --template react-ts

Development

npm run dev

Production Build

npm run build

Preview

npm run preview

Create a new project using this as a template

npx degit erkobridee/vite-react-ts ${project_name}

• Vite.js > Guide > Getting Started > Community Templates

Useful References

• [GitHub] vitejs / vite

  • [GitHub] vitejs / vite – package: create-vite

• Vite.js Guide

  • Features

    • PostCSS

    • CSS Pre-processors

• [YouTube] Vite in 100 Seconds | Fireship (2022/02/23)

• [YouTube] Vite is The New Webpack and Create-React-App killer! | CoderOne (2022/04/11)

• [YouTube] Vite 2.0 Crash Course | Super Fast Build Tool for JavaScript, React, Vue, Svelte, & Lit (2021) | codeSTACKr (2021/04/24)

Vite + TS + React + TailwindCSS

• Setting up a dev environment with React, Vite, and Tailwind | LogRocket Blog (2022/06/02) – In this article, we’ll learn about Vite, its advantages, and how to set up a React and Tailwind CSS application using it.

Vite Templates

• reactjs-vite-tailwindcss-boilerplate – React 18, TypeScript, Jest, Testing Library, TailwindCSS 3, Eslint and Prettier.

• react-ts-vite-template – React, TypeScript, Jest, Testing Library, Cypress, ESLint, Prettier, Husky.

• vite-reactts-tailwind-rtk-eslint – React, TypeScript, Tailwind CSS, Redux Toolkit, eslint.

• vite-react-tailwind-template – React 17, TypeScript, Jest, ESLint, Prettier, Husky, Tailwind CSS, PostCSS, pnpm.

• vite-react-ts-starter – React, TypeScript, Jest, ESLint, Prettier, TailwindCSS, Husky, Conventional Commits.

• vite-react-ts-ghactions-template – React, TypeScript, Vitest + React Testing Library, GitHub Actions + GitHub Pages, ESLint, Prettier, Husky, Commitlint.

• vite-react-ts-tailwind-v3 – Starter template for React + Typescript + TailwindCSS and prettier-plugin-tailwindcss build-in.

• vite-react-ts-extended – React, TypeScript, TailwindCSS, MSW, Axios, Jest, React Testing Library, ESLint, Prettier, GitHub Actions.

• VRTTV – React + TypeScript + TailwindCSS + ESLint + Prettier + Husky + Conventional Commits + Gitmoji + GitHub Actions + Vercel Deploy.

• vite-reactts18-eslint-tailwindcss – React 18 + TypeScript + ESLint + TailwindCSS.