Vite React App Generator Vite React Gen

A streamlined Vite + React app generator with a minimal yet powerful setup. Includes pre-configured Tailwind CSS for styling and Google Font Poppins for modern typography, providing a fast and optimized development environment for building applications.

Download

      (`-.   _  .-')   .-') _    
    _(OO  )_( \( -O ) (  OO) )   
,--(_/   ,. \,------. /     '._  
\   \   /(__/|   /`. '|'--...__) 
 \   \ /   / |  /  | |'--.  .--' 
  \   '   /, |  |_.' |   |  |    
   \     /__)|  .  '.'   |  |    
    \   /    |  |\  \    |  |    
     `-'     `--' '--'   `--'

Vite React App Generator (vite-react-gen)

This is a simple and minimal Vite + React application generator, which can be used as a starting point for any Vite React app with TailwindCSS.

Installation 🏭

$ npm install -g vite-react-generator

Why another Vite React generator ❓

This generates the Vite React application scaffold with TailwindCSS integration ⚡, making it easier to start building with a modern styling framework.
Only installs the essential dependencies 🔑 for a React app setup with Vite, keeping it lightweight and fast.

Quick Start 🏃‍♂️

The quickest way to get started with express is to utilize the executable exp (OR express-draft) to generate an application as shown below:

Create (and start) the app in current folder:

$ vrt .
$ npm run dev

OR, create (and start) the app (in myApp folder):

$ vrt myApp
$ cd myApp
$ npm run dev

A Snapshot Says It All.

vite-react-gen-draft

This will basically create this structure in your folder


.
├── .env
├── .gitignore
├── eslint.config.js
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.js
├── tailwind.config.js
├── README.md
├── vercel.json
├── vite.config.js
├── public
│   ├── assets
│   └── tailwind-css.svg
└── src
    ├── assets
    │   └── vite.svg
    ├── index.css
    ├── App.jsx
    └── main.jsx

This is how easy it is to get going.

What dependencies does it install?

vite - A fast build tool for modern web projects.
react - A JavaScript library for building user interfaces.
react-dom - Serves as the entry point for the React DOM rendering.
react-scripts - Scripts and configuration used by Create React App.
@vitejs/plugin-react - Official plugin for React support in Vite.
tailwindcss - A utility-first CSS framework for rapidly building custom designs.
postcss - A tool for transforming CSS with JavaScript plugins (needed by Tailwind CSS).
autoprefixer - Adds vendor prefixes to CSS rules for better browser support (used with Tailwind CSS).

Command Line Options

The vrt command provides several options to initialize a Vite + React app or to display help and version information.

Usage

vrt [options]

Options

<app-name>              Initialize a new Vite React app in the specified directory.

-h, --help              Print the help message listing available command line options.

<directory-name>        Specify a directory to initialize the app in.

-v, --version           Print the version of the vrt package.