Dalam tutorial ini, kita akan melihat secara mendalam tentang cara men-deploy aplikasi React ke Netlify. Untuk mengikuti tutorial ini, Anda harus memiliki pengetahuan tentang hal-hal berikut ini:
- Membangun aplikasi React
- Version control: GitHub, Gitlab, Bitbucket, dll.
- Netlify
Netlify membanggakan dirinya sebagai cara tercepat untuk membangun situs yang luar biasa, dan ini bisa menjadi keuntungan besar bagi produktivitas Anda. Netlify dengan mudah masuk ke dalam hati dan pikiran banyak pengembang; beberapa bahkan menganggapnya sebagai hal terbaik yang pernah terjadi pada mereka dalam hal pengembangan dan penyebaran perangkat lunak.
Netlify memiliki tagline populer yang dapat berfungsi sebagai jangkar untuk tutorial ini, “cukup git push untuk menyebarkan ke seluruh dunia”.
Fitur-fitur Netlify
Selain dari fakta bahwa sebagian besar fitur-fiturnya benar-benar gratis, Netlify juga memudahkan penerapan dengan menyediakan yang berikut ini:
- UI yang mudah digunakan
- Penerapan cepat dalam hitungan detik
- Pembaruan bergulir, yang berarti tidak ada waktu henti, bahkan selama pembaruan pada situs Anda
- Kembalikan ke versi situs Anda yang berfungsi sebelumnya
- Integrasi berkelanjutan dan penerapan berkelanjutan dari version control
- Formulir instan untuk mengumpulkan data pengguna
- Fungsi untuk operasi tanpa server
Mempersiapkan aplikasi React Anda untuk deployment
Ada tiga cara umum untuk men-deploy aplikasi React ke Netlify. Sebelum kita membahas secara spesifik setiap metode, mari kita bahas beberapa langkah umum yang berlaku di semua metode penerapan yang berbeda.
Membuat aplikasi React
React adalah sebuah library JavaScript frontend yang bersifat open source untuk membangun antarmuka pengguna dan komponen UI. Untuk memulai membuat aplikasi React, kita akan menggunakan library Create React app untuk membuat aplikasi bernama portfolio-react.
Pada terminal, jalankan perintah berikut ini:
npx create-react-app portfolio-react cd test-netlify-deployment
Perintah di atas menginstal semua paket yang diperlukan untuk membuat aplikasi React sederhana serta beberapa file statis, memberikan kita dasar untuk bekerja. Untuk tutorial ini, kita akan menggunakan aplikasi contoh apa adanya, tetapi silakan membuat perubahan sebanyak yang Anda inginkan pada aplikasi contoh Anda.
Membuat direktori build
Selanjutnya, kita akan membuat build dari aplikasi kita di folder build siap produksi dengan menjalankan perintah di bawah ini:
npm run build
Perintah di atas menghasilkan sebuah folder build yang merepresentasikan versi kecil dari keseluruhan aplikasi, yang berisi semua yang kita perlukan untuk men-deploy aplikasi. Sekarang aplikasi React kita sudah siap untuk digunakan, kita dapat mendorong aplikasi ke kontrol versi pilihan kita. Dalam hal ini, saya akan memilih GitHub.
Kontrol versi dengan GitHub
Meskipun ada banyak sistem kontrol versi yang tersedia, untuk kepentingan tutorial ini, saya akan fokus pada sistem kontrol versi GitHub.
Buat repositori GitHub dengan nama apa pun yang Anda inginkan. Kemudian, kita akan mendorong aplikasi React kita ke repositori GitHub seperti yang ditunjukkan pada gambar di bawah ini.
Sekarang setelah kita selesai menyiapkan aplikasi contoh kita, kita dapat menyelami berbagai metode yang tersedia untuk men-deploy aplikasi kita ke Netlify.
Deploy aplikasi React dengan Netlify UI
Untuk pengembang yang lebih suka men-deploy dan mengonfigurasi aplikasi secara manual daripada menggunakan terminal command line, Netlify UI adalah pilihan terbaik.
Menghubungkan akun Netlify dengan akun GitHub
Jika Anda belum memiliki akun Netlify, Anda dapat membuat akun gratis. Kita akan masuk ke Netlify dengan akun GitHub yang telah kita buat dan ikuti petunjuk untuk mengotorisasi Netlify Auth.
Setelah mengotorisasi Netlify Auth, kita akan diarahkan ke halaman tim GitHub. Kita perlu membuat situs baru dari Git, seperti yang ditunjukkan di bawah ini:
Mengizinkan Netlify untuk mengakses repositori
Pada halaman Create new site, kita akan diminta untuk mengizinkan Netlify mengakses repositori GitHub. Kita dapat memilih untuk memberi Netlify akses ke seluruh akun GitHub, atau kita dapat memberi Netlify akses ke repositori tertentu dengan mengeklik tombol Konfigurasi Netlify di GitHub di bagian bawah halaman.
Build options dan men-deploy
Setelah memilih repositori tempat aplikasi React dihosting dan memilih cabang penyebaran dari langkah di atas, kita menentukan pengaturan build dasar yang diperlukan untuk menyebarkan situs. Untuk aplikasi yang dibuat dengan Create React App, kolom-kolom ini harus sudah terisi sebelumnya.
Pengaturannya meliputi direktori dasar, yang merupakan folder yang akan diasumsikan oleh Netlify sebagai folder utama untuk menjalankan perintah build. Secara default, ini akan mengasumsikan root dari repositori Git Anda, tetapi Anda dapat menentukan subdirektori, yang berguna ketika beberapa proyek berada dalam repositori yang sama.
Perintah build akan memicu pembangunan proyek Anda. Jika Anda tidak menggunakan Create React App untuk membuat aplikasi React Anda, periksa package.json untuk melihat apakah ada script build; biasanya, ini adalah npm run build. Output dari perintah build seharusnya ada di direktori publish. Untuk Create React App, seharusnya adalah build.
Setelah Anda menentukan pengaturan build, klik tombol Deploy Site, dan Selamat! Kita akan melihat penyebaran situs sedang berlangsung. Setelah deployment berhasil, kita dapat melihat pratinjau situs kita dengan domain uji yang dikembalikan.
