lifelong learner — urip iku urup, currently working on accenture.

Deploy angular/react/vue @ roast.io

1
Degananda.com -

Roast.io adalah penyedia hosting khusus untuk SPA / Single page application. Framework yang diakomodasi oleh roast io antara lain adalah angular js, react js dan vue js. Silahkan simak ulasan ini untuk mengetahui cara hosting pada roast.io

Selayang pandang

Terdapat berbagai pilihan hosting pada aplikasi angular(kasus pada tutorial ini adalah project angular, namun kami pikir tidak ada bedannya menghosting framework SPA lainnya) antara lain adalah vps dengan apache/firebase hosting ataukah roast.io. Roast.io adalah penyedia hosting khusus untuk SPA. Saat ini penyedia hosting tersebut masih dalam fase beta. Pada tutorial ini kita akan mencoba menghosting aplikasi angular dalam kasus ini adalah aplikasi angular note chapter-8 (salah satu project yang ada diblog ini untuk tutorial angular).  Kita akan menggunakan paket “free” untuk mendemonstrasikan hosting SPA pada roast.io

Roast.io

Roast.io mengklaim bahwa mereka adalah provider hosting tercepat untuk single page application.  Roast.io berdasarkan penjelasan pada website menjelaskan bahwa roast.io adalah suatu CDN (Content delivery network) yakni sebuah services yang berjalan pada background yang akan melakukan render secara “isomorphic” secara singkatnya rendering akan dilakukan pada sisi server. Biasannya aplikasi SPA akan dirender pada “client”. Sebenarnya angular memiliki “angular universal” yang juga dapat melakukan server side rendering.

Selain CDN roast.io juga mengklaim bahwa mereka dapat melakukan switch version terhadap project yang kita deploy layaknya sebuah git. Misalnya saat ini yang terdeploy adalah versi 2 , ketika ingin mengembalikan ke versi 1 dapat dengan mudah dilakukan. Roast.io juga melakukan http caching dan broti/gzip encoding yang dapat meningkatkan perform dari SPA(Single page application) kita.

Requirement

roast.io memiliki beberapa requirement apakah suatu project dapat dihosting atau tidak. Berikut ini adalah beberapa requirement yang diperlukan :

  1. Index.html sebagai root project dan base url berupa “/”
  2. Framework SPA yang melakukan rewrite terhadap DOM element. Dalam hal ini berdasarkan web mereka yang disupport adalah : React, Preact, Angular, Ember, Vue,
  3. Pushrate url

Deploy

Pastikan project yang akan kita hosting telah memenuhi ketiga syarat daitas. Berikut ini adalah folder tree project kami yang akan dideploy. Terdapat index.html dan dibangun dengan menggunakan angular. Sehingga telah memenuhi ketiga syarat diatas. Anda dapat mendapatkan project yang kami gunakan pada repository github dibawah ini

https://github.com/degananda/angular-note/tree/8.0

Terdapat beberapa langah untuk mendeploy aplikasi angular pada roast.io yakni :

langkah 1 – register

silahkan register dan melakukan validasi pada email.

langkah 2 – install roast secara global

perintah yang digunakna untuk menginstall roast secara global adalah (jangan lupa gunakan sudo jika anda bukan root user) karena akan menginstall pada global sytem.

npm install roast -g

langkah 3 – deploy

jalankan perintah

roast deploy

lalu akan muncul sebuah window baru pada browser yang menjelaskan bahwa kita terautentikasi dengan roast.io. Ini hanyalah informasi saja, dapat kita abaikan.

lalu ketika kita kembali pada commandline akan terjadi proses uploading dan konfigurasi. Jika site id belum di definisikan maka pilih lah “yes” seperti pada gambar dibawah ini

dan lakukan deploy pada folder tempat compiled project anda berada. Dalam hal ini kami sudah berada di folder dist maka memasukan “current_dir” atau opsi default yang ditawarkan oleh roast.io anda hanya perlu menekan enter.

kemudian akan terjadi proses upload file-file dalam folder tersebut. Tunggu beberapa saat maka viola! project telah berhasil diupload pada roast.io

hasil deploy diatas dapat diakses di  :

https://new-door-6796.roast.io/

berikut ini sedikit preview dari url diatas. Perbedannya dengan firebase hosting adalah ketika kita menggunakan versi free akan terdapat banner dibagian pojok kanan atas. Banenr tersebut bertuliskan roast.io. Jika ingin banner ini hilang maka harus menggunakan paket berbayar.

dan ternyata… setelah mencoba mengaksesnya secara spontan saya berkata .. “its fast”. Ulasan ini murni kami tulis akan keinginan pribadi bukan merupakan konten berbayar (peace).