Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/omar-mazen/create-react-vite-project-script
This script automates the setup of a new React project using Vite, along with optional installations of various libraries (tailwind CSS, framer-motion, GSAP, React Query, Toastify, AXIOS. Date Fns, React Hook Form). It also configures ESLint and Vite for your project.
https://github.com/omar-mazen/create-react-vite-project-script
axios axios-react date-fns eslin framer-motion gsap react react-router reacthookform reactjs reactquery tailwindcss tanstack-react-query vite vite-react
Last synced: 18 days ago
JSON representation
This script automates the setup of a new React project using Vite, along with optional installations of various libraries (tailwind CSS, framer-motion, GSAP, React Query, Toastify, AXIOS. Date Fns, React Hook Form). It also configures ESLint and Vite for your project.
- Host: GitHub
- URL: https://github.com/omar-mazen/create-react-vite-project-script
- Owner: omar-mazen
- Created: 2024-09-08T07:48:22.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-09-09T04:43:34.000Z (2 months ago)
- Last Synced: 2024-10-10T17:23:46.979Z (about 1 month ago)
- Topics: axios, axios-react, date-fns, eslin, framer-motion, gsap, react, react-router, reacthookform, reactjs, reactquery, tailwindcss, tanstack-react-query, vite, vite-react
- Language: JavaScript
- Homepage:
- Size: 19.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Create React Vite Project Script
This script automates the setup of a new React project using Vite, along with optional installations of various libraries. It also configures ESLint and Vite for your project.
## Features
- Creates a new Vite project with React template
- Installs optional libraries based on user input
- Configures ESLint and Vite with the appropriate plugins and settings
- Sets up project structure and initial files
- Clear and update the App.jsx and index.css.
- Delete unnecessary files and folders.
- Opens the project in Visual Studio Code
## Prerequisites
Ensure you have the following installed:
- Node.js (latest LTS version)
- npm (Node Package Manager)
- Visual Studio Code (optional, for opening the project)
## Usage
1. **Clone this repository:**
```bash
git clone https://github.com/your-username/your-repository.git
cd your-repository
```
2. **Make the script executable (on Unix-based systems):**
```bash
chmod +x create-react-vite-project.js
```
3. **Run the script:**
```bash
node create-react-vite-project.js
```
4. **Follow the prompts to set up your project.**
## Script Overview
### 1. Asking for Project Details
The script will first prompt you for:
- The name of your project
- Whether to install additional libraries (Tailwind CSS, Framer Motion, GSAP, etc.)
### 2. Setting Up the Project
Based on your responses:
- A new Vite project will be created with the React template.
- Libraries you chose will be installed.
- ESLint and Vite configuration files will be set up.
### 3. Project Configuration
- **ESLint Configuration:** `.eslintrc.cjs`
- **Vite Configuration:** `vite.config.js`
- **File and Directory Structure:** Creates necessary directories and updates key files (e.g., `App.jsx`, `index.css`).
### 4. Final Steps
- Opens the newly created project in Visual Studio Code (optional).
## Example
Here is how the script will execute:
```plaintext
Enter the name of your project: my-react-app
Install Tailwind CSS? (y/n): y
Install Framer Motion? (y/n): n
Install GSAP? (y/n): y
Install React Query? (y/n): y
...
```
## Troubleshooting
- **Dependency Conflicts:** If you encounter dependency conflicts, you may need to use the `--legacy-peer-deps` option with npm commands.
- **File Permissions:** Ensure the script has execute permissions (on Unix-based systems) using `chmod +x create-react-vite-project.js`.
## Contributing
Feel free to submit issues or pull requests to improve the script.