# Effortless Deployment 
of Next & Angular Apps with Firebase

### Introducing Firebase App Hosting

Hi teman-teman, Beberapa waktu lalu saya mendapat kesempatan untuk sharing pada acara **Google IO Extended Bogor 2024**. Topik yang saya bawakan adalah terkait salah produk baru dari Firebase. Saya mau sedikit sharing terkait materi yang saya bawakan di acara tersebut.

Oke langsung saja, saya akan mulai dengan pertanyaan:

Pertama pernah gak teman-teman merasa punya ide inovatif untuk membuat aplikasi *web* namun tidak memiliki waktu untuk mempelajari bagaimana menyiapkan infrastruktur yang dibutuhkan?

Atau teman-teman merasa ingin berinovasi dengan cepat namun terhambat oleh proses deploy yang masih manual dan tidak efisien?

Jika teman-teman merasakan hal tersebut, saya akan memperkenalkan **Firebase App Hosting** untuk teman-teman. "***The next generation of serverless web hosting with* Google**"

Seperti yang kita tahu akhir-akhir ini *fullstack framework* Javascript cukup banyak digunakan seperti **Angular** dan **Next.js**. Dimana kita dapat memanfaatkan *benefits* dari *server-side-rendering* dari Javascript dengan mudah. Misalnya untuk meningkatkan *SEO* (*search engine optimization*) atau untuk meningkatkan *load time* dari aplikasi kita.

Untuk itu kita butuh lebih dari sekedar *CDN* (*Content Delivery Network*). Kita butuh sebuah *backend* karena *fullstack framework* seperti Next.js dan Angular menggabungkan antara *backend* dan *frontend* sekaligus. Maka dari itu kita perlu menyiapakan infrastruktur. Tetapi menyiapkan infrastruktur yang dibutuhkan dan kapan kita membutuhkannya terkadang menjadi hal yang memusingkan dan cukup memakan waktu.

**Firebase App Hosting** hadir untuk menyelesaikan masalah tersebut. "***The new home for full-stack* Angular *and* Next.js *apps on* Google**".

Firebase App Hosting akan secara otomatis menyiapakan infrastruktur yang diperlukan dan menyajalankan aplikasi kita secara otomatis.

