create vite@latest React without the example content

[pinkboid]

Every time I create a new React project using npm create vite@latest, I have to go and delete all the default content like in App.tsx

      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>

So starting a new vite project is always a chore at the beginning that requires me to immediately:

• go in App.tsx, remove all the divs
• delete public/assets
• delete any references to public/assets in all the files
• clear or delete the css files

Is there a way for me to initialize a new React project with all of that done already? It would be so nice to be able to just do npm create vite@latest and go straight into building my app. I don't see why this wouldn't be an option. It's a small inconvenience, but adds up over time for someone who creates new React projects often.

[Carolista]

@pinkboid Came here seeking the same, 2 years later... Finally decided to have Gemini write me a script to automate it. Feel free to modify for your local environment!

#!/usr/bin/env zsh

# --- Configuration ---
PROJECT_ROOT="./"

# Files to be deleted entirely
FILES_TO_DELETE=(
    "${PROJECT_ROOT}public/vite.svg"
    "${PROJECT_ROOT}src/assets/react.svg"
)

# Files to be blanked out
FILES_TO_BLANK=(
    "${PROJECT_ROOT}src/index.css"
    "${PROJECT_ROOT}src/App.css"
)

# --- Cleanup Functions ---

# Function to safely delete files
delete_files() {
    echo "🗑️ Deleting boilerplate files..."
    for file in "${FILES_TO_DELETE[@]}"; do
        if [[ -f "$file" ]]; then
            rm -v "$file"
        else
            echo "Skipping: File not found at $file"
        fi
    done
}

# Function to blank out files
blank_files() {
    echo "⬜ Blanking out CSS files..."
    for file in "${FILES_TO_BLANK[@]}"; do
        if [[ -f "$file" ]]; then
            # Use truncate to set the file size to 0 bytes
            truncate -s 0 "$file"
            echo "  - $file blanked."
        else
            echo "Skipping: File not found at $file"
        fi
    done
}

# Function to replace file contents with new content
replace_content() {
    echo "📝 Replacing content in core files..."

    # 1. src/App.jsx (Minimal Component)
    cat > "${PROJECT_ROOT}src/App.jsx" << 'EOF'
import './App.css';

function App() { return <h1>Hello, World!</h1> }

export default App;
EOF
    echo "  - src/App.jsx updated."

    # 2. vite.config.js (Adding server watch polling)
    cat > "${PROJECT_ROOT}vite.config.js" << 'EOF'
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    server: {
        watch: {
            usePolling: true,
        },
    },
});
EOF
    echo "  - vite.config.js updated."
}

# Function to update .gitignore
update_gitignore() {
    local gitignore_file="${PROJECT_ROOT}.gitignore"
    local pattern="package-lock.json"

    echo "⚙️ Updating $gitignore_file..."

    if [[ -f "$gitignore_file" ]]; then
        # Check if package-lock.json is already present
        if ! grep -q "^${pattern}$" "$gitignore_file"; then
            echo "$pattern" >> "$gitignore_file"
            echo "  - Added '$pattern' to .gitignore."
        else
            echo "  - '$pattern' is already present in .gitignore. Skipping."
        fi
    else
        echo "Warning: $gitignore_file not found. Skipping .gitignore update."
    fi
}

# --- Execution ---
if [[ ! -d "${PROJECT_ROOT}src" ]] || [[ ! -f "${PROJECT_ROOT}package.json" ]]; then
    echo "❌ Error: This does not appear to be a React/Vite project root."
    echo "   Please run this script from the root directory of your project."
    exit 1
fi

delete_files
blank_files
replace_content
update_gitignore

echo "---"
echo "✅ Project cleanup complete! Your React/Vite project is ready for development."