Cara gunakan Live Server dengan Visual Studio Code

Visual Studio Code (VS Code) adalah editor kode yang populer di kalangan pengembang. Ia menawarkan berbagai ekstensi yang meningkatkan fungsionalitasnya, termasuk ekstensi Live Server. Live Server adalah server web sederhana yang memungkinkan pengembang untuk menguji aplikasi web mereka secara lokal tanpa memerlukan server khusus.

Jadinya gag perlu pake XAMPP atau bikin express JS. Web kita yang berbasis HTML dan Javascript bisa langsung dirunning di localhost dengan port tertentu. Simpel bukan :)

Dalam artikel ini, kita akan membahas cara menggunakan ekstensi Live Server di Visual Studio Code.

Memasang Ekstensi Live Server

Sebelum kita membahas cara menggunakan ekstensi Live Server, kita perlu memasangnya terlebih dahulu. Untuk memasang ekstensi Live Server, ikuti langkah-langkah berikut:

1. Buka Visual Studio Code.
2. Klik pada ikon ekstensi di sisi kiri jendela.
3. Cari "Live Server" di bilah pencarian.
4. Klik tombol "Install" di sebelah ekstensi Live Server.
5. Tunggu hingga ekstensi diunduh dan terpasang.

Menggunakan Ekstensi Live Server

Sekarang kita telah memasang ekstensi Live Server, mari kita lihat bagaimana menggunakannya untuk melayani aplikasi web.

1. Buka file HTML yang ingin Anda jalankan di Visual Studio Code.
2. Klik tombol "Go Live" di bagian kanan bawah jendela. Alternatifnya, Anda dapat mengklik kanan pada file HTML dan memilih "Open with Live Server."
3. Jendela browser baru akan terbuka, menampilkan aplikasi web Anda. Setiap perubahan yang Anda buat pada file HTML, CSS, atau JavaScript akan secara otomatis diperbarui di browser.

Akan muncul Pilihan Browser dan dialog peringatan pada firewall. Pilih "Allow Access".

Aplikasi udah running di Live Server VSCode dengan port 5500

Menyesuaikan Pengaturan Live Server

Live Server menyediakan beberapa opsi penyesuaian yang memungkinkan Anda mengonfigurasi server sesuai kebutuhan Anda. Berikut adalah beberapa opsi yang paling berguna:

• Port: Secara default, Live Server menggunakan port 5500. Anda dapat mengubah nomor port dengan menambahkan flag --port diikuti dengan nomor port yang diinginkan pada baris perintah saat memulai server. Misalnya, live-server --port=8000.
• Host: Secara default, Live Server menggunakan alamat localhost (127.0.0.1). Anda dapat menentukan alamat host khusus dengan menambahkan flag --host diikuti dengan alamat yang diinginkan pada baris perintah saat memulai server. Misalnya, live-server --host=192.168.0.1.
• Watch: Secara default, Live Server memantau semua file di direktori untuk perubahan. Anda dapat menentukan file atau direktori tertentu untuk dipantau dengan menambahkan flag --watch diikuti dengan nama file atau direktori pada baris perintah saat memulai server. Misalnya, live-server --watch=css.
• Ignore: Secara default, Live Server tidak mengabaikan file apa pun. Anda dapat menentukan file atau direktori yang diabaikan dengan menambahkan flag --ignore diikuti dengan nama file atau direktori pada baris perintah saat memulai server. Misalnya, live-server --ignore=*.scss.
• Open: Secara default, Live Server membuka jendela browser secara otomatis setelah server dimulai. Jika Anda tidak ingin jendela browser terbuka secara otomatis, Anda dapat menambahkan flag --no-browser pada baris perintah saat memulai server. Misalnya, live-server --no-browser.
• Browser: Secara default, Live Server menggunakan browser default pada sistem Anda. Anda dapat menentukan browser khusus yang ingin Anda gunakan dengan menambahkan flag --browser diikuti dengan nama browser pada baris perintah saat memulai server. Misalnya, live-server --browser=chrome.

Cara Ubah Konfigurasi Live Server VSCODE

Cara Ubah Port Live Server VSCode

Masuk ke setting atau tekan CTRL + koma

Pilih Extensions pada bagian kiri bawah

Expand dan cari Live Server Config dan pilih Edit in Seting.json.

Cara merubah Port Live Server

pada bagian bawah tambahkan liveServer.settings.port : <port yang digunakan> 

Kalo misal acak bisa diberi angka 0

Menggunakan Live Server di Visual Studio Code adalah cara mudah untuk menguji aplikasi web secara lokal. Dalam artikel ini, kita telah membahas cara memasang dan menggunakan ekstensi Live Server, serta opsi penyesuaian yang tersedia. Dengan memanfaatkan Live Server, Anda dapat menghemat waktu dan mempercepat proses pengembangan aplikasi web Anda.