Skip to content

Latest commit

 

History

History
94 lines (62 loc) · 2.54 KB

README.md

File metadata and controls

94 lines (62 loc) · 2.54 KB
Raw

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.

image

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:

    git clone https://github.com/your-username/your-repository.git
cd your-repository

  2. Make the script executable (on Unix-based systems):

    chmod +x create-react-vite-project.js

  3. Run the script:

    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:

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.