create-react-vtw/src/createProject.js

CLI pour créer un projet ReactJs + ViteJs + Tailwind CSS v4.1

import inquirer from "inquirer";
import chalk from 'chalk';
import figures from 'figures';
import path from "path";
import fs from "fs";
import { execSync } from "child_process";
import process from "process";
import { fileURLToPath } from "url";
import { installTailwind } from "./installTailwind.js";
import { updateFiles } from "./updateFiles.js";

// Reconstruction de __dirname pour ESModules
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export async function runCreateReactVtw() {
    const { projectName } = await inquirer.prompt([
        {
            type: "input",
            name: "projectName",
            message: "Comment souhaitez-vous nommer votre projet ?",
            validate: (input) =>
                input.trim() !== "" || "Le nom du projet est requis.",
        },
    ]);

    try {
        console.log(
            chalk.blue(`\n${figures.pointer} Création du projet ${chalk.bold(projectName)} avec React + Vite...`)
        );
        execSync(`npm create vite@latest ${projectName} -- --template react`, {
            stdio: "inherit",
        });

        const projectPath = path.resolve(process.cwd(), projectName);
        if (fs.existsSync(projectPath)) {
            process.chdir(projectPath);
        } else {
            throw new Error(`Le dossier ${projectPath} n'existe pas.`);
        }

        console.log(chalk.blue(`${figures.pointer} Installation des dépendances...`));
        execSync("npm install", { stdio: "inherit" });

        await installTailwind();
        await updateFiles(projectPath);

        console.log(chalk.green(`\n${figures.tick} Félicitations ! Votre projet a été créé avec succès.`));
        console.log(chalk.cyan(`${figures.arrowRight} cd ${projectName}`));
        console.log(chalk.cyan(`${figures.arrowRight} npm run dev`));
    } catch (err) {
        console.error(chalk.red(`\n${figures.cross} Une erreur est survenue : ${err.message}`));

    }
}