erkobridee / vite-react-ts

first contact using the Vite.js, TS, React, PostCSS and TailwindCSS

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 start

or

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] staylor / react-helmet-async

• [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 code splitting that just works | Sambit Sahoo (2021/05/23) - Vite is an amazing tool that makes the DX while building apps a lot better. While vite brings pre-configured and optimized build setup with rollup, code-splitting isn't setup effectively. In this article we are going to discuss how to code-split vite powered apps effectively.

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.

GitHub Actions

• [GitHub] peaceiris / actions-gh-pages - GitHub Actions for GitHub Pages 🚀 Deploy static files and publish your site easily. Static-Site-Generators-friendly.

  • Before the first execution on a github repository, go on the Settings > Code and automation > Actions > General > Workflow permissions, and make sure to have the Read and write permissions selected