Building a Frontend Scaffolding Tool from Scratch with Node.js and TypeScript

The article starts by describing the rapid growth of frontend frameworks (Vue, React, Svelte, etc.) and the need for a unified internal scaffolding tool to streamline project creation across different stacks.

Preparation : Create a project folder and initialize it:

mkdir pi

cd pi

npm init -y

tsc --init

npm i @types/node

Configure tsconfig.json with common options (target ES6, module commonjs, outDir ./lib, strict mode, etc.) and set up package.json to expose a binary named pi :

{
  "name": "pi",
  "version": "1.0.0",
  "bin": { "pi": "./lib/index.js" },
  "scripts": { "build": "tsc" }
}

Create an entry file src/index.ts that prints a hello message and defines the CLI entry point:

#! /usr/bin/env node
console.log('hello pi');

Use npm run build and npm link (or sudo npm link ) to make the pi command globally available.

Custom Command : With commander , define a pi create <project> command that triggers the project‑creation workflow.

import { program } from 'commander';
program.version('1.0.0');
program.command('create
').description('create a project in the folder').action(cloneProjectAction);
program.parse(process.argv);

Interactive Prompts : Use inquirer (with TypeScript types) to let users select a package manager and a template. Example question definitions:

const pkmQuestion = [{ name: 'pkm', type: 'list', message: chalk.cyan('Select a packageManager'), choices: [{ name: 'npm', value: 'npm' }, { name: 'yarn', value: 'yarn' }] }];
const tempQuestion = [{ name: 'temp', type: 'list', message: chalk.cyan('Select a template'), choices: [{ name: 'vue2-vant', value: 'vue2-vant' }, { name: 'react-antd-mobile', value: 'react-antd-mobile' }] }];

Prompt the user and store the answers:

const { pkm } = await selector(pkmQuestion);
const { temp } = await selector(tempQuestion);

Downloading Template Code : Define a map from template names to Git URLs and use download-git-repo (promisified) to pull the code, showing progress with ora :

const repo_config = new Map();
repo_config.set('vue2-vant', 'direct:https://xxxx.git');
// ...
const downloadTemp = promisify(download);
await downloadTemp(repo_config.get(temp)!, project, { clone: true });

Handle errors with spinner warnings and abort if the template is unavailable.

Git Initialization and Dependency Installation : Execute git init via shelljs and run the selected package manager’s install command, displaying a spinner and handling failures.

exec('git init', { cwd: `./${project}`, silent: true });
exec(`${pkm} install`, { cwd: `./${project}`, async: true, silent: silentStatus }, (code) => { /* handle result */ });

After successful installation, print usage hints and a success message.

Logo Rendering : Hook into Commander’s --help to display a stylized logo using figlet :

program.on('--help', () => {
  console.log(figlet.textSync('PI', { font: 'Standard', width: 80 }));
});

The final tool supports commands like pi create my-app , interactive selection of package manager and template, automatic code download, Git initialization, dependency installation, and a custom help logo, providing a complete end‑to‑end scaffolding experience for frontend developers.