create-vault
Version:
A CLI tool to instantly set up a Full Stack (MERN) or Backend project with a structured folder system and pre-installed dependencies.
124 lines (106 loc) • 3.35 kB
JavaScript
import path from "path";
import fs from "fs";
import { execSync } from "child_process";
import chalk from "chalk";
const setupFrontend = async (baseDir) => {
const ensureDirExists = (dirPath) => {
if (!fs.existsSync(dirPath)) {
fs.mkdirSync(dirPath, { recursive: true });
}
};
const createOrUpdateFile = (filePath, content = "") => {
ensureDirExists(path.dirname(filePath));
fs.writeFileSync(filePath, content);
};
console.log(
chalk.cyanBright("Setting up the Client Application (Frontend)") +
chalk.green(" using Vite + React with ") +
chalk.magenta("TanStack Router and TailwindCSS...") +
"\n"
);
try {
console.log(chalk.yellow("Creating Vite app..."));
execSync(`npm create @tanstack/router@latest ./app`, {
cwd: baseDir,
stdio: "inherit",
});
const frontendDir = path.join(baseDir, "app");
console.log(chalk.yellow("Installing TailwindCSS..."));
execSync(`npm install -D tailwindcss@3 postcss autoprefixer`, {
cwd: frontendDir,
stdio: "inherit",
});
console.log(chalk.yellow("Initializing TailwindCSS..."));
execSync(`npx tailwindcss init -p`, {
cwd: frontendDir,
stdio: "inherit",
});
console.log(chalk.yellow("Configuring TailwindCSS..."));
const tailwindConfigPath = path.join(frontendDir, "tailwind.config.js");
const tailwindConfigContent = `/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}`;
createOrUpdateFile(tailwindConfigPath, tailwindConfigContent);
const indexCssPath = path.join(frontendDir, "src", "index.css");
const indexCssContent = `@tailwind base;
@tailwind components;
@tailwind utilities;
`;
createOrUpdateFile(indexCssPath, indexCssContent);
console.log(chalk.yellow("Changing essential files..."));
createOrUpdateFile(
path.join(frontendDir, "index.html"),
`<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vault-Base</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
`
);
createOrUpdateFile(
path.join(frontendDir, "src", "main.tsx"),
`import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider, createRouter } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";
import "./index.css";
const router = createRouter({
routeTree,
defaultPreload: "intent",
});
declare module "@tanstack/react-router" {
interface Register {
router: typeof router;
}
}
const rootElement = document.getElementById("app")!;
if (!rootElement.innerHTML) {
const root = ReactDOM.createRoot(rootElement);
root.render(<RouterProvider router={router} />);
}
`
);
console.log(chalk.green("Client Application (Frontend) setup complete!"));
} catch (error) {
console.error(
chalk.red("Error setting up the frontend:"),
error.stack || error.message
);
}
};
export default setupFrontend;