> ## Content Index
> Fetch the complete content index at: https://debug.my.id/llms.txt
> Use this file to discover other available public pages before exploring further.

# Cara mudah install npm di Laravel
- URL: https://debug.my.id/cara-install-npm-di-laravel/
- Published: 2021-09-15T01:57:00.000Z
- Updated: 2026-09-13T22:00:06.000Z
- Description: Artikel ini membahas tentang bagaimana cara menambahkan dan meng-install npm package di Laravel
- Author: Tukang Debug
- Tags: Laravel, PHP, NodeJS

**Laravel** adalah sebuah framework web application populer yang berbasis **PHP**, sedangkan **npm** (Node Package Manager) adalah package manager untuk runtime environment **Node.js** atau secara umum ekosistem **JavaScript**. Laravel dan npm pada dasarnya tidak saling bergantung secara mutlak, artinya Laravel dapat digunakan tanpa npm dan sebaliknya.

Akan tetapi, Laravel memberikan kemudahan bagi para pengembangnya untuk menggunakan JavaScript dan CSS dalam membangun tampilan antarmuka (UI). Di era modern, Laravel menyediakan starter kit seperti **Laravel Breeze** dan **Laravel Jetstream** (dengan dukungan Blade, Vue, React, Tailwind CSS, hingga Livewire), di samping paket lama seperti `laravel/ui`.

Jika Anda menggunakan fitur-fitur UI modern di Laravel, maka tentu saja Anda membutuhkan npm, dan npm sendiri membutuhkan Node.js. Oleh karena itu, berikut ini adalah langkah-langkah mudah untuk menginstall npm dan menambahkan package di dalam proyek Laravel Anda.

## 0\. Menginstall Node.js dan npm

Seperti disebutkan di atas, npm terdistribusi bersama Node.js. Ketika Anda menginstall Node.js di komputer Anda, maka secara otomatis npm juga akan ikut terinstall. Silakan unduh installer Node.js terlebih dahulu melalui situs resminya: [**https://nodejs.org**](https://nodejs.org/?ref=debug.my.id).

[Apakah Node.js, npm dan bagaimana menginstallnyaApakah Node.js itu ? Anda seorang atau ingin menjadi seorang web programmer ? Maka saat ini jika anda membaca sebuah tutorial atau artikel, maka hampir pasti anda akan menemui sebuah perintah seperti di bawah ini. npm install ... bower install ... Apalagi jika anda adalah seorang Front end programmer, maka Node.js adalah![](https://debug.my.id/content/images/icon/favicon-9.ico)Sinau CodingTukang Debug![](https://debug.my.id/content/images/thumbnail/nodejs-2.png)](https://debug.my.id/apakah-nodejs-dan-cara-install-di-windows-linux-mac/)

Node.js telah tersedia untuk berbagai sistem operasi utama seperti **Windows**, **Linux**, dan **macOS**. Silakan pilih installer yang sesuai dengan sistem operasi yang Anda gunakan. Sangat disarankan untuk memilih versi **LTS (Long Term Support)** karena versi ini adalah versi yang paling stabil dan mendapatkan dukungan jangka panjang.

Setelah proses instalasi selesai, Anda dapat memverifikasi versi Node.js dan npm yang terpasang di sistem dengan menjalankan perintah berikut di terminal:

```bash
node --version
npm --version
```

## 1\. Menginstall dan menambahkan package yang diperlukan

Setiap proyek baru Laravel sudah dilengkapi dengan file `package.json` di direktori utama (root). Untuk menginstall semua package dasar beserta dependensi yang sudah didefinisikan di dalam file tersebut, buka terminal, masuk ke direktori proyek Laravel Anda, lalu jalankan perintah:

```bash
npm install
```

Dengan perintah ini, npm akan mengunduh semua package yang terdaftar di file `package.json` dan menyimpannya ke dalam direktori lokal bernama `node_modules`.

![Cara mudah install npm di Laravel](https://debug.my.id/content/images/2025/06/image-153.png)

Jika Anda ingin menambahkan package atau library JavaScript baru ke dalam proyek Laravel Anda, cukup jalankan perintah `npm install nama_package`. Contohnya jika Anda ingin menambahkan package frontend seperti `vuetify`, `vue`, atau `alpinejs`:

```bash
npm install vuetify
```

> Catatan: Package yang Anda install dengan perintah di atas akan otomatis dicatat ke bagian dependencies di dalam file package.json. Dengan demikian, anggota tim pengembang lainnya cukup menjalankan perintah npm install untuk menyelaraskan semua package yang sama.

## 2\. Mengompilasi JavaScript dan CSS

File JavaScript dan CSS yang Anda tulis biasanya perlu dikompilasi atau dibundle agar dapat dimuat oleh browser secara efisien. Pada Laravel modern (sejak Laravel 9.2+ hingga Laravel 11/12), Laravel menggunakan **Vite** sebagai frontend asset bundler bawaan resmi (menggantikan Laravel Mix).

Untuk menjalankan server pengembangan lokal (local development server) dengan fitur **Hot Module Replacement (HMR)**, jalankan perintah:

```bash
npm run dev
```

Saat perintah di atas berjalan, Vite akan terus memantau setiap perubahan pada file JavaScript dan CSS Anda secara instan dan langsung memperbarui tampilan browser tanpa perlu reload halaman secara manual.

![Cara mudah install npm di Laravel](https://debug.my.id/content/images/2025/06/image-154.png)

Ketika Anda telah selesai mengembangkan aplikasi dan siap untuk melakukan rilis ke server produksi (deployment), jalankan perintah berikut untuk mengompilasi dan meminifikasi semua aset ke dalam folder `public/build/`:

```bash
npm run build
```

> Catatan Khusus Laravel Versi Lama (Laravel Mix): Jika proyek Laravel Anda masih menggunakan Laravel Mix (berbasis Webpack dengan file webpack.mix.js), perintah yang digunakan sedikit berbeda: gunakan npm run dev untuk kompilasi development, npm run watch untuk memantau perubahan file otomatis, dan npm run production untuk build rilis deployment.

Sekian artikel mengenai cara mudah menginstall dan mengelola package npm di Laravel. Selamat mencoba dan semoga yang sedikit ini bermanfaat untuk kelancaran pengembangan aplikasi web Anda.

Sumber : [**Laravel Asset Bundling (Vite)**](https://laravel.com/docs/vite?ref=debug.my.id)