ReactJS #25: Deploy Aplikasi ke Internet – Netlify & Vercel

ReactJS #25: Deploy Aplikasi ke Internet

Pakai Netlify atau Vercel – Biar Teman-teman Bisa Lihat

Halo, arsitek web! 🌐

Setelah berjuang membuat aplikasi React yang keren, saatnya kamu mempublikasikannya ke internet agar bisa diakses oleh teman, keluarga, atau siapa pun di seluruh dunia! Proses ini disebut deploy atau menerbitkan. Bayangkan seperti kamu membuka toko kue setelah berhasil membuat kue yang enak. Toko ini bisa didatangi banyak orang.

💡 Analogi: Aplikasi React-mu saat ini hanya ada di komputermu sendiri (localhost). Itu seperti kue yang hanya kamu nikmati di dapur. Deploy adalah membawa kue itu ke toko online (server) sehingga semua orang bisa membelinya (mengaksesnya) melalui internet.

📦 Langkah 0: Siapkan Aplikasi untuk Deploy

Sebelum deploy, kita perlu membuat versi produksi dari aplikasi kita. Versi ini sudah dioptimalkan (diperkecil, digabung) agar lebih cepat diakses. Caranya gampang, jalankan perintah ini di terminal (dalam folder proyek):

npm run build

Perintah ini akan membuat folder baru bernama build yang berisi file-file siap upload. File-file inilah yang akan kita unggah ke layanan hosting.

⚠️ Periksa: Pastikan tidak ada error saat build. Biasanya jika ada error, akan muncul di terminal. Perbaiki dulu sebelum lanjut.

🚀 Platform Deploy Gratis: Netlify dan Vercel

Ada banyak layanan gratis untuk deploy aplikasi React. Dua yang paling populer dan mudah digunakan adalah Netlify dan Vercel. Keduanya menyediakan domain gratis (misal namamu.netlify.app) dan sangat ramah pemula.

🌿

Netlify

Cocok untuk pemula. Bisa deploy dengan drag-and-drop folder build atau langsung dari GitHub.

▲

Vercel

Dari pembuat Next.js. Sangat cepat dan terintegrasi dengan Git. Bisa deploy dengan satu perintah.

🌿 Cara Deploy ke Netlify (Metode Termudah)

Netlify memungkinkan kita mengunggah folder build langsung melalui browser. Ikuti langkah-langkah ini:

1. Buat akun di netlify.com (bisa daftar dengan akun GitHub, GitLab, atau email).
2. Setelah login, klik tombol "Add new site" → "Deploy manually".
3. Klik area "Drag and drop", lalu pilih folder build dari proyekmu (jangan di-zip, langsung foldernya).
4. Netlify akan mengupload dan men-deploy. Setelah selesai, kamu akan mendapat URL acak (misal random-name-123.netlify.app).
5. Klik URL tersebut untuk melihat aplikasimu yang sudah online!

Kamu bisa mengganti nama situs dengan mengklik "Site settings" → "Change site name". Pilih nama yang kamu suka (selama belum dipakai orang).

📸 Simulasi Drag-and-Drop Netlify

📁 Seret folder build ke sini

Setelah diupload, muncul URL: my-cool-app.netlify.app 🎉

▲ Cara Deploy ke Vercel (Via Git atau CLI)

Vercel juga sangat mudah. Ada dua cara populer: via Git (GitHub) atau via CLI (Command Line).

Opsi A: Deploy dengan Git (Rekomendasi untuk proyek serius)

1. Upload proyek React-mu ke GitHub (atau GitLab, Bitbucket).
2. Buat akun di vercel.com (bisa login dengan GitHub).
3. Klik "Add New" → "Project".
4. Pilih repository GitHub yang berisi proyekmu.
5. Vercel akan otomatis mendeteksi bahwa ini proyek React (Create React App).
6. Klik "Deploy". Tunggu beberapa detik, lalu dapatkan URL!

Opsi B: Deploy dengan CLI (cepat tanpa GitHub)

1. Instal Vercel CLI di terminal:
npm install -g vercel
2. Login ke Vercel dari terminal:
vercel login
3. Masuk ke folder proyek React-mu, lalu jalankan:
vercel
4. Ikuti petunjuk (pilih scope, dll). Vercel akan otomatis mendeteksi pengaturan dan men-deploy.
5. Setelah selesai, kamu akan mendapatkan URL (misal my-app.vercel.app).

💡 Tips: Setiap kali kamu melakukan perubahan dan push ke GitHub (jika menggunakan Git), Vercel dan Netlify bisa otomatis redeploy. Ini sangat praktis!

🔧 Konfigurasi Tambahan (Jika Perlu)

Kadang ada masalah seperti routing 404 jika menggunakan React Router. Karena React Router adalah client-side routing, server perlu diarahkan ke index.html untuk semua rute. Netlify dan Vercel sudah menangani ini secara otomatis, tapi jika perlu, kita bisa tambahkan file konfigurasi.

Untuk Netlify:

Buat file netlify.toml di root proyek:

[[redirects]] from = "/*" to = "/index.html" status = 200

Lalu push ulang. Atau lebih mudah, Netlify biasanya sudah otomatis mengarahkan.

Untuk Vercel:

Buat file vercel.json di root proyek:

{ "routes": [ { "src": "/[^.]+", "dest": "/", "status": 200 } ] }

Tapi Vercel juga sudah otomatis mendukung React Router.

🧪 Latihan: Deploy Aplikasi Cuaca atau Todo List

Sekarang coba deploy aplikasi yang sudah kamu buat sebelumnya (misal aplikasi cuaca dari artikel #14 atau todo list dari #15). Pilih salah satu platform (Netlify atau Vercel) dan ikuti langkah-langkah di atas. Setelah berhasil, bagikan URL-nya ke teman-temanmu! 🎉

⚠️ Perhatian: Jika aplikasimu menggunakan API key (seperti OpenWeatherMap), pastikan key tersebut tidak ikut terupload di kode yang publik. Sebaiknya simpan di environment variable (bisa diatur di Netlify/Vercel). Tapi untuk latihan sederhana, tidak apa-apa karena key gratis kita mungkin masih aman. Jangan gunakan key dengan batasan kuota besar.

🌐 Mendapatkan Domain Kustom (Opsional)

Kamu bisa menggunakan domain sendiri (misal www.namamu.com) dengan menghubungkannya ke Netlify atau Vercel. Caranya:

• Beli domain dari penyedia domain (Niagahoster, Namecheap, dll).
• Di dashboard Netlify/Vercel, masuk ke pengaturan domain, ikuti petunjuk untuk mengganti nameserver atau menambah record DNS.

Ini langkah lanjutan, tidak wajib untuk belajar.

🚀 Kesimpulan

• Deploy adalah proses mempublikasikan aplikasi ke internet.
• Gunakan npm run build untuk membuat folder build yang siap deploy.
• Netlify dan Vercel adalah dua platform gratis yang sangat mudah untuk deploy React.
• Netlify bisa dengan drag-and-drop folder build.
• Vercel bisa terintegrasi dengan Git atau menggunakan CLI.
• Setelah deploy, kamu mendapat URL yang bisa dibagikan ke siapa saja.

Selamat! Sekarang aplikasi React buatanmu sudah bisa diakses seluruh dunia. Kamu sudah resmi menjadi developer sesungguhnya! 🌟

Di artikel selanjutnya kita akan belajar tentang Refaktorisasi dan Struktur Folder yang Rapi – agar proyekmu semakin profesional. Sampai jumpa!

Lanjut ke ReactJS #26: Refaktorisasi dan Struktur Folder ▶

✨ Kini aplikasi React-mu telah online, banggakan hasil karyamu! ✨