Bagaimana Cara Menyebarkan Aplikasi Frontend ke Netlify?

Menyebarkan aplikasi frontend bukanlah hal yang besar hari ini. Kami dapat menyebarkan situs dalam hitungan menit dengan teknologi modern dan platform hosting. Ada banyak platform hosting di luar sana. Tapi, kami tertarik dengan Netlify untuk artikel ini.

Mari kita gunakan aplikasi frontend kita ke Netlify .

Aplikasi Frontend

Ada berbagai jenis pustaka dan kerangka kerja frontend seperti React, Vue, Angular, dll., Dan kabar baiknya adalah semuanya menggunakan packager package yang sama. Deployment untuk semua aplikasi frontend yang dibangun dengan pustaka dan kerangka kerja yang berbeda serupa. Jadi, kami baik untuk menggunakan salah satu perpustakaan dan kerangka kerja tersebut.

Kami juga dapat membuat aplikasi frontend tanpa pustaka atau kerangka kerja apa pun. Ini adalah cara tradisional untuk membangun aplikasi frontend pada suatu waktu. Tapi, sekarang banyak berubah. Jadi, kita dapat membangun aplikasi frontend dengan cara yang berbeda. Meskipun, proses penerapannya sama untuk semua jenis aplikasi frontend yang berbeda itu.

Kita akan melihat penerapan satu aplikasi front-end yang dibangun dengan perpustakaan dan yang lain tanpa perpustakaan atau kerangka kerja apa pun. Mari kita membangun aplikasi frontend minimal untuk penerapan menggunakan React dan JavaScript Biasa .

Mempersiapkan

Kami akan membuat aplikasi React dan JavaScript sederhana untuk demonstrasi penerapan. Anda membuatnya juga untuk diikuti. Atau, jika Anda sudah memiliki aplikasi frontend, lewati ke bagian penerapan.

Kita perlu mengingat bahwa titik masuk dari aplikasi frontend harus index.html saat menerapkan ke Netlify .

Jika kita telah membuat aplikasi menggunakan pustaka atau kerangka kerja apa pun, kita tidak perlu mengkhawatirkannya. Secara default, perpustakaan dan kerangka kerja membuat file index.html dalam proses pembuatan untuk kami. Namun, ketika kita memiliki aplikasi JavaScript biasa, kita perlu membuat file index.html sebagai entri untuk aplikasi kita.

Aplikasi Bereaksi

Jalankan perintah berikut untuk membuat aplikasi React.

 npx create-react-app demo

Anda dapat memperbarui aplikasi sesuai keinginan sebelum menerapkan. Saya baru saja memperbarui sebaris teks di halaman Beranda. Itu tidak masalah, meskipun :).

Aplikasi JavaScript Biasa

Ikuti langkah-langkah di bawah ini untuk membuat aplikasi JavaScript sederhana.

• Buat folder bernama demo .
• Buat tiga file bernama index.html , styles.css , dan script. js .
• Di sini, index.html adalah titik masuk untuk aplikasi kita.

Keluarkan kreativitas Anda dan perbarui aplikasi. Saya hanya menambahkan hal-hal sederhana ke aplikasi.

Menyebarkan

Datang ke penyebaran aplikasi frontend ke Netlify, kami memiliki dua opsi. Kita bisa langsung men-deploy aplikasi dari GitHub, GitLab, BitBucket, dll., ke Netlify. Atau kita dapat menyebarkan menggunakan Netlify CLI (antarmuka baris perintah) . Tidak wajib mengetahui setiap orang untuk menerapkan aplikasi kami. Tapi, ada baiknya tentang berbagai opsi yang kami miliki untuk penerapan.

Mari kita telusuri masing-masing satu per satu.

GitHub

Kami menggunakan GitHub untuk meng-host kode kami. Anda tidak perlu menggunakannya karena tidak wajib. Anda dapat menggunakan platform lain sesuka Anda.

Ada dua jenis aplikasi yang bisa kita gunakan. Tapi, prosesnya terlihat serupa untuk keduanya. Meskipun saya akan menunjukkan keduanya. Terutama ada dua langkah di dalamnya. Mereka

• Dorong kode ke GitHub.
• Deploy aplikasi dari GitHub menggunakan Netlify.

Bagian pertama umum untuk aplikasi React dan JavaScript . Mari kita mulai proses penggelaran dengan langkah pertama.

Kami berasumsi Anda belum memiliki kode Anda di GitHub. Jika Anda memiliki kode di GitHub, Anda dapat melewati bagian kode push. Anda membutuhkan alat git . Jika Anda belum menginstal git di mesin Anda, maka Anda harus menginstalnya sebelum melanjutkan.

#1. Mendorong Kode ke GitHub

• Buka akun GitHub Anda dan buat repo bernama demo .

• Anda dapat melihat repo sebagai berikut setelah dibuat.

Sekarang, kita harus memasukkan kode kita ke repositori yang telah kita buat di atas. Untuk mendorong kode, Anda dapat mengikuti perintah yang diberikan dalam repo atau perintah di bawah ini.

• Buka terminal atau cmd.
• Buka direktori proyek Anda.
• Inisialisasi git dengan git init
• Tambahkan perubahan ke git git add . lokal git add .
• Komit perubahan dengan pesan git commit -m 'Completed application'
• Hubungkan repositori jarak jauh dengan repositori lokal kami git remote add origin 'your_repo_path' . Ganti your_repo_path dengan repositori jarak jauh Anda. Anda dapat menemukannya di repositori yang sama milik saya [email protected]:hafeezulkareem/demo.git
• Sekarang, tekan kode git push -u origin main
• Itu dia; kami telah mendorong kode kami ke GitHub.

Anda dapat melihat kode sebagai berikut di repo Anda.

Kita selesai dengan langkah pertama memasukkan kode kita ke GitHub. Jika Anda menerapkan aplikasi JavaScript biasa, kode Anda mungkin terlihat sebagai berikut.

Mari kita beralih ke langkah berikutnya dan menyebarkan aplikasi kita ke Netlify.

#2. Menyebarkan kode GitHub ke Netlify

Jika Anda tidak memiliki akun di Netlify, buat akun.

• Kunjungi situs Netlify.
• Masuk ke akun Anda.
• Anda dapat melihat tombol yang disebut Situs baru dari Git, seperti yang ditunjukkan di bawah ini.

• Klik tombol untuk mulai menerapkan.
• Anda akan menavigasi ke halaman penerapan yang terlihat sebagai berikut.

• Anda dapat membedakan platform hosting kode di halaman. Kami menggunakan GitHub. Jadi, klik di atasnya.
• Ini akan membuka jendela baru untuk masuk ke akun GitHub kami sebagai berikut.

• Masuk ke akun GitHub Anda untuk otorisasi Netlify.
• Setelah Anda masuk ke akun GitHub Anda, jendela akan ditutup dengan tulisan Authorized .
• Sekarang, cari nama repositori Anda dari bilah pencarian yang diberikan.

• Saat Anda mencari repositori, itu tidak akan muncul karena kami tidak memberikan akses repositori kami ke Netlify. Anda akan melihat tombol bernama Configure Netlify di GitHub .

• Klik tombol dan masukkan kata sandi akun GitHub Anda untuk mengonfirmasi akses.

• Anda akan menavigasi ke halaman Access yang terlihat sebagai berikut.

• Gulir ke bawah, dan Anda akan melihat bagian bernama Repository Access .

• Ada dua pilihan. Kami dapat memberikan akses ke semua repositori kami atau beberapa dari mereka yang membutuhkannya. Lebih baik memberikan akses ke repositori yang kami gunakan dan tidak semuanya.
• Pilih opsi Only select repositories sebagai berikut.

• Klik pada dropdown di bawah ini dan cari repositori yang ingin Anda gunakan. Pilih itu.

• Klik tombol Simpan .
• Ini akan mengarahkan ke halaman penyebaran Netlify . Dan Anda dapat melihat repositori baru.

• Klik pada repositori.
• Ini akan menampilkan detail yang berbeda seperti cabang untuk digunakan, perintah untuk menginstal paket, dll.,

• Jika Anda memiliki kode lengkap di cabang lain selain master , perbarui dengan memilih cabang dari dropdown.
• Terakhir, klik tombol Deploy site . Ini akan mengarahkan Anda ke dasbor.
• Ini akan memakan waktu untuk menyebarkan situs.

• Anda akan melihat situs yang dipublikasikan setelah disebarkan.

Itu dia.

Kami telah berhasil menyebarkan situs kami ke Netlify. Anda dapat mengklik URL situs untuk melihatnya secara langsung.

Kita bisa mengupdate pengaturan situs dan domain sesuai keinginan kita. Namun, kami tidak akan membahasnya di sini karena membuat topik lain yang lengkap untuk dibicarakan. Di bawah ini adalah aplikasi JavaScript biasa setelah penerapan.

Tidak ada perbedaan dalam proses penyebaran. Namun, ingat untuk tidak melupakan titik masuk aplikasi, yaitu index.html .

Sekarang, saatnya mempelajari metode lain untuk menerapkan aplikasi frontend kita.

#3. Menyebarkan kode menggunakan Netlify CLI

Netlify CLI adalah antarmuka baris perintah untuk menyebarkan aplikasi frontend dari terminal atau baris perintah. Ini berguna ketika Anda tidak ingin melalui beberapa langkah tambahan (metode di atas). Seperti metode di atas, kita dapat menggunakan React (library atau framework apa saja) atau aplikasi JavaScript .

Anda bisa mendapatkan dokumentasi lengkap Netlify CLI di sini. Tapi, itu tidak perlu untuk menyebarkan aplikasi. Anda dapat merujuknya ketika Anda pergi ke tingkat lanjutan.

Mari kita lihat bagaimana menerapkan menggunakan Netlify CLI.

Pertama-tama, kita harus menginstalnya di mesin kita. Ini tersedia sebagai paket simpul. Jadi, kita dapat menginstalnya menggunakan npm . Mari kita instal menggunakan perintah berikut.

 npm install netlify-cli -g

Bendera -g adalah untuk menginstal paket secara global sehingga kita dapat mengaksesnya di mana saja. Anda akan melihat sesuatu yang mirip dengan gambar berikut.

Mari kita lihat langkah-langkah untuk men-deploy React dan aplikasi JavaScript biasa menggunakan Netlify CLI.

• Jalankan perintah build dari aplikasi React (atau library atau framework lainnya). Kami tidak perlu menjalankan perintah apa pun dalam kasus aplikasi JavaScript biasa.

 npm run build

• Perintah build dapat bervariasi berdasarkan library atau framework yang Anda gunakan.
• Anda akan melihat folder build sebagai berikut.

• Ubah direktori Anda untuk membangun folder dalam kasus aplikasi Bereaksi atau folder proyek dalam kasus aplikasi JavaScript.

• Sebelum melanjutkan ke langkah selanjutnya, kita perlu membuat akun Netlify . Buka Netlify dan buat satu akun dan lanjutkan ke langkah berikutnya.
• Sekarang, kita perlu masuk menggunakan CLI. Mari kita jalankan perintah berikut untuk login.

 netlify login

• Perintah di atas akan membuka tab baru di browser default untuk login ke akun Netlify. Ini akan membawa Anda ke situs Netlify.
• Masukkan kredensial Anda dan masuk. Anda akan meminta untuk Mengotorisasi CLI setelah Anda masuk.

• Klik pada Otorisasi untuk mengotentikasi diri sendiri. Anda akan melihat pesan sukses setelah itu.

• Sekarang, saatnya untuk menyebarkan aplikasi kita. Jalankan perintah penyebaran berikut.

 netlify deploy

• Ini akan meminta Anda untuk memilih situs yang ada atau membuat yang baru. Pilih (gunakan panah atas dan bawah Anda) Buat & konfigurasikan situs baru dan tekan Enter .

• Ini kemudian akan menunjukkan Teams untuk memilih, gunakan panah Anda untuk memilih, dan tekan Enter .

• Sekarang, Anda dapat memasukkan subdomain untuk situs Anda. Padahal itu tidak wajib. Netlify akan memilih yang acak untuk kami jika kami meninggalkannya. Kita bisa mengubahnya nanti jika kita mau. Saya membiarkannya kosong untuk saat ini.

• Ini akan meminta kita untuk memasukkan direktori yang ingin kita gunakan. Kami telah menavigasi ke direktori tujuan. Mari kita tekan Enter . Anda juga dapat masuk ke direktori lain. Tapi itu tidak langsung. Jadi, lebih baik untuk menavigasi ke direktori tujuan terlebih dahulu dan kemudian menyebarkan.

• Ini akan menyebarkan situs kami untuk draf URL sebagai berikut.

• Anda dapat memeriksa situs Anda di draf URL dan memastikan semuanya sudah benar.
• Setelah memeriksa situs, kami dapat menyebarkannya ke produksi menggunakan perintah berikut.

 netlify deploy --prod

• Ini hanya akan meminta direktori. Masukkan direktori. Jika kita berada di direktori yang sama, maka tekan saja Enter .
• Itu dia. Kami menyebarkan situs selesai. Anda dapat mengunjungi situs untuk memeriksanya.

• Dan, inilah hasilnya.

Kami selesai dengan menyebarkan situs kami ke Netlify menggunakan Netlify CLI . Anda dapat memperbarui pengaturan situs di dasbor Netlify Anda.

Kesimpulan

Fiuh! Ini panjang. Anda tidak memerlukan panduan lain untuk menerapkan aplikasi frontend Anda ke Netlify setelah membaca ini sepenuhnya.

Ada dua metode untuk menyebarkan aplikasi kita ke Netlify. Yang mana yang harus diikuti? Ada sedikit keuntungan menggunakan metode pertama. Netlify akan memperbarui build setiap kali kami memasukkan kode baru ke repositori situs kami. Namun, dalam hal metode CLI, kita harus melakukannya secara manual.

Kami selalu menggunakan satu metode di atas yang lain berdasarkan situasi yang kami hadapi. Bagaimanapun, Anda tahu kedua metode penerapannya. Jadi, kita tidak perlu khawatir dengan metodenya. Pilih salah satu yang paling cocok untuk Anda.

Catatan: Situs demo yang ditampilkan dalam artikel mungkin tidak tersedia untuk umum setelah beberapa waktu.

Butuh alternatif untuk Netlify? Lihat platform hosting situs statis terbaik ini.

Selamat Menyebarkan