Cara Membuat Browser Menjadi Lokal Web Server

Cara Membuat Browser Menjadi Lokal Web Server-

Mau mulai mengembangkan web? Bikin dulu sebuah web development environment. Pakai XAMPP ataupun LAMP, bagus! Environment -nya cukup lengkap dalam menguji dan mengembangkan aplikasi web.

Eits tetapi hal tersebut juga dapat jadi kelemahan bagi seseorang yang akan memulai dasar-dasar pengembangan website. Kok bisa?

💻 Mulai Belajar Pemrograman

Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.

Daftar Sekarang

Pasalnya, XAMPP ataupun LAMP akan terasa begitu kompleks ketika kita hanya membutuhkan sebuah Web Server untuk menguji file HTML atau CSS yang kita buat.

Nah, artikel ini akan membantu kalian yang ingin memulai belajar dasar – dasar web development atau sering disebut web fundamentals dalam hal konfigurasi web development environment yang benar benar simpel.

Sebelum itu, penting kalian ketahui bahwa tips ini hanya dapat dilakukan pada browser Chrome, karena tools yang kita akan gunakan adalah sebuah extensions yang disediakan oleh Chrome Web Store.

Web Server for Chrome Extension

Web server for Chrome merupakan sebuah ekstensi yang dapat membantu kita ketika membutuhkan sebuah fungsi layaknya sebuah web server. Extension ini dapat digunakan untuk merender halaman website dari html dan css, sharing berkas secara lokal atau untuk pengembangan web secara minor.

Download Web Server for Chrome

Untuk mengunduh Extension ini silakan Anda cek tautan berikut: https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb .

Kemudian klik tombol “Add to Chrome” di kanan atas.

Jika terdapat popup seperti ini, silakan pilih “Add app”.

Setelah aplikasi berhasil dipasang, ia akan muncul pada halaman chrome apps. Untuk menuju halaman chrome apps Anda dapat menuliskan url berikut pada address bar: chrome://apps/

Extension tersebut juga biasanya muncul pada halaman daftar aplikasi pada komputer Anda.

Download Web Server for Chrome

Untuk melakukan konfigurasi, cukup mudah kok. Bukalah extension Web Server yang telah terpasang pada Chrome.

Pada tampilan konfigurasi terdapat komponen button dan beberapa panel control yang dapat kita manfaatkan. Berikut adalah penjelasan dari komponen-komponen tersebut:

Choose Folder. Button yang berfungsi untuk memilih folder yang akan dijadikan sebagai root folder Web Server
Switch Toggle. Toggle ini berfungsi untuk mengaktifkan atau menonaktifkan service.
Web Server URL(s). Link yang dapat dimanfaatkan untuk mengakses Web Server pada browser
Options. Terdapat beberapa opsi yaitu :

Run In Background: Service tetap berjalan walaupun extension ditutup.
Start on Login: Service berjalan ketika komputer pertama kali dinyalakan.
Accessible on Local network: Service dapat dimanfaatkan oleh komputer yang berada pada satu jaringan lokal.
Prevent computer from sleeping: Mencegah komputer melakukan sleep agar service tetap berjalan.
Automatically show index.html: Otomatis merender index.html yang berada pada root folder atau pun sub root folder.

Enter Port. Port yang digunakan untuk mengakses Service.

Langkah Penggunaan Web Server for Chrome

Untuk menjalankan Web Server kita perlu menetapkan sebuah root folder yang nantinya akan kita akses melalui web server. Buatlah sebuah folder, lalu buat sample html pada folder tersebut. Beri nama berkas itu dengan nama “index.html”.

Lalu pada halaman konfigurasi Web Server for Chrome, pilih folder yang akan dijadikan root folder.

Setelah memilih root folder, secara default Anda bisa menjalankan Web Server tersebut dengan menggunakan tautan http://127.0.0.1:8887.

Anda dapat mengatur port sesuai yang Anda inginkan dengan mengubah nilai pada Enter Port.

Tetapi disarankan untuk menggunakan port yang tidak sering digunakan oleh kebanyakan services.

Untuk dapat diakses pada jaringan lokal, Anda perlu aktifkan konfigurasi “Accessible on Local Network”.

Jangan lupa untuk melakukan pengaktifan ulang Service ketika konfigurasi diubah. Tujuannya, agar konfigurasi yang Anda tetapkan dapat langsung digunakan.

Port Forwarding

Untuk melakukan testing pada mobile device, service dari extension ini juga dapat dimanfaatkan oleh Android Emulator atau Android Device dengan memanfaatkan fitur Port Forwarding pada browser chrome.

Jika anda ingin mencobanya pada Android Device, Anda memerlukan kabel USB dan juga mengaktifkan Android Debugging pada Device Android Anda.

Untuk mengaktifkan Port Forwarding, silakan buka Google Chrome dan aktifkan developer tools pada browser. Atau tekan tombol kombinasi ctrl+shift+i. Setelah developer tools terbuka, pilih Customize and control Dev Tools → More Tools → Remote Devices.

Kemudian pilih tombol “Add rule” dan inputkan nilai port sesuai nilai yang digunakan pada konfigurasi Extension Web Server. Pada Local address inputkan nilai localhost:[port]. Contohnya jika kamu menggunakan port 8885, maka nilai yang diinput seperti gambar di bawah ini:

Setelah mengisi nilai port dan local address, lanjut tekan tombol Save. Dan yang terakhir centang nilai Port forwarding dan juga Discover USB devices. Sehingga konfigurasi akhirnya menjadi seperti ini:

Untuk mencobanya silakan buka Chrome Browser pada Android Emulator atau Android Device, kemudian arahkan pada url localhost:8885 (Port sesuaikan dengan nilai yang kamu gunakan). Maka halaman index.html pada root folder akan tampil pada browser.

Kesimpulan

Begitulah tips singkat yang bisa diberikan pada artikel kali ini, semoga dapat membantu terutama Anda yang baru akan memulai dasar-dasar pengembangan website. Dengan menggunakan Extensions ini kalian tidak harus repot-repot menginstall XAMPP atau LAMP untuk sekedar menggunakan fungsi Web Server.

Tetaplah mencoba, tetaplah belajar! Jika kalian memiliki tips yang lebih simpel tentang Web Server bahkan bekerja pada seluruh browser, silakan share pada kolom komentar ya!

Cara Membuat Browser Menjadi Lokal Web Server-end

Materi ini adalah bagian dari kelas Web Fundamentals yang kamu dapat akses di https://www.dicoding.com/academies/123

Tertarik mengikutinya? Yuk. Gratis