In the realm of practical development, we oft employ scaffolding to erect the edifice of engineering projects. Esteemed frameworks such as , each boasts its own scaffoldings. front-end vue-cli create-react-app Within grand corporations, bespoke scaffoldings are fashioned to suit the internal milieu, bestowing celerity upon the construction of projects. Through the medium of command-line interactivity, one may swiftly fashion an inaugural project by selecting the desired configurations and integrations. Considering the manifold employments of these scaffoldings, why not fashion one tailored to thy own proclivities? This blog shall embark upon the construction of a custom-made scaffolding tool, commencing from naught. Content Overview What is Frontend Scaffolding? Creating the Scaffold Enhancing the Scaffold Perfecting the Scaffold What is Frontend Scaffolding? Frontend scaffolding refers to a tool or framework that aids in the rapid development and organization of front-end projects. It provides a predefined structure, configuration, and set of functionalities, allowing developers to bootstrap their projects quickly and efficiently. These scaffolding tools often come with built-in features such as project initialization, dependency management, code generation, and build automation. By using front-end scaffolding, developers can save time and effort in setting up a project from scratch and focus more on actual development tasks. Before embarking upon the construction of scaffolding, it is imperative to familiarize oneself with a repertoire of indispensable toolkits. It signifies the ability to personalize command-line instructions, whereby upon entering a bespoke command, the system shall duly execute the corresponding operation. commander: It bestows upon thee the power to engage in interactive question-and-answer sessions within the terminal, thus facilitating seamless choice-based interactions. inquirer: It is an extension of the “fs” module in Node.js. It offers a plethora of convenient APIs and inherits all the methods of “fs” while adding support for promises. This allows for more streamlined and asynchronous file system operations in your code. fs-extra: It can download remote repositories. download-git-repo: Chalk is a very popular Node.js module that is used to add styles and colors to the terminal, thus beautifying the output. It provides a simple and easy-to-use API that allows you to customize the appearance of the output by setting different styles and colors. chalk: Figlet is a tool used to output ASCII art font logos in the terminal. It can convert ordinary text into beautiful ASCII art fonts and display them in the terminal. figlet: : Ora is a Node.js module used to create console-loading animations. It provides a set of simple and easy-to-use APIs that help you display various types of loading animations in the terminal. ora Creating the Scaffold Initiating the project by creating a new directory. $ mkdir foo
$ cd foo
$ npm init -y

Wrote to /Users/stt/foo/package.json:

{
  "name": "foo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
} Create the directory, primarily designated for housing command program entry files. Subsequently, fashioning a file within the said directory. The directory structure shall be as follows: bin index.js foo   
├─ bin
│  ├─ index.js          
└─ package.json Modify the file, wherein the command’s entry file shall be revised to . package.json index.js Moreover, configuring the command within the directory as a swift launching directive for the program. foo bin {
    "name": "fo",
    "version": "1.0.0",
    "main": "index.js",
    "bin": {
        "foo": "./bin/index.js"
    },
  ...
} Modifying the entry file to the following content. bin/index.js The file commences with to indicate that it is treated as an executable file and can be executed as a script. #! The subsequent signifies that this file is executed using , which is located based on the environment variables in the user’s installation root directory: /usr/bin/env node Node.js #! /usr/bin/env node

console.log('hello world') To link the current command globally and test its execution, you can use the following command in your terminal: $ npm link This will create a symbolic link in the global directory, allowing you to execute the command from anywhere on your system. Once the linking process is completed, you can test the command by running: node_modules $ foo If everything is set up correctly, the command should execute successfully. $ foo
hello world Indeed, when using third-party toolkits, it is common to encounter outputs with different colors and logos. One way to achieve this is by utilizing the and libraries. chalk figlet However, it is important to note that such operations are not mandatory. These libraries are used to enhance the visual appeal and aesthetics of the output, but they are not essential for the functionality of the program. Below is a simple example of how to use in Terminal to beautify the output: . chalk chalk.js $ npm install chalk -S

$ vi chalk.js
import chalk from 'chalk';
console.log(chalk.blue('hello world'));
console.log(chalk.red.bold('hello world'));
console.log(chalk.bgYellow.black('hello world')); Then we run: $ node chalk.js If your NodeJS version is too low, there may be an Error [ERR_REQUIRE_ESM]: Must use import to load ES Module, please refer to this link for the solution. https://bobbyhadz.com/blog/error-err-require-esm-must-use-import-to-load-es-module Below is a simple example of how to use in Terminal to beautify the output: . figlet figlet.js $ npm install figlet -S

$ vi figlet.js

import figlet from 'figlet';
console.log(figlet.text('Hello World', {
  font: 'Shadow',
  horizontalLayout: 'default',
  verticalLayout: 'default'
}, function (err, data) {
  if (err) {
    console.log(err);
  } else {
    console.log(data);
  }
})); Then we run: $ node figlet.js

  |   |        |  |            \ \        /             |      |
  |   |   _ \  |  |   _ \       \ \  \   /  _ \    __|  |   _` |
  ___ |   __/  |  |  (   |       \ \  \ /  (   |  |     |  (   |
 _|  _| \___| _| _| \___/         \_/\_/  \___/  _|    _| \__,_| More can be found at the address https://github.com/patorjk/figlet.js Enhancing the Scaffold Above we implemented the command its function is very simple, now we use the package to extend the function, the specific use can be viewed in the official documentation, below we implement an example. foo commander $ npm install commander -S

$ vi bin/index.js

#! /usr/bin/env node

import { Command } from 'commander';
const program = new Command();
program.version('1.0.0');

program
  .command('hello [name]')
  .description('Greet the user')
  .action((name) => {
    console.log(`Hello ${name || 'world'}!`);
  });

program.parse(process.argv); In the above example, we extended a command to the scaffolding , which requires passing the parameter , the default value of the parameter is , and finally, the input parameter is obtained through the callback, and then the project can be created with the name entered by the user. hello foo name world action $ foo

Usage: foo [options] [command]

Options:
  -V, --version   output the version number
  -h, --help      display help for command

Commands:
  hello [name]    Greet the user
  help [command]  display help for command

$ foo hello
Hello world!

$ foo hello Alice
Hello Alice! Perfecting the Scaffold Once we have acquired the foundational knowledge, let us embark on constructing a practical scaffolding. To begin with, we need to determine the objectives and functionalities that our scaffolding should achieve. We need to implement a scaffolding tool for creating projects. It should have the following functionalities: Create directory. Select template. Set the project’s information. Create code. npm install path --save
npm install fs-extra --save

const pwd = process.cwd();
const fpath = path.join(pwd, project_name)

if (fs.existsSync(fpath)) {
  // Inquire whether the user wishes to enforce directory creation?
} else {
  // In the event that the directory does not exist, it shall be created in a conventional manner.
} Due to the intermediary questioning process, it is necessary to interact with the user through the command line in order to obtain the selected information. The package can be utilized for posing questions to the user in the command line and obtaining the subsequent results for further logical interaction. inquirer npm install inquirer --save

async function create (projectName) {
  const pwd = process.cwd();
  const targetDir = path.join(pwd, projectName)

  if (fs.existsSync(targetDir)) {
    // Inquire whether the user wishes to enforce directory creation?
    let { action } = await inquirer.prompt(
      [
        {
          name: 'action',
          type: 'list',
          message: 'The directory already exists. Please make a selection:',
          choices: [
            {
              name: 'Overwrite.',
              value: true
            },
            {
              name: 'Cancel',
              value: false
            }
          ]
        }
      ]
    )

    if (!action) {
      return;
    } else if (action) {
      console.log(`\nRemoving ${chalk.cyan(targetDir)}...`)
      await fs.remove(targetDir)
    }
  }

  // In the event that the directory does not exist, it shall be created in a conventional manner.
  console.log(chalk.blue('[ Creating dir ] > '), targetDir);
  fs.mkdirSync(targetDir)
} Next, let us proceed to acquire the fundamental project information that the user wishes to configure. async function template () {
  const answers = await inquirer.prompt(
    [
      {
        name: 'name',
        type: 'string',
        required: true,
        message: 'The project name',
      },
      {
        name: 'description',
        type: 'string',
        required: true,
        message: 'The project description',
      },
      {
        name: 'template',
        type: 'list',
        message: 'Please select a template:',
        choices: [
          {
            name: 'Vue for web',
            value: "vue-web"
          },
          {
            name: 'Vue for mobile',
            value: "vue-mobile"
          }
        ]
      }
    ]
  )
  
  return answers
} Moving forward, we shall commence the code generation process, wherein we primarily capture the user’s input and write it into a JSON file. async function code (answers) {
  console.log(chalk.blue('[ Creating json file ] '));
  const jsonData = JSON.stringify(answers);
  fs.writeFile('result.json', jsonData, 'utf8', (err) => {
    if (err) {
      console.error(err);
      return;
    }
    console.log('JSON file has been created!');
  });
} With that, our scaffolding is complete. Of course, in the final step, you may consider downloading various repository codes based on the user’s template selection to finalize the project initialization. This aspect is left for your contemplation. Let us proceed to test the functionality of the scaffold. ➜ foo create test
[ Creating project ] >  test
? The directory already exists. Please make a selection: Overwrite.

Removing /xxx/foo/test...
[ Creating dir ] >  /Users/shutiao/code/foo/test
? The project name p_test
? The project description this is a description
? Please select a template: Vue for web
[ Creating json file ] 
JSON file has been created! The complete code is as follows: #! /usr/bin/env node
import { Command } from 'commander';
import chalk from 'chalk';
import path from 'path';
import fs from 'fs-extra';
import inquirer from 'inquirer';

const program = new Command();
program.version('1.0.0');

program
  .command('create [project_name]')
  .description('The name of project')
  .action((project_name) => {
    console.log(chalk.blue('[ Creating project ] > '), project_name);
    create(project_name)
  });
  program.parse(process.argv);


async function create (projectName) {
  const pwd = process.cwd();
  const targetDir = path.join(pwd, projectName)

  if (fs.existsSync(targetDir)) {
    // Inquire whether the user wishes to enforce directory creation?
    let { action } = await inquirer.prompt(
      [
        {
          name: 'action',
          type: 'list',
          message: 'The directory already exists. Please make a selection:',
          choices: [
            {
              name: 'Overwrite.',
              value: true
            },
            {
              name: 'Cancel',
              value: false
            }
          ]
        }
      ]
    )

    if (!action) {
      return;
    } else if (action) {
      console.log(`\nRemoving ${chalk.cyan(targetDir)}...`)
      await fs.remove(targetDir)
    }
  }

  // In the event that the directory does not exist, it shall be created in a conventional manner.
  console.log(chalk.blue('[ Creating dir ] > '), targetDir);
  fs.mkdirSync(targetDir)

  let answers = await template()
  await code(answers)
}

async function template () {
  const answers = await inquirer.prompt(
    [
      {
        name: 'name',
        type: 'string',
        required: true,
        message: 'The project name',
      },
      {
        name: 'description',
        type: 'string',
        required: true,
        message: 'The project description',
      },
      {
        name: 'template',
        type: 'list',
        message: 'Please select a template:',
        choices: [
          {
            name: 'Vue for web',
            value: "vue-web"
          },
          {
            name: 'Vue for mobile',
            value: "vue-mobile"
          }
        ]
      }
    ]
  )
  
  return answers
}

async function code (answers) {
  console.log(chalk.blue('[ Creating json file ] '));
  const jsonData = JSON.stringify(answers);
  fs.writeFile('result.json', jsonData, 'utf8', (err) => {
    if (err) {
      console.error(err);
      return;
    }
    console.log('JSON file has been created!');
  });
}

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

How to Create a Customer Frontend Scaffold

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Top 10 JavaScript Charting Libraries for Every Data Visualization Need

10 Effective Tips To Reduce Website & Mobile App Load Time

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Top 10 JavaScript Charting Libraries for Every Data Visualization Need

10 Effective Tips To Reduce Website & Mobile App Load Time

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps