Apps Artificial Intelligence CSS DevOps Go JavaScript Laravel Linux MongoDB MySQL PHP Python Rust Vue

Membuat Web Server Sederhana dengan `http-server`

2 min read .
Updated on
Membuat Web Server Sederhana dengan `http-server`

Saat mengembangkan aplikasi web, menguji kode di lingkungan lokal sangat penting. Salah satu cara termudah untuk menyajikan file statis secara lokal adalah dengan menggunakan http-server. Alat baris perintah yang ringan dan mudah digunakan ini memungkinkan Anda membuat server web dasar dengan konfigurasi minimal.

1. Apa itu http-server?

http-server adalah server HTTP sederhana tanpa konfigurasi untuk menyajikan file statis. Ditulis dengan JavaScript dan dijalankan di Node.js, sehingga mudah diinstal dan digunakan di sistem apa pun yang memiliki Node.js.

Kegunaan:

  • Menguji file HTML, CSS, dan JavaScript secara cepat.
  • Menyajikan file selama pengembangan tanpa harus mengatur server kompleks seperti Apache atau Nginx.
  • Meng-host situs web sederhana atau aplikasi satu halaman (SPA) secara lokal.

2. Instalasi

Sebelum menggunakan http-server, pastikan Node.js dan npm sudah terinstal di komputer Anda. Jika belum, unduh dari nodejs.org.

Untuk menginstal http-server, gunakan npm:

npm install -g http-server

Flag -g memasang http-server secara global, sehingga bisa dijalankan dari direktori manapun.

3. Penggunaan Dasar

Setelah terinstal, Anda bisa menyajikan direktori apapun dengan berpindah ke direktori tersebut di terminal dan menjalankan:

http-server

Secara default, http-server akan menjalankan server di http://localhost:8080 dan menyajikan file di direktori saat ini.

Contoh: Misalkan Anda memiliki folder bernama my-website yang berisi file HTML, CSS, dan JavaScript. Jalankan:

cd my-website
http-server

Buka browser dan kunjungi http://localhost:8080 untuk melihat website Anda.

4. Menyesuaikan Server

http-server menyediakan beberapa opsi untuk menyesuaikan perilaku server:

  • Port: Tentukan port lain menggunakan flag -p atau --port.

    http-server -p 3000

    Server akan berjalan di http://localhost:3000.

  • Buka Browser Otomatis: Gunakan flag -o atau --open untuk membuka server secara otomatis di browser default.

    http-server -o

  • CORS Headers: Jika bekerja dengan API atau sumber daya yang membutuhkan Cross-Origin Resource Sharing (CORS), aktifkan CORS dengan flag -c atau --cors.

    http-server -c

  • Mode Silent: Menjalankan server tanpa output log, gunakan flag -s atau --silent.

    http-server -s

5. Pertimbangan Keamanan

http-server sangat baik untuk pengembangan lokal, tetapi tidak cocok untuk produksi. Tidak menyediakan SSL/TLS, logging lanjutan, atau fitur keamanan lain yang diperlukan untuk server produksi. Untuk produksi, gunakan server lebih kuat seperti Nginx, Apache, atau solusi berbasis cloud.

6. Pemecahan Masalah

Beberapa masalah umum dan solusinya:

  • Port Sudah Digunakan: Jika port 8080 sudah terpakai, tentukan port lain dengan flag -p.
  • Kesalahan Izin: Di beberapa sistem, mungkin perlu menggunakan sudo untuk menjalankan server di port rendah (misal port 80).

7. Kesimpulan

http-server adalah alat penting bagi pengembang untuk menyajikan file statis dengan cepat selama pengembangan. Dengan kesederhanaan dan kemudahan penggunaannya, Anda bisa fokus membangun aplikasi tanpa repot konfigurasi server. Baik untuk menguji file HTML tunggal maupun situs statis lengkap, http-server membuat pengembangan lokal menjadi mudah.

JavaScript

Lihat Juga

Memahami Perbedaan pnpm, Yarn, npm, dan Bun
Updated on
Memahami Perbedaan pnpm, Yarn, npm, dan Bun
Di ekosistem JavaScript, package manager memegang peranan penting dalam mengelola dependensi, skrip, dan konfigurasi proyek. Meskipun npm telah lama menjadi default, alternatif seperti Yarn, pnpm, dan Bun muncul dengan fitur unik dan peningkatan performa. Pada artikel ini, saya akan membahas perbedaan masing-masing package manager untuk membantu memilih yang paling sesuai dengan kebutuhan proyek Anda. 1. npm (Node Package Manager) npm adalah package manager asli untuk Node.js dan tetap paling banyak digunakan. Ia sudah terpasang bersama Node.js, sehingga menjadi pilihan default banyak developer.
JavaScript
Cara Cepat Membagi Array di JavaScript dengan `chunk`
Updated on
Cara Cepat Membagi Array di JavaScript dengan `chunk`
Kadang-kadang di proyek JavaScript, saya butuh memecah array besar jadi potongan-potongan kecil—entah buat manajemen UI atau pemrosesan data. Meski JavaScript punya banyak metode bawaan, nggak ada yang langsung bilang: “Hei, saya bisa nge-chunk array buat kamu.” Gini deh, kita bisa tambahkan sendiri. Menambahkan Metode chunk kita bisa extend Array.prototype pakai Object.defineProperty biar semua array bisa pakai chunk: Copy Object.defineProperty(Array.prototype, 'chunk', { value: function(size) { let arr = this; return [].concat.apply([], arr.map((el, i) => i % size ? [] : [arr.slice(i, i + size)]) ); } }); Cara Kerjanya this → array yang kita panggil chunk. arr.map + i % size → bikin chunk baru tiap size elemen. [].concat.apply([], …) → merapikan semua chunk jadi satu array. Contoh Penggunaan Copy let numbers = [1,2,3,4,5,6,7,8,9]; console.log(numbers.chunk(3)); // Output: [[1,2,3],[4,5,6],[7,8,9]] Sekarang tinggal panggil .chunk(size) di array mana pun.
JavaScript Array
JavaScript: Cara Cepat Mengubah Teks ke Title Case
Updated on
JavaScript: Cara Cepat Mengubah Teks ke Title Case
Kadang saya butuh bikin teks terlihat rapi—judul, nama, atau label UI. Manual kapitalisasi itu nyebelin. Untungnya, JavaScript bisa bantu dengan fungsi title case. Fungsi titleCase Copy function titleCase(str) { return str .toLowerCase() .split(" ") .map(word => word[0].toUpperCase() + word.slice(1)) .join(" "); } Cara Kerjanya Lowercase & Split: str.toLowerCase().split(" ") → pastikan semua huruf kecil dulu, lalu pisah jadi kata-kata.
JavaScript
Memangkas Teks dengan Batas Panjang di JavaScript
Updated on
Memangkas Teks dengan Batas Panjang di JavaScript
Saat mengelola teks di aplikasi web, sering kali saya perlu menampilkan potongan teks yang lebih pendek dari teks aslinya agar tampilan tetap rapi dan mudah dibaca. Kali ini kita akan membuat fungsi JavaScript yang memangkas teks hingga panjang tertentu dan menambahkan elipsis ("…") jika teks melebihi batas tersebut. Fungsi limitText Fungsi limitText dirancang untuk memangkas teks hingga panjang tertentu dan menambahkan elipsis jika panjang teks melebihi batas yang ditentukan. Berikut implementasinya:
JavaScript
JavaScript: Cara Cepat Ambil Video ID dari YouTube URL
Updated on
JavaScript: Cara Cepat Ambil Video ID dari YouTube URL
Kadang saya butuh ambil ID video YouTube dari URL—entah buat embed atau manipulasi video. URL YouTube bisa macem-macem formatnya. Untungnya, JavaScript bisa bantu gampang. Fungsi YouTubeGetID Copy function YouTubeGetID(url) { url = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/); return (url[2] !== undefined) ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0]; } Cara Kerja Split URL: Memecah URL berdasarkan pola umum YouTube (v=, youtu.be/, /embed/, dll). Ambil ID: Setelah split, ID biasanya ada di indeks ke-2. Kalau ada, ambil sebelum karakter non-alfanumerik; kalau nggak, ambil bagian pertama. Contoh Penggunaan Copy console.log(YouTubeGetID('https://www.youtube.com/watch?v=QOM0xWASUwE')); // QOM0xWASUwE console.log(YouTubeGetID('https://youtu.be/QOM0xWASUwE')); // QOM0xWASUwE console.log(YouTubeGetID('https://www.youtube.com/embed/QOM0xWASUwE')); // QOM0xWASUwE console.log(YouTubeGetID('https://www.youtube.com/vi/QOM0xWASUwE')); // QOM0xWASUwE Catatan Fungsi ini simpel tapi efektif buat semua format URL umum. Bisa langsung dipakai di aplikasi web untuk embed, playlist, atau manipulasi video. Kesimpulan Pada akhirnya, YouTubeGetID bikin hidup lebih gampang saat bekerja dengan URL YouTube. Snippet ini siap langsung dicoba, tinggal copy-paste dan jalan. Gini deh, kadang hal kecil kayak ini hemat waktu banget.
JavaScript
Menghapus Duplikat pada Array di JavaScript: Berbagai Metode
Updated on
Menghapus Duplikat pada Array di JavaScript: Berbagai Metode
Dalam pengembangan software, seringkali kita perlu menghapus elemen duplikat dari array. JavaScript menyediakan beberapa cara untuk melakukannya, tergantung apakah kamu ingin menghapus duplikat berdasarkan satu atau beberapa properti, atau mempertahankan elemen terakhir yang muncul. Di sini kita akan membahas berbagai metode menggunakan filter() dan pendekatan lainnya. 1. Menghapus Duplikat Berdasarkan ID Unik Jika array terdiri dari objek dengan properti ID unik, kita bisa menghapus duplikat berdasarkan ID tersebut. Hanya satu objek dengan ID yang sama yang akan dipertahankan.
JavaScript Array
chevron-up