vite-react-generator

      (`-.   _  .-')   .-') _    
    _(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 ❓

1. This generates the Vite React application scaffold with TailwindCSS integration ⚡, making it easier to start building with a modern styling framework.

2. 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.

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.

Creator ✍️

David Patrick

Twitter 🐦

https://x.com/davepatty5686

Donations 💰

https://buymeacoffee.com/davidpatrickchuks

License 🎫

MIT

Contributors

Dave Patty

BugHunter-X

Contributing

For contribution guidelines, please visit our GitHub repository.