Fullstack Eric's Blog
Create a simple CLI for boilerplates

Create a simple CLI for boilerplates

Fullstack Eric's photo
Fullstack Eric
·

4 min read

In modern web development, boilerplates have become invaluable tools for developers. They offer a well-structured foundation for building web, mobile, and desktop applications, saving time by reducing the need for repetitive configuration tasks. If you're looking for an efficient way to streamline the initial setup process for your next application, you're in the right place!

In this post, I will guide you through the steps to create and publish an npm package for a boilerplate, similar to the widely-used npx create-next-app and npx create-next-app@latest. My focus is on enhancing your productivity and refining your development workflow by simplifying the process of starting new projects with command-line interfaces and boilerplates. So, get ready to dive in and discover new ways to optimize your toolset as a developer!

  1. Initialize a new TypeScript project and install dependencies:
mkdir my_cli_tool && cd my_cli_tool
npm init -y
tsc --init
npm install typescript copyfiles ts-node @types/fs-extra @types/node --save-dev
  1. Install additional dependencies for CLI prompt:
npm install enquirer fs-extra --save
  1. Update the "scripts" section of package.json:
"scripts": {
  "start": "ts-node src/index.ts",
  "build": "tsc",
  "postbuild": "copyfiles -u 1 src/templates/**/* dist/",
  "test": "echo 'Error: no test specified' && exit 1"
}

The "postbuild" script will copy the templates folder and its contents to the dist directory after the build process is complete, ensuring that the templates are available in the output directory. The -u 1 option in the copyfiles command will preserve the structure of the source directory (src/templates) relative to the output directory (dist/templates).

  1. Update the compiler options in the tsconfig.json file:
{
  "compilerOptions": {
    "outDir": "dist",
    ...
  },
  ...
}
  1. Create a file src/index.ts and add the following TypeScript code:
#!/usr/bin/env node

import { prompt } from "enquirer";
import * as fs from "fs-extra";
import * as path from "path";

const copyTemplateFiles = async (srcDir: string, destDir: string) => {
  try {
    await fs.ensureDir(destDir);
    await fs.copy(srcDir, destDir);
    console.log(`Your new React app ${destDir} has been created!`);
  } catch (err) {
    console.error("An error occurred while copying the template:", err);
  }
};

const main = async () => {
  const response: { appName: string; template: "default" | "typescript" } =
    await prompt([
      {
        type: "input",
        name: "appName",
        message: "What is the name of your app?",
      },
      {
        type: "select",
        name: "template",
        message: "Choose a template:",
        choices: ["default", "typescript"],
      },
    ]);

  const templatePath = path.join(
    __dirname,
    "../src/templates",
    response.template
  );
  const appPath = path.join(process.cwd(), response.appName);
  await copyTemplateFiles(templatePath, appPath);
};

main();

Now, when you run your CLI tool, it will prompt the user to choose a project name and template ('default' or 'typescript'), and then create the app using the chosen template.

Make sure your templates contain a proper app structure to ensure the generated app will function correctly. One way you can create these templates, is by initializing two React applications with 'create-react-app', one with a default template, and another with a TypeScript template, and then copying their contents to the default and typescript folders accordingly into the folder /src/templates

To publish your CLI tool to npm, follow these steps:

  1. Update your package.json for your CLI tool:

    Add a "bin" section to specify the command-line tool name and its entry point. For example, if you want to call your tool "awesome-boilerplate":

"bin": {
  "awesome-boilerplate": "dist/index.js"
},

Ensure you've provided all necessary information and updated the fields: "name", "version", "description", "main", "keywords", "author", and "license".

  1. Build your project by running npm run build. This command will transpile your TypeScript files into JavaScript and store them in the dist folder.

Ensure you have an npm account. If you don't have one, create a new account at npmjs.com.

  1. Log in to your npm account using the command line:
npm login

Enter your username, password, and email address when prompted.

  1. Publish your CLI tool to the npm registry:
npm publish

Once you've successfully published your app, you should be able to run in your terminal:

npx awesome-boilerplate

and there you go!

You can check out the example repo here

and the npm package here

Enjoy!!!!

cliboilerplate