![](https://lh7-rt.googleusercontent.com/slidesz/AGV_vUduRMQs8rGNg8iEPF85AgoQa_bhGiToND0Fw0NYUhHOzMYeyLFWal_ULsjK9H9xVDA2aPXRCjzX9Da6PWME_V27jls24-09pgQyCg-ONTBWnEmsjgoJjW02dC89gkPTv4AVycEJkyyA2rhrZpIcAw1rtJuHnmw=nw?key=E3PGEb2_FMe1HCzpsBT8IQ align="left")

Firebase App hosting menyerderhanakan proses implementasi dari Github ke Google Cloud. Mulai dari membuat aset statis pada Google Cloud Build, lalu mengimplementasikan konten yang dinamis pada Google Cloud Run dan menyeajikan konten yang disimpan pada cache dalam Google Cloud CDN. Jadi kita cukup *push* kode kita ke Github, Firebase App Hosting akan menyelesaikan sisanya.

### Deploy a NextJS App with Firebase App Hosting

Sekarang pertanyaannya bagaimna melakukan deploy ke Firebase App Hosting dan serumit apa prosesnya. Kita akan coba bahas pada sesi ini.

Jadi untuk men-*deploy* aplikasi Next.js ke Firebase App Hosting ada beberapa langkah yang perlu kita lakukan.

1. **Download source code Next.js**
    
    Untuk men-*download* *project* Next.js kita bisa menggunakan perintah:
    
    ```bash
    npx create-next-app@latest
    ```
    
2. **Pergi ke Firebase Console**
    
    Untuk pergi ke Firebase Console kamu bisa mengunjungi link berikut: [https://console.firebase.google.com/](https://console.firebase.google.com/)
    
    Lalu masuk menu App Hosting pada bagian side bar seperti pada gambar dibawah dan kita bisa masuk ke bagian "***Get started***".
    
    ![](https://lh7-rt.googleusercontent.com/slidesz/AGV_vUciOoQzp4nopizA0KJEcLAKpSxYrHtMRfvDg2YIgj6EMmjCMIFEQEo3mGIEhB0koTmvop6vjz1pu5gve2Z43HcvOshuLXZoQnd0btNzy8CaBC_FNCyWoNsxNS02mNlpPwCkoaL6B_2jz7mA_TH8K2P1un5QDSE=nw?key=E3PGEb2_FMe1HCzpsBT8IQ align="left")
    
    *Note: Untuk menggunakan Firebase App Hosting kita perlu meng-upgrade pricing plan aplikasi kita jadi "Blaze"*
    
3. ***Set up* App Hosting**
    
    Pada bagian *set up* App Hosting ada tiga langkah yang harus kita lakukan yaitu:
    
    1. ***Import* *a* Github *repositoy***
        
        Pada step ini kita diminta menghubungkan Firebase App Hosting dengan akun Github kita.
        
        ![](https://lh7-rt.googleusercontent.com/slidesz/AGV_vUdJ6qo0fOhP1Ig-UHMldl-C1vDYtI8icoww1VlxJbVwbHQLmSe8H_5sQ8SDtUxJM_JSHADUsWD2g-2evt2X-1-by_EfxD15mzBFRhlP8IR7djvowXrjHqHHc5AbT-4h8IE3IXUXtecK-o0biu6tTRCs9KxU06X-=nw?key=E3PGEb2_FMe1HCzpsBT8IQ align="left")
        
        Setelah tehubung kita *import repository* yang ingin kita *deploy*, seperti gambar dibawah:
        
        ![](https://lh7-rt.googleusercontent.com/slidesz/AGV_vUd7AFfe_j_E2LWWlbzoW0P5CkQz-yQLDA1jB9ebNl1FT_tZoxOsdDIz7GPT_TThl037pkI_GMYztbKAwBWwetiqnUmDL0MYPgeTk9cwxi8Q8AOgbMKn8okZ9I4Dpl4KxewsrFrsJ_w09UylPTFvuFdpk6qxj-Zw=nw?key=E3PGEb2_FMe1HCzpsBT8IQ align="left")
        
    2. ***Deployment settings***
        
        Pada step kedua ini kita akan melakukan *deployment setting* dimana kita perlu menentukan *root directory* dan memilih *branch* dari *repository* kita yang ingin kita *deploy*.
        
        Pada step ini juga terdapat fitur *automatic rollout.* Kita bisa mengaktifkannya atau tidak. Ketika fitur ini aktif maka setiap ada perubahan pada *branch* yang kita pilih maka Firebase App Hosting akan melakukan proses *redeploy*. Untuk lebih jelasnya bisa lihat gambar dibawah:
        
        ![](https://lh7-rt.googleusercontent.com/slidesz/AGV_vUdZjJianR6flG17-ilcPcqslDxDh9HSu0ttXguT-cuZtUPR9UqZdGkLlVKPuMsVfWWr_kitVS6h2RoifJb0I4RrD-Pn0RMVBxsbO43OeMPh36ZaLmrO8_TWyY6tLgGCgeGvo8cT6roBPbq5uGwKBr2ZVHUqc3g=nw?key=E3PGEb2_FMe1HCzpsBT8IQ align="left")
        
    3. ***Name your backend***
        
        Pada step ketiga atau terakhir kita diminta untuk memberikan nama dari aplikasi *backend* kita. Firebase App Hosting akan membuatkan *server* untuk aplikasi *backend* kita secara otomatis pada layanan Google Cloud.
        
        ![](https://lh7-rt.googleusercontent.com/slidesz/AGV_vUc9AHVu9VYq2M81xq0IpIlHakhAgoJriaUB-cWwJ2eUmwr-kpWRJvlp-r7VVtCI6HmpAI5FvzMXlmrOcMURnCp_KBMjUI6CQd6BH8k_9BJzhCpV_bMZrvHiQREEQLdTREn05QFc5ezOWY8CKDTknJsLzJynC4va=nw?key=E3PGEb2_FMe1HCzpsBT8IQ align="left")
        
    
    Setelah setupnya selesai kita bisa menekan tombol "***Finish and Deploy***\*"\* untuk memproses *deployment* kita. Firebase App Hosting akan menyiapakan infrasktuktur aplikasi kita secara otomatis baik untuk *frontend* ataupun *backend*.
    
4. **Dashboard Firebase App Hosting**
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1724423501431/2af1e4b2-c66b-41e1-a688-ca745f708c1c.png align="center")
    
    Setelah proses deploy selesai kita bisa masuk ke *dashboard* aplikasi kita di Firebase App Hosting untuk melihat informasi dan fitur apa aja yang ada disana. Kurang lebih tapilannya seperti gambar diatas.
    
    Disini kita lihat pada *dahsboard* Firebase App Hosting terdapat dua section, yaitu:
    
    1. ***Current rollout***
        
        Pada *section current rollout* terdapat informasi git dan *commit* terakhir, *domain*, *manage domain* dan masuk ke Google Cloud Run Log dan Metrics untuk melihat kesehatan dari aplikasi kita.
        
    2. ***Rollout History***
        
        Pada *section rollout history* kita dapat melihat riwayat peluncuran dari apalikasi kita.
        
        Di Firebase App Hosting sendiri proses peluncurannya terdapat dua tahap yaitu *build* dan *deploy*, yang akan kita bahas pada bagian berikutnya.
        
5. **Rollout Process**
    
    Proses *rollout* pada Firebase App Hosting terdapat dua step yaitu:
    
    1. ***Build***
        
        ![](https://lh7-rt.googleusercontent.com/slidesz/AGV_vUeOrHLNNACYluPbqFl1nkBa8ztgEwy6zgAzjq0xhw-4D-Q3cwqdGRnGsRs0FsIE29-d6IDXYrQA_ZBpcddo8GtH6RQ45MPXokRvZb7_vJU1mx39rGjHyxhwV9Lj6qYpsEpE7Wg-1hbySO0HQoCqZIdZAynitFtg=nw?key=E3PGEb2_FMe1HCzpsBT8IQ align="left")
        
        Pada proses *build* ini, Firebase App Hosting akan meminta Google Cloud Build Job mengenerate ases statis dan membuat *container image* untuk Google Coud Run.
        
    2. ***Deploy***
        
        ![](https://lh7-rt.googleusercontent.com/slidesz/AGV_vUen9GvGrI57RVr-b8lRjw7rrGn16DKphdyiFitmR6lfEnLwVWn5Lt87qnY1sGIde4sxg_qoh7Fe7HheAaUHKAF1SMlrn2StEGih3KWb7ZBmNYkdbz9RWyjQmv-lry3uWVjGm0kMjSil_pUNVFI1NtK7qDgUJqMl=nw?key=E3PGEb2_FMe1HCzpsBT8IQ align="left")
        
        Setelah proses *build* selesai akan masuk ke proses berikutnya yaitu *deploy*. Pada tahap ini Firebase App Hosting akan membuat Google Coud Run Revision dengan image yang dibuat pada proses *build*. Lalu mengaktifkan trafik. Jika ada trafik yang masuk dan proses *deploy*\-nya sudah selesai maka trafiknya akan secara otomatis diarahkan ke deploy yang terbaru sehingga memperkecil kemungkinan *downtime*.
        
    
    ![](https://lh7-rt.googleusercontent.com/slidesz/AGV_vUdiimrGYRLZdTPlTiJGd1B6Ec5BWQi3DiTi9Ur-9irqvP67CTkISM8Eq3Ug28Ja4KgDbjqFUMDLjml-dQc8AmjENV80X3ZGAc8WXiPKl1akDqNPO6JNh6e0MsK7nLjaEciNUUjea7CayFyGnRX1uOdRiQRdaI0=nw?key=E3PGEb2_FMe1HCzpsBT8IQ align="left")
    
    Sekali lagi pada Firebase App Hosting proses *rollout* dikaitkan dengan Google Cloud Build Job dan Google Cloud Run Revision.
    
    Tetapi Ketika kita menggunakan serverless, ada satu hal yang menantang yaitu mencari tahu dimana ketika terjadi kesalahan. Apalagi jika kita tida memiliki visibilitas pada backend tentu akan sulit untuk menemukannya.
    
    Firebase App Hosting hadir dengan konsep yang namanya "*Just the right level*
    
    *of abstraction*". Dimana kita dapat masuk ke Google Cloud Build dan Google Cloud Run Revision untuk mengetahui apa yang terjadi dibelakang layar untuk setiap tollout. Misalnya kita bisa mencari tahu diamana dan bagaimana aplikasi kita dijalankan. Kita juga dapat melihat runtime configuration seperti informasi CPU boost, minimun instance yang aktif dimana ini dapat scale up dan scale down secara otomatis sesuai permintaan. Dan kita dapat melakukan konfigurasi dalam bentuk yml.
    
6. **Recap**
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1724914194424/e6ad803a-25f5-4bb4-b4ff-5dfcf2ad2983.png align="center")
    
    Untuk rangkuman bagaimana melakaukan *deploy* aplikasi Nextjs ke Firebase App Hosting kurang lebih seperti ini:
    
    1. Pertama kita buat aplikasi Nextjs-nya dengan menjalankan perintah `npx create-next-app`
        
    2. Kita hubungkan Firebase App Hosting dengan akun Github kita lalu import repo yang ingin kita deploy
        
    3. Setelah repo kita ter-*import* ke Firebase App hosting, Firebase App Hosting akan menyiapkan infranstruktur yang dibutuhkan dan menjalankan aplikasi kita secara otomatis.
        
    4. Kita juga dapat melihat build logs dan status backend dari aplikasi kita secara transparan.
        
    5. Yang terakhir kita dapat melakukan custom domain dan mendapatkan sertifikat SSL secara gratis.
        

### Optimized for Modern, Full-stack frameworks

Jika teman-teman pengguna lama Firebase tentu teman-teman kenal dengan Firebase Hosing. Yaitu layanan dari Firebase yang bisa kita gunakan untuk men-deploy static website.

Sekarang pertanyaannya apakah Firebase App Hosting ini akan menggantikan Firebase Hosting? Jawabannya adalah tidak.

Firebase App Hosting hadir bukan untuk menggantikan Firebase Hosting tetapi untuk mengisi gap tertentu.

Firebase App Hosting hadir untuk mengoptimalkan aplikasi fullstack framework yang memerlukan backend seperti Next.js dan Angular.

### Founding Principles

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1725530302111/9df5d416-4901-4850-998d-2fa123f6f935.png align="center")

Pada sesi ini kita akan membahas tentang prinsip dari Firebase App Hosting. Ada empat prinsip dari Firebase App Hoshting dan kita akan coba bahas satu per satu.

1. ***Full-stack***
    
    Firebase App Hosting di-*design* untuk me-*manage* semuanya dari Content Delivery Network (CDN) ke server-side-rendering (SSR).
    
    Firebase App Hosting tidak hanya mendukung pengalihan *traffic* ke *backend* tetapi akan menglola aplikasi *backend* kita sepenuhnya sesuai standarisasi layanan Google Cloud.
    
    Dimana layanan dari Google Cloud Run akan secara otamatis meningkatkan backend kita sesuai kebutuhan dan akan diturunkan ke 0 atau idle ketika tidak ada traffic. Hal tersebut bagus untuk menghemat *cost*.
    
2. ***Framework Aware***
    
    Prinsip kedua dari Firebase App Hosting ini adalah "***Framework Aware***". Dimana *build pack* dari Firebase App Hosting di-design dapat mengenali kode yang kita gunakan baik menggunakan Next.js maupun Angular.
    
    Firebase App Hosting juga dapat men-*deploy* dan menjalankan aplikasi kita secara otomatis sesuai dengan kode yang kita gunakan. Untuk saat ini yang baru di-*support* Next.js dan Angular.
    
3. ***Git-centric***
    
    Firebase App Hosting dirancang berdasarkan *Continuous Integration* dan *Continuous Delivery* (CI/CD) pada Github. Jadi penggunaanya cukup mudah. Setelah kita meng-install atau mengintegrasikan Firebase App Hosting dengan akun Github kita, implementasinya semudah melakukan git push.
    
    Kita bisa menjadi pengguna Firebase App Hosting tanpa perlu meng-*install* Firebase CLI di komputer kita.
    
    Kita juga dapat melihat status *development* dan *deployment* dari aplikasi kita. Selain itu kita juga dapat melihat peluncuran atau *rollout* dan dapat melacak setiap versi dari aplikasi kita.
    
    Firebase App Hosting dapat melihat *commit* baru sesuai kebijakan deploy yang kita buat. Dan akan men-*deploy* secara otomatis menggunakan Google Cloud Build.
    
4. ***Modern Architecture***
    
    Prinsip yang keempat dari Firebase App Hosting adalah "***Modern Architecture***" yang artinya layanan Firebase App Hosting sepenuhnya bersifat regional.
    
    Seluruh layanan Firebase App Hosting diisolasi berdasarkan wilayah *backend* dari aplikasi kita. Kegagalan disuatu *region* tidak akan berpengaruh ke *region* lainnya. Bahkan dalam 1 *region* dibagi lagi ke beberapa bagian dengan menggunakan layanan dari Google Cloud Load Balancear dan CDN.
    

### Benefits

Ada beberapa hal yang ditawarkan oleh Firebase App Hosting yang mungkin bisa menjadi pertimbangan teman-teman sebelum menggunakan layanan dari Firebase App Hosting.

1. ***Scalabel***
    
    Layanan dari Firebase App Hosting cukup *flexible*. Dimana Firebase App Hosting dapat melakukan *scale up* dan *scale down* infrastruktur *backend* aplikasi kita secara otomatis sesuai kebutuhan.
    
2. ***Flexible***
    
    Firebase App Hosting menawarkan flexibilitas yang cukup tinggi. Dimana memberikan kita kemampuan untuk melihat ke layanan dari Google Cloud, jadi kita dapat membangun infrastruktur aplikasi kita sesuai dengan kebutuhan.
    
3. **Secure**
    
    Firebase App Hosting juga menawarkan keamanan yang cukup tinggi karena didukung oleh layanan Google Cloud. Dan Firebase App Hosting membantu memastikan aplikasi kita memenuhi standar keamanan dan kepatuhan dari layanan Google Cloud.