create-vault/frontend/angular.js

A CLI tool to instantly set up a Full Stack (MERN) or Backend project with a structured folder system and pre-installed dependencies.

import path from "path";
import fs from "fs";
import { execSync } from "child_process";
import chalk from "chalk";

const ensureDirExists = (dirPath) => {
  if (!fs.existsSync(dirPath)) {
    fs.mkdirSync(dirPath, { recursive: true });
  }
};

const createOrUpdateFile = (filePath, content = "") => {
  ensureDirExists(path.dirname(filePath));
  fs.writeFileSync(filePath, content);
};

const setupFrontend = async (baseDir) => {
  console.log(
    chalk.cyanBright("Setting up the Client Application (Frontend)") +
      chalk.green(" using Angular with TailwindCSS 3...") +
      "\n"
  );

  try {
    console.log(chalk.yellow("Installing Angular CLI globally..."));
    execSync(`npm install -g @angular/cli`, {
      cwd: baseDir,
      stdio: "inherit",
    });

    console.log(chalk.yellow("Creating Angular project..."));
    execSync(`ng new app --style css --routing`, {
      cwd: baseDir,
      stdio: "inherit",
    });

    const frontendDir = path.join(baseDir, "app");

    console.log(chalk.yellow("Installing TailwindCSS 3..."));
    execSync(`npm install -D tailwindcss@3 postcss autoprefixer`, {
      cwd: frontendDir,
      stdio: "inherit",
    });

    console.log(chalk.yellow("Initializing TailwindCSS..."));
    execSync(`npx tailwindcss init`, {
      cwd: frontendDir,
      stdio: "inherit",
    });

    console.log(chalk.yellow("Configuring TailwindCSS 3..."));
    const tailwindConfigPath = path.join(frontendDir, "tailwind.config.js");
    const tailwindConfigContent = `/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};`;
    createOrUpdateFile(tailwindConfigPath, tailwindConfigContent);

    const stylesCssPath = path.join(frontendDir, "src", "styles.css");
    const stylesCssContent = `@tailwind base;
@tailwind components;
@tailwind utilities;
`;
    createOrUpdateFile(stylesCssPath, stylesCssContent);

    console.log(
      chalk.green(
        "Client Application (Frontend) setup complete! using Angular!"
      )
    );
  } catch (error) {
    console.error(
      chalk.red("Error setting up the frontend:"),
      error.stack || error.message
    );
  }
};

export default setupFrontend;