Publish NPM Package For Scaffold Project

Kenapa Perlu Scaffold Project?

Lu pasti pernah ngalamin tiap kali mau mulai project baru, harus setup dari awal? Bikin folder, install package, konfigurasi ini-itu? Ribet, kan? Nah, makanya gua bikin fe-template, sebuah scaffold/skeleton project buat frontend yang bisa langsung lu pake. Ga perlu setup manual lagi, tinggal jalanin satu command, and boom! Project lu langsung siap.

Bikin NPM Package buat Scaffold Project

1. Persiapan

Kita mau bikin package NPM yang bisa dipake buat generate project frontend secara otomatis, sebenernya ga harus frontend, bisa juga buat backend atau any project yang pengen lu buat, cuma karena npm identik dengan FE dev jadi untuk contoh gua buat untuk template Front-End. Gua udah bikin repository template di GitHub, bisa lu cek di sini:

🔗 GitHub Repo: fe-template

2. Setup Script

Kita bakal bikin script sederhana buat nge-clone repo template, hapus history Git lama, inisialisasi Git baru, dan install dependencies. Nih script-nya:

#!/usr/bin/env node

const { execSync } = require("child_process");
const fs = require("fs");
const path = require("path");
const readline = require("readline");

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

const REPO_URL = "https://github.com/Rafli-Dewanto/fe-template.git";

async function promptProjectName() {
  return new Promise((resolve) => {
    rl.question("Enter project name: ", (answer) => {
      resolve(answer.trim() || "my-frontend-app");
      rl.close();
    });
  });
}

async function main() {
  try {
    // minta user untuk input nama project
    const projectName = await promptProjectName();
    const projectPath = path.join(process.cwd(), projectName);

    // buat folder project
    if (!fs.existsSync(projectPath)) {
      fs.mkdirSync(projectPath, { recursive: true });
    }

    console.log("\n🚀 Creating new frontend project...");

    // Clone template repository
    execSync(`git clone ${REPO_URL} ${projectPath}`, { stdio: "inherit" });

    // Hapus history Git
    execSync(`rm -rf ${path.join(projectPath, ".git")}`, { stdio: "inherit" });

    // Inisialisasi Git
    execSync("git init", { cwd: projectPath, stdio: "inherit" });

    // Install dependencies
    console.log("\n📦 Installing dependencies...");
    execSync("npm install --legacy-peer-deps", {
      cwd: projectPath,
      stdio: "inherit",
    });

    console.log(`\n✨ Frontend project created successfully!

To get started:
  cd ${projectName}
  npm run dev

Happy coding! 🎉
    `);
  } catch (error) {
    console.error("❌ Error:", error.message);
    process.exit(1);
  }
}

main();

3. Setup di package.json

Supaya script ini bisa dipake secara global, tambahin konfigurasi di package.json:

{
  "name": "@dewantorafli/create-fe-template",
  "version": "1.0.0",
  "description": "CLI tool to scaffold frontend projects using Rafli's template",
  "main": "index.js",
  "bin": {
    "@dewantorafli/create-fe-template": "./index.js"
  },
  "keywords": [
    "cli",
    "frontend",
    "template",
    "scaffold",
    "react",
    "vite"
  ],
  "author": "Rafli Dewanto",
  "license": "MIT",
  "dependencies": {
    "readline": "^1.3.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/Rafli-Dewanto/fe-template"
  }
}

4. Publish ke NPM

Biar bisa dipake semua orang, kita perlu publish package ini ke NPM.

1. Login ke NPM (kalau belum login):

   npm login
   

2. Publish package:

   npm publish --access public
   

5. Usage

Setelah package lu ter-publish di NPM, orang lain bisa langsung install dan pake dengan cara:

npx @dewantorafli/create-fe-template

Atau kalau mau install global:

npm install -g @dewantorafli/create-fe-template
@dewantorafli/create-fe-template

Sekarang lu bisa mulai project frontend dengan sekali jalan. Ga perlu setup manual lagi! 🎉

Gimana? Simpel, kan? Dengan package ini, lu bisa hemat waktu buat setup project baru. Kalau ada saran atau ide tambahan, langsung aja komentar di repo GitHub gua. Happy coding! 🚀