Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/erkobridee/vite-react-ts
first contact using the Vite.js, TS, React, PostCSS and TailwindCSS
https://github.com/erkobridee/vite-react-ts
postcss react tailwindcss template typescript vitejs
Last synced: about 10 hours ago
JSON representation
first contact using the Vite.js, TS, React, PostCSS and TailwindCSS
- Host: GitHub
- URL: https://github.com/erkobridee/vite-react-ts
- Owner: erkobridee
- Created: 2023-01-24T12:49:43.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-09T06:06:32.000Z (9 days ago)
- Last Synced: 2024-11-09T07:18:24.693Z (9 days ago)
- Topics: postcss, react, tailwindcss, template, typescript, vitejs
- Language: TypeScript
- Homepage: https://erkobridee.github.io/vite-react-ts/
- Size: 1.43 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vite-react-ts
First contact using:
- [Vite.js](https://vitejs.dev/)
- [TypeScript](https://www.typescriptlang.org/)
- [React](https://reactjs.org/)
- [PostCSS](https://postcss.org/)
- [TailwindCSS](https://tailwindcss.com/)
## 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](https://vitejs.dev/guide/#community-templates)
## Useful References
- [[GitHub] staylor / react-helmet-async](https://github.com/staylor/react-helmet-async)
- [[GitHub] vitejs / vite](https://github.com/vitejs/vite)
- [[GitHub] vitejs / vite - package: create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite)
- [Vite.js Guide](https://vitejs.dev/guide/)
- [Features](https://vitejs.dev/guide/features.html)
- [PostCSS](https://vitejs.dev/guide/features.html#postcss)
- [CSS Pre-processors](https://vitejs.dev/guide/features.html#css-pre-processors)
- [[YouTube] Vite in 100 Seconds | Fireship](https://www.youtube.com/watch?v=KCrXgy8qtjM) (2022/02/23)
- [[YouTube] Vite is The New Webpack and Create-React-App killer! | CoderOne](https://www.youtube.com/watch?v=9OmnmouE6tw) (2022/04/11)
- [[YouTube] Vite 2.0 Crash Course | Super Fast Build Tool for JavaScript, React, Vue, Svelte, & Lit (2021) | codeSTACKr](https://www.youtube.com/watch?v=LQQ3CR2JTX8) (2021/04/24)
- [Vite code splitting that just works | Sambit Sahoo](https://sambitsahoo.com/blog/vite-code-splitting-that-works.html) (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](https://blog.logrocket.com/setting-up-dev-environment-react-vite-tailwind/) (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](https://github.com/joaopaulomoraes/reactjs-vite-tailwindcss-boilerplate) - React 18, TypeScript, Jest, Testing Library, TailwindCSS 3, Eslint and Prettier.
- [react-ts-vite-template](https://github.com/fabien-ml/react-ts-vite-template) - React, TypeScript, Jest, Testing Library, Cypress, ESLint, Prettier, Husky.
- [vite-reactts-tailwind-rtk-eslint](https://github.com/IsaiaPhiliph/vite-reactts-tailwind-rtk-eslint) - React, TypeScript, Tailwind CSS, Redux Toolkit, eslint.
- [vite-react-tailwind-template](https://github.com/Innei/vite-react-tailwind-template) - React 17, TypeScript, Jest, ESLint, Prettier, Husky, Tailwind CSS, PostCSS, pnpm.
- [vite-react-ts-starter](https://github.com/uchihamalolan/vite-react-ts) - React, TypeScript, Jest, ESLint, Prettier, TailwindCSS, Husky, Conventional Commits.
- [vite-react-ts-ghactions-template](https://github.com/pchmn/vite-react-ts-ghactions-template) - React, TypeScript, Vitest + React Testing Library, GitHub Actions + GitHub Pages, ESLint, Prettier, Husky, Commitlint.
- [vite-react-ts-tailwind-v3](https://github.com/huibizhang/template-vite-react-ts-tailwind-v3) - Starter template for React + Typescript + TailwindCSS and prettier-plugin-tailwindcss build-in.
- [vite-react-ts-extended](https://github.com/laststance/vite-react-ts-extended) - React, TypeScript, TailwindCSS, MSW, Axios, Jest, React Testing Library, ESLint, Prettier, GitHub Actions.
- [VRTTV](https://github.com/Drumpy/vrttv-boilerplate) - React + TypeScript + TailwindCSS + ESLint + Prettier + Husky + Conventional Commits + Gitmoji + GitHub Actions + Vercel Deploy.
- [vite-reactts18-eslint-tailwindcss](https://github.com/dserranoc/vite-reactts18-eslint-tailwindcss) - React 18 + TypeScript + ESLint + TailwindCSS.
### GitHub Actions
- [[GitHub] peaceiris / actions-gh-pages](https://github.com/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