Deploy Aplikasi Angular Anda di Netlify
Bingung mau deploy Aplikasi Angular yang bagus dan gratis itu dimana? Di Netlify saja!
Punya aplikasi Angular tetapi hanya berjalan di local saja? Ingin rasanya aplikasi kalian dilihat oleh banyak orang? Tetapi bagaimana caranya, ya? Tenang saja, kalian dapat melakukan deploy aplikasi Angular kalian ke Netlify! Mari kita bahas bersama-sama.
Apa Itu Deploy?
Apakah kamu pernah mendengar istilah deploy? Deploy atau deployment adalah kegiatan yang bertujuan untuk menyebarkan aplikasi yang sudah dibuat oleh developer. Jadi, kita sebagai user dapat menggunakan aplikasi tersebut.
Nah, untuk penyebarannya sendiri ada bermacam-macam cara tergantung dari aplikasi yang sudah dibuat. Karena Angular adalah aplikasi web, maka kita perlu deploy aplikasi Angular yang sudah dibuat ke Web Hosting.
Untuk penjelasan lebih detail mengenai Web Hosting, kalian dapat mengunjungi Artikel berikut ini: https://www.hostinger.co.id/tutorial/apa-itu-web-hosting
Memilih Web Hosting
Ada banyak sekali Web Hosting, diantaranya: Netlify, ZEIT Now, Heroku, dll. Semua tentu memiliki kelemahan dan kelebihannya masing-masing. Tetapi, web hosting mana yang bagus dan gratis untuk aplikasi Angular?
Ada 2 pilihan terbaik, yaitu Netlify dan ZEIT Now. Keduanya adalah web hosting yang digunakan untuk deploy static sites seperti aplikasi Angular. Baik Netlify ataupun ZEIT Now memberikan fitur yang sama untuk free user, seperti: unlimited apps, mendukung serverless function, dan free SSL.
Tetapi, ada beberapa pertimbangan sehingga saya menyarankan kalian untuk menggunakan Netlify dibandingkan dengan ZEIT Now, yaitu komunitas yang menggunakan Netlify lebih banyak sehingga apabila terjadi kesulitan lebih mudah untuk diatasi. Hal tersebut dapat lihat pada artikel dari Stackshare yang membandingkan kedua web hosting ini.
Persiapan
Sebelum kita membuat baru aplikasi Angular, pastikan kalian memiliki:
- Node.js v8.9+
- NPM v5.51+
Untuk membuat aplikasi Angular, kita membutuhkan Angular CLI. Gunakan command prompt untuk proses install. Ketik sintaks di bawah ini:
npm i -g @angular/cliSetelah meng-install Angular CLI, kita akan membuat aplikasi Angular. Ketik sintaks di bawah ini:
ng new angular-appNote: Kalian dapat mengganti angular-app dengan nama aplikasi Angular yang kalian inginakan.
Setelah membuat aplikasi Angular, kita masuk ke direktori aplikasi tersebut. Kita coba jalankan aplikasinya dengan mengetik sintaks berikut ini:
ng serveKemudian kalian buka web browser dan ketik URL http://localhost:4200. Hasilnya akan seperti gambar di bawah ini:
Hubungkan ke Git
Untuk dapat melakukan deploy aplikasi Angular yang sudah kita buat ke Netlify, kita perlu menghubungkan aplikasi Angular kita dengan Git. Kalian dapat menggunakan Github, Gitlab, ataupun Bitbutket. Pada kesempatan kali ini, saya akan menggunakan Github.
Berikut cara untuk menghubungkan aplikasi Angular ke Github:
Pertama, buka URL https://github.com dan login dengan akun yang kalian miliki.
Kedua, klik menu New Repository pada Navbar dan isi form yang telah disediakan seperti gambar di bawah ini:
Ketiga, buka aplikasi Angular kalian terlebih dahulu kemudian ketik sintaks berikut ini:
C:\...\angular-app> git remote add origin https://github.com/andriannus/angular-app.gitC:\...\angular-app> git push -u origin master
Apabila kalian masih bingung dengan command Git seperti di atas, kalian dapat melihat cheat sheet berikut ini: https://education.github.com/git-cheat-sheet-education.pdf
Selamat, kalian berhasil menghubungkan aplikasi Angular ke Github. 🎉
Deploy ke Netlify
Tahapan terakhir adalah melakukan deploy ke Netlify. Berikut adalah cara untuk dapat melakukan deploy aplikasi Angular ke Netlify:
Pertama, buka URL https://netlify.com dan login dengan akun yang kalian miliki.
Kedua, klik tombol New site from Git untuk membuat site baru. Kalian akan melihat tampilan seperti gambar di bawah ini:
Ketiga, kalian dapat memilih provider Git yang kalian gunakan untuk menyimpan aplikasi Angular. Disini saya menggunakan Github.
Keempat, pilih repository yang akan di-deploy. Kalian dapat melihat tampilannya seperti gambar beriktu ini:
Note: Apabila ada perubahan pada aplikasi kalian, Netlify akan otomatis melakukan deploy ulang sehingga aplikasi yang ada pada Netlify adalah yang terbaru.
Kelima, tentukan konfigurasi untuk proses deploy. Kalian dapat membuat konfigurasinya seperti gambar di bawah ini:
Note: Kalian dapat menyesuaikan Build command dan Publish directory sesuai konfigurasi dari aplikasi yang dimiliki.
Keenam, klik tombol Deploy site. Kemudian akan diarahkan ke halaman aplikasi Angular yang sedang dilakukan proses deploy seperti gambar di bawah ini:
Setelah selesai melakukan deploy, status in progress akan berubah menjadi link seperti gambar di bawah ini:
Ketujuh, kalian dapat mengklik link yang tersedia untuk melihat hasil deploy aplikasi Angular. Berikut adalah gambar dari hasil deploy aplikasi Angular:
Selamat, kamu sudah berhasil deploy aplikasi Angular ke Netlify! 🎉
Ubah Domain Aplikasi
Tentunya kalian dapat mengubah domain dari aplikasi Angular sesuai keinginan kalian. Berikut adalah caranya:
Pertama, kalian ke menu Settings kemudian pilih Domain management. Berikut adalah tampilannya:
Kalian dapat mengubah nama domain dari aplikasi Angular dengan klik tombol Add custom domain.
Kedua, kalian klik tombol Options > Edit site name hingga muncul pop up seperti gambar di bawah ini:
Ketiga, kalian isi Site name dengan nama aplikasi yang kalian inginkan dan klik tombol Save.
Hore, kalian sudah berhasil mengubah nama situs aplikasi sesuai dengan yang kalian inginkan 🎊
Kesimpulan
Dari banyaknya web hosting yang tersedia, Netlify merupakan salah satu yang terbaik yang dapat membantu developer dalam men-deploy aplikasi Angular. Selain gratis, kostumisasi nama situs dan domain, dan fitur Continous Development, Netlify juga memiliki keunggulan lain, yaitu komunitas yang luas.
Referensi
- Netlify ➡ https://www.netlify.com
- Github ➡ https://github.com
