When starting a new web project, we will have to do a lot of work setting up folder structure, styling, linting, etc., beyond what we can get from a simple npm create vite command.

We obviously don't want to repeat ourselves when we wish to start with a new project. This is where project templates will be very handy. We can create templates according to our conventions and reuse them for new projects.

Creating such a template is very straightforward. All we have to do is create the folder structure with all the tools and configuration in vs-code and check it into GitHub. We can pull it whenever we want to use it for a new project.

What if we want to have a better developer experience like how vite does?
What if you want to start our new project with a template using a simple CLI command like npm create <your-template-name> instead of doing git pull <template-repo-name>?

Here is where the npm create command helps:

The npm create command is a simple alias for npx. npx is a command used to run the binary of a given package. For more on npx, read here.

With that, for example, running the npm create vite command is translated into npx create-vite. Here create-vite is the package that has a binary script named create-vite in the package.json.

{
  "name": "create-vite",
  "version": "5.2.3",
  "type": "module",
  "license": "MIT",
  "author": "Evan You",
  "bin": {
    "create-vite": "index.js"
  },
  "etc..."
}

By following this convention we can create our own project template package that has the bin script named as same as package-name. Inside the binary file we can write our logic to pull the code from github template and write into the directory.

Once published this package to npm we can run,
npm create reate-project which will do the project setup for us.