Mengenal Teknologi Live Server di Visual Studio Code

Halo sobat Udacoding dimanapun kalian berada, mungkin sobat udacoding tidak asing lagi dengan XAMPP untuk running sebuah server local, XAMPP biasa disandingkan dengan Sublime text saat kita membuat project sederhana dalam Web Development.

Namun kali ini kali ini kita masih membahas lagi tentang Visual Studio Code. Dengan pembahasan kita lebih mengerucut, yaitu tentang Live Server. Apa sih itu Live Server? Apa sih manfaat dari Live Server? Dan bagaimana cara konfigurasinya? Yuk sama sama kita bahas kali ini.

Live server adalah plugin terpisah yang harus di download dalam visual studio code, yang memungkinkan kita untuk run hasil kode kita secara instan, dan tidak perlu reload web browsernya. Lalu bagaimana konfigurasinya, yuk simak langkah berikut ini:

1. Pastikan sobat udacoding telah menginstall browser dan visual studio code pada laptop atau komputer yang sobat gunakan. Bagi yang belum download silahkan klik link dibawah ini:

Browser Chrome: klik disini, ukuran download: 1,2 MB

Visual Studio Code: klik disini, ukuran download: 59,99 MB

2. Setelah menginstall, buka VS Code (Visual Studio Code) sobat, dan pilih menu plugin. dan perhatikan kolom Search Extensions in Marketplace.

sumber: dokumentasi pribadi

3. Pastikan koneksi internet dalam keadaan stabil, lalu search plugin pada kolom yang bertuliskan search extension in marketplace dan ketikkan Live Server.

sumber: dokumentasi pribadi

4. Di dalamnya terdapat banyak pilihan live server, namun untuk tutorial kali ini kita menggunakan contoh seperti gambar dibawah ini:

sumber: dokumentasi pribadi

5. Klik install, dan tunggu sampai selesai.

sumber: dokumentasi pribadi

Penting: Setelah selesai silahkan restart VS Code sobat, dengan cara; close VS Code-nya > lalu buka lagi untuk memastikan live server terinstal dengan baik.

6. Penting: Buat folder baru/ pastikan kode sobat sudah berada dalam folder. Karna plugin live server memerlukan lokasi folder html sobat untuk dapat mengakses file. Seperti contoh dibawah kita klik File > Open Folder

sumber: dokumentasi pribadi

7. Klik New folder > ketikkan nama folder Udacoding > klik Enter > lalu pilih folder bernama Udacoding.

sumber: dokumentasi pribadi

8. Live Server sobat telah siap digunakan. Untuk testing , mari kita buat new file dengan cara klik New File > lalu beri nama index.html > lalu klik Enter.

sumber: dokumentasi pribadi

9. Buka file tersebut, dan ketikkan html:5 > pilih pilihan itu > lalu klik tab. dan otomatis file html5 akan langsung terbuat.

sumber: dokumentasi pribadi

10. Buatlah sebuah tag <h1> dan tag <p> dibagian <body> seperti gambar dibawah ini.

sumber: dokumentasi pribadi

Penting: Jangan lupa untuk tekan CTRL + S, setiap kali selesai melakukan perubahan untuk menyimpannya.

11. Setelah selesai. silahkan klik Live Server pada VS Code sobat, dan tunggu beberapa saat.

sumber: dokumentasi pribadi

12. Maka otomatis browser akan terbuka. silahkan minimize dulu browsernya.

sumber: dokumentasi pribadi

13. Cobalah melakukan perubahan pada tag <p> seperti gambar dibawah ini. Lalu tekan CTRL + S untuk menyimpan perubahan.

sumber: dokumentasi pribadi

14. Lalu buka browser yang tidak kita tutup tadi, dan lihatlah! perubahan telah disimpan otomatis.

sumber: dokumentasi pribadi

Bagaimana? cukup memudahkan kita dan membuat proses development– menjadi lebih produktif bukan?

Jangan lupa share ilmu ini teman- teman kalian jika bermanfaat. Dan jangan lupa stay tune terus ya, agar tidak ketinggalan info menarik seputar pemrograman. Sampai jumpa!

1 Comment
  1. CSS Float - Baraja Coding

    […] Halo sobat? apa kabar? kali ini kita akan membahas tentang CSS Float dalam Web Development. Software yang akan kita gunakan kali ini adalah visual studio code di visual studio code. Pastikan sobat sudah mengikuti blog sebelumnya ya tentang live server.  […]

Leave a Comment