Parcel + React + Firebase = ️Situs Statis

Photo by Kira auf der Heide on Unsplash

Halaman web yang pertama kali dibuat adalah situs statis meskipun pada waktu itu belum ada istilah “situs statik” karena memang situs dinamik belum ada dan beberapa alasan kenapa situs statis sekarang menjadi pilihan:

• Kebutuhan pengiriman konten yang cepat karena situs statis seringkali memanfaatakn CDN dan gampang di-cache
• Keamanan karena situs statis tidak melibatkan script server maupun interaksi database sehingga meminimalisir breach.
• Jenis konten tidak banyak mengalami perubahan atau jarang sekali diupdate sehingga cocok untuk tipe situs dokumentasi, blog dll.

Generator situs statik sangatlah banyak kalau anda melihat di https://staticsitegenerators.net/ ada sekitar 🗻458🗻 yang terdaftar pada saat tulisan ini dibuat dan tentu saja tulisan ini tidak bertujuan untuk menambah daftar tersebut tetapi tetap sama yaitu men-generate situs statik melalui Parcel, React dan Firebase.

✏ Parcel

Instal secara global biar bisa dipakai untuk projek yang lain

PS C:\react-parcel> npm install -g parcel-bundler

✏ HTML & React & CSS & PNG & …

Seperti biasa buat projek nodejs dan tambahkan dependensi react ke projek tersebut

PS C:\react-parcel> npm init -y
PS C:\react-parcel> npm install react
PS C:\react-parcel> npm install react-dom

React memakai ES6 sehingga diperlukan babel untuk pengkonversian (tidak semua pengguna memakai browser berfitur ES6) dan tenang Parcel tidak memerlukan konfigurasi yang rumit seperti halnya bundler yang lain.

PS C:\react-parcel> npm i babel-preset-env babel-preset-react --save-dev

kemudian buat berkas .babelrc

{
  "presets": ["env", "react"]
}

Saya percaya kalau proses transform hanyalah temporary atau sementara karena adanya waktu jeda antara release spec JavaScript dan implementasi ataupun penggunaan pada browser maupun runtime Node.js dan itulah kenapa bermunculan berbagai macam tools untuk mengkonversi JavaScript agar ramah di browser tetapi jika pada suatu saat ES6 sudah 90% dipakai oleh pengguna maka tool seperti babel menjadi sekunder.

Setiap aplikasi web memerlukan halaman entri dan umumnya yaitu berkas index.html. Isi dari berkas HTML standar saja dan pastinya ada link ke berkas JS ataupun CSS atau Image, terserah kebutuhan anda

Di dalam berkas JavaScript index.js itulah anda bisa meng-import dan crafting komponen-komponen React dan dengan segala style maupun animasinya.

✏ Firebase Tools

Install secara global

PS C:\react-parcel> npm install -g firebase-tools

Cara Kerja

Pada dasarnya Parcel akan merubah dan membundle berkas index.html dan semua aset yang terhubung secara otomatis.

Halooo, ada Webpack lhooo?

Parcel merupakan Zero Configuration bundler artinya anda tidak perlu meluangkan waktu hanya untuk belajar mengkonfigurasi Webpack dan jauh lebih berkonsentrasi pada aplikasi.

Hmm…bukankah Static Generator sudah cukup?

Ya memang, tool seperti Hugo adalah tool siap pakai berdasarkan template dan penggunanya saya rasa untuk umum tetapi alternatif yang saya tulis disini sebenarnya ditujukan oleh developer yang khusus ingin mengembangkan situs plus ingin mempelajari React dan kawan-kawannya terutama untuk keperluan hosting dengan backend Firebase.

Kode

perintah untuk bundler aset memakai Parcel sangatlah mudah

PS C:\react-parcel> parcel build index.html

dan secara otomatis semua dependensi yang tertaut dengan berkas HTML akan di bundel ke folder keluaran default dist.

Hosting

Untuk upload ke hosting di Firebase sangatlah mudah dan 💯GRATIS!!.

Pastikan anda membuat projek di Firebase Console

Kemudian di komputer lokal anda tinggal melakukan 3 proses yaitu login, inisialisasi dan deploy melalui firebase-tools.

Proses deploy pada dasarnya adalah proses pengunggahan berkas-berkas statis hasil dari pembundelan oleh Parcel tadi.

Langkah setup hosting

kalau anda jalankan inisialisasi melalui terminal seperti pada terminal Visual Code Editor misalnya akan muncul beberapa pertanyaan, jawabannya sesuaikan dengan projek yang anda buat di konsol firebase dan pastikan folder dist yang akan diunggah

dan untuk deploying jalankan perintah terakhir berikut

PS C:\react-parcel> firebase deploy

URL yang diberikan firebase merupakan gabungan antara nama projek di firebase dan domain firebase, contoh hasilnya seperti

Situs Statis Firebase

🍔Sebenarnya semua proses diatas bisa saja di automasi agar semua proses bisa lebih sederhana tetapi menurut saya mengetahui proses itu terkadang jauh lebih penting, silahkan saja kalau anda mau membuatnya 🍔

Sedikit automasi bisa anda buat dengan memakai npm script untuk proses build maupun deploy ke firebase.

Happy Hacking!

Tentang Saya
Programer yang tidak terlalu bertendensi ke bahasa pemrograman tertentu, meskipun saya termasuk fans berat dari Node.js tetapi selama problem terselesaikan, ok saja kalau harus memakai teknologi lain — Github, Twitter