Ketika membuat atau belajar web design & development, anda bisa aja membuka file teks HTML nya langsung di browser. Cara ini sederhana, namun memiliki keterbatasan. Ujung-ujungnya anda tetep butuh program web server juga. Visual Studio Code adalah teks editor populer juga memiliki plugin static web server yang bisa dijalankan dalam sekali klik. Praktis!
TL/DR (Versi Singkat)
Untuk keperluan static server yang termudah, saya menyarankan pakai Visual Studio Code dan plugin Live Server.
Dengan ini anda mendapatkan teks editor keren, plus server sederhana yang bisa dijalankan dalam sekali klik. Yang bakal menyulap folder kerja anda jadi alamat http lokal.
VSCode = https://code.visualstudio.com/
LiveServer = https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Versi Panjang – Panduan Untuk Pemula
Latar Belakang
Ketika seseorang belajar tentang web, baik dalam hal yang mendasar seperti HTML, JS, CSS. Cepat ato lambat akan butuh memakai program yang bernama web server.
Server? Kalo belajar server-side script programming semisal PHP, Python, dll, memang jelas butuh server. Tapi kan trio HTML+CSS+JS adalah sepenuhnya client-side yang cukup jalan di browser. Buat apa server segala?
Memang sih, dokumen HTML bisa dijalankan di local. Dan kalo kita ngoding halaman web dalam suatu file.html, lalu dibuka di Chrome, maka web page-nya akan di-load dan jalan baik-baik aja.
Di URL bar, alamatnya akan diawali dengan file:/// diikuti dengan path file di pc anda. Itu artinya file anda diload di lokal.
Biasanya cara ini udah cukup untuk belajar dasar web. Namun seiring dengan progress belajar anda, terutama pada JS, maka banyak hal-hal yang ga jalan. Misalnya ketika ingin merequest data lain dari internet.
Browser seperti Chrome memiliki aturan security dalam mengakses sesuatu di domain yang berbeda. Dengan local file, semuanya serba dibatasi.
Jadi, walaupun ngodingnya di lokal, untuk mengikuti cara kerja web sesungguhnya, maka anda perlu mengakses halaman web tersebut dengan protokol http://.
Caranya? Dengan menjalankan program bernama web server.
Tugasnya web server adalah men-serve halaman web dan file-file pendukungnya dengan protokol standar http.
http adalah protokol komunikasi standar yang dipakai web browser.
Web browser mengakses alamat tertentu yang menuju ke server. Lalu server memberikan file yang diminta.
Jadi sama dengan yang dipakai di internet www. Bedanya karena ini lokal, maka alamat webserver kita juga lokal, biasanya http://localhost:xxxx dengan xxxx adalah nomer port (optional).
Ada banyak web server seperti Apache, nginx, dll. Namun untuk kebutuhan koding HTML, CSS, JS, kita ga perlu web server yang canggih-canggih. Cukup web server sederhana, yang biasa kadang orang juga bilang “static web server”.
Yang fungsinya menyulap suatu folder di PC anda menjadi server.
Server akan memberi kita alamat & port untuk mengakses. Dalam hal ini adalah localhost:5500. Perhatikan, localhost adalah host name lokal PC kita dan 5500 adalah port nya.
localhost adalah nama host lokal yang alamat IP nya 127.0.0.0, jadi http://localhost/index.html bisa juga diakses melalui IP http://127.0.0.1/index.html.
Hal ini mensimulasikan web kita ketika nanti di-deploy ke web hosting.
Misalnya…
Lokal – http://localhost:5500/index.html
Live – http://www.domainanda.com/index.html
Jadi tugas static server cukup sederhana.
Cuma men-serve file-file static di local PC anda.
Static server apa yang paling praktis dan mudah buat pemula?
Banyak artikel web dasar di luar sana yang menyuruh kita menjalankan web server sederhana untuk mengakses static html. Namun webserver yang disarankan oleh artikel-artikel tersebut terkadang kurang user friendly. Bagi pemula hal ini bisa mengurangi motivasi belajar. Misalnya nyuruh install Python, atau Node.js, atau Apache.
Walaupun server tersebut sangat sederhana, namun kita musti menjalankannya lewat command line. Walau memang hal ini bagus untuk dipelajari, tapi beberapa pemula atau non-programmer udah keder duluan.
Cara yang lebih mudah untuk keperluan static html.
1. Pakai Adobe Brackets – sayangnya udah deprecated!
Tadinya ada program teks editor khusus webdev bernama Adobe Brackets, yang mantep banget untuk koding html, CSS, JS. Salah satu fiturnya adalah memiliki built-in webserver. Tinggal klik jebret.
Namun brackets udah ga aktif dikembangkan lagi. Bahkan Adobe nyuruh beralih ke Visual Studio Code. So, kami ga menyarankan aplikasi ini lagi.
2. Visual Studio Code + Live Server
Menurut saya, local webserver sederhana termudah yang saya temui saat ini adalah Live Server, yang berupa plugin dari Visual Studio Code, atau biasa disebut VS Code.
Jika anda belum punya VS Code, saya sangat menyarankannya. Ini teks editor buat koding buatan Microsoft yang gratis dan sangat populer karena memang bagus, dan memiliki banyak plugin-plugin berguna.
Download & Install di https://code.visualstudio.com/
Setelah jalan, install plugin Live Server. Caranya:
(1) Di bar kiri, pilih extensions. Untuk mengakses berbagai extension (plugin). Semacam app store-nya lah.
(2) Search extension bernama “Live Server”, nanti akan muncul beberapa extension yang relevan, mungkin ada beberapa yang namanya mirip. Live server yang kita inginkan adalah yang dibuat oleh Ritwick Dey. Jangan salah.
(3) Klik install.
Kadang ada plugin yang meminta restart VS Code setelah install. Jika diminta restart, restart aja.
Kalo Live Server udah terinstall, nanti di pojok kenan bawah ada tombol bernama “Go Live”.
Cara Pakai
Sangat mudah. Live Server akan menyulap folder kerja anda sebagai alamat http local.
Jadi pertama-tama, anda harus buka folder project anda di VS Code, File – Open Folder.
Misalnya saya buka folder di d:/project/demo1.
Kalo anda klik “Go Live” di kanan bawah, maka folder kerja anda akan di-serve. Plugin akan ngasi tau port yang dipakai, misalnya 5500 (default).
Plugin juga otomatis membuka browser default di PC anda. Dalam hal ini di tempat saya akan muncul window Chrome baru ke alamat itu.
Alamat server lokal saya adalah http://127.0.0.1:5500/.
Mudah sekali kan!
Catatan tambahan:
Jika tombol “Go Live” di kanan bawah ga muncul
Walopun udah install, dan tombolnya ga muncul entah karena suatu alasan tertentu (saya kadang mengalaminya), maka untuk me-run server bisa melalui command palette juga.
Klik menu View – Command Palette.
Lalu ketik keyword “Live Server”, akan muncul berbagai command yang relevan. Pilih yang Live Server: Open with Live Server.
Jika anda bekerja di lebih dari 1 projek di folder yang berbeda-beda
Cukup buka VS Code window baru, lalu open folder project kedua anda seperti langkah sebelumnya. Kalo butuh menjalankan live server disini, dia akan secara otomatis dikasi port yang berbeda.
Karena 5500 sedang terpakai, maka dia 5501. Demikian pula seterusnya 5502, 5503, dll. Jadi ga akan bentrok dengan projek lainnya. Praktis sekali kan.