How can we create a custom React template that integrates with organization-specific npm packages requiring .npmrc authentication tokens

[basit-qayoom]

### Current Approach:

The script is published to npm and includes a template directory. Within this directory, the structure is organized with a framework name, which then contains a language name. Under this, there is a config.json file. The config.json file includes the repository URL and an array of branches.

#!/usr/bin/env node

import { execSync } from "child_process";
import fs from "fs-extra";
import inquirer from "inquirer";
import path from "path";
import { fileURLToPath } from "url";

// Get __dirname equivalent in ESM
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

// Function to get repository URL and branches from config
function getRepoConfig(framework, language) {
  const configPath = path.resolve(
    __dirname,
    "templates",
    framework,
    language,
    "config.json"
  );
  if (fs.existsSync(configPath)) {
    return JSON.parse(fs.readFileSync(configPath, "utf-8"));
  }
  return null;
}

// Function to clone the repo and switch branch
async function cloneRepo(repoUrl, branch, projectName) {
  try {
    console.log(`Cloning repository from ${repoUrl}...`);
    execSync(`git clone -b ${branch} ${repoUrl} ${projectName}`, {
      stdio: "inherit",
    });
  } catch (error) {
    console.error(`Error cloning repository: ${error.message}`);
  }
}

// Main CLI logic
async function run() {
  const { framework } = await inquirer.prompt({
    name: "framework",
    type: "list",
    message: "Which frontend framework would you like to use?",
    choices: fs.readdirSync(path.resolve(__dirname, "templates")),
  });
  console.log(framework);

  const { language } = await inquirer.prompt({
    name: "language",
    type: "list",
    message: "Which language would you prefer?",
    choices: fs.readdirSync(path.resolve(__dirname, "templates", framework)),
  });

  const repoConfig = getRepoConfig(framework, language);

  if (repoConfig) {
    const { repoUrl, branches } = repoConfig;

    const { branch } = await inquirer.prompt({
      name: "branch",
      type: "list",
      message: "Which branch would you like to use?",
      choices: branches,
    });

    const { projectName } = await inquirer.prompt({
      name: "projectName",
      type: "input",
      message: "What is the name of your project?",
      default: "pw-new-project",
    });

    // Clone repo
    await cloneRepo(repoUrl, branch, projectName);

    // Run npm install automatically
    console.log(`Installing dependencies in ${projectName}...`);
    execSync(`cd ${projectName} && npm install --force`, { stdio: "inherit" });

    console.log(
      `Project setup complete! Navigate to your project folder: cd ${projectName}`
    );
  } else {
    console.error("No valid configuration found for the selected template.");
  }
}

run().catch((error) => console.error(`Error: ${error.message}`));