Create your own NPM Starter Command | Project Initializer | Template CLI | INIT NPM Package Tutorial

Published: 14 July 2024
on channel: Sooraj Gupta

139

Setup a Template-CLI for Quickly Instantiating Projects

Create your own starter command with npm

GitHub Link:
https://github.com/s54a/s54a-init

NPM Link:
https://npmjs.com/package/@s54a/init

When I was starting a new project, I used the 'create vite app' command. Then, I began to remove & edit content of files for the project & I got the idea that I could create it once and paste it everywhere when I start a new project. That's how I started building this.

How it Works

The package stores Templates inside a folder called "Templates" then when you run the `init` command it displays the templates and then it will paste the folder at the location where the terminal is open.

Simply it just copies & pastes the Folders from one place to another

Folder Structure

📁 init
├── 🌅 images
│ ├── 🖼️ article.png
│ ├── 🖼️ init -a.png
│ ├── 🖼️ init -c.png
│ ├── 🖼️ init -h.png
│ ├── 🖼️ init -r.png
│ └── 🖼️ init.png
├── 📁 templates
│ └── 📁 templateTest
│ ├── 📄 index.html
│ ├── 📄 main.js
│ └── 📄 style.css
├── 📄 .gitignore
├── 📄 .npmignore
├── 📄 index.js
├── 📜 LICENSE
├── 📝 Readme.md
├── 📋 package.json
└── 📋 package-lock.json

For testing purposes, only one template has been included, consisting of three files (HTML, CSS & JS). Additional templates have not been added to avoid making the package unnecessarily large.

(Note ChatGPT built this folder structure)

Installation

This package provides an Executable Command

You will have to install this package globally to be able to use the `init` command.

npm install -g @s54a/init

Usage

To begin, open a terminal at the desired project location and run this command

init

This displays all available templates from the template folder, listed by folder name. Choose a template and enter the desired folder name when prompted to create a new project with the selected template's contents.

Users can also create templates themselves by running:

init -a "C:\Users\{User}\Desktop\Projects\Ongoing Projects"

Upon execution, the tool generates a new folder path containing the contents of the user-created template. Subsequently, when the init command is invoked, it showcases the recently created template under the specified name.

Tip: For Windows users, you can quickly access the folder by selecting it and then pressing `ctrl + shift + c`.

By Default when you create a Template it skips the `nodemodules` folder and its contents.

But for reason you want to create a template with `nodemodules` folder you will have to pass the `-y` flag.
init -a "O:\test\cliTest" -y

Templates can be removed using the following command:

init -r "template name"

Templates can also be added from GitHub with:

init -c "https://github.com/user/repoitoryName.git"

This process involves cloning the repository into the current terminal directory, removing the .git folder from the cloned repository, executing the init -a "repoName" command to create a copy in the templates folder, and then deleting the cloned repository folder from the current terminal location.

I have used this Regex to verify if the given string is a link or not.

const urlRegex =
/^(https?|ftp):\/\/(([a-z\d]([a-z\d-]*[a-z\d])?\.)+[a-z]{2,}|localhost)(\/[-a-z\d%.~+]*)*(\?[;&a-z\d%.~+=-]*)?(\-a-z\d]*)?$/i;

The reason it performs all these steps is because I attempted to accomplish it in a simpler manner but couldn't find one.

To see all the Commands (Help)

init -h

This a similer project built with Typescript
https://github.com/pongsatt/mycli/blob/mas...

Extra Resources
https://github.com/lirantal/nodejs-cli-app...

Take a look at https://yeoman.io/generators/

Why I made this

When you start Learning to code you will create multiple new projects so every time you will have to create new files

e.g. index.html, style.css, app.js

When you will advance to React you will do

npm create-react-app ProjectName

or

npm create-vite-app ProjectName

So every time you will do that you will have to remove files edit content of the files.

So I thought it is a hassel so lets just do it once and I wil copy & paste it every time whenever I start a new project.

Then I thought I can create a cli which does that for me & I started building this package.

Then on a suggestion of a friend I also added the Clone & Create Template from Github Feature.

How I use this Package

I use this Package whenever I start a new porject.

I have created my own template and added them as templates using `init -a "folder path"` command.

I have also added templates on Github.

So if I am on a new device or format my current one so I can just run the `init -c "githuburl"` command after installing the package to clone new project and create a new template.

So if you are a Freelancer or Someone who is learning to code, or starting a new Project you can use this.

On this page of the site you can watch the video online Create your own NPM Starter Command | Project Initializer | Template CLI | INIT NPM Package Tutorial with a duration of hours minute second in good quality, which was uploaded by the user Sooraj Gupta 14 July 2024, share the link with friends and acquaintances, this video has already been watched 139 times on youtube and it was liked by 8 viewers. Enjoy your viewing!

808