Membuat aplikasi menggunakan React memang menyenangkan, apalagi ketika tampilan website sudah selesai dan seluruh fiturnya berjalan lancar di komputer sendiri. Namun, pekerjaan belum benar-benar selesai kalau website tersebut hanya bisa dibuka melalui localhost. Supaya orang lain dapat mengaksesnya melalui internet, kamu perlu melakukan deployment ke layanan hosting. Salah satu pilihan yang praktis adalah Vercel, platform cloud yang mendukung deployment aplikasi frontend modern. Melalui panduan cara deploy website React ini, kamu akan mempelajari proses memindahkan proyek dari komputer lokal ke internet, mulai dari persiapan project, menghubungkannya dengan GitHub, mengatur konfigurasi build, hingga mendapatkan URL website yang bisa dibagikan kepada siapa saja.

Menariknya, cara deploy website React ke Vercel tidak harus rumit atau membutuhkan pengalaman mengelola server. Kamu tidak perlu menyiapkan VPS, mengonfigurasi Nginx secara manual, atau mengunggah satu per satu file melalui FTP. Vercel menyediakan alur deployment yang terintegrasi dengan repository Git, sehingga perubahan kode dapat dipublikasikan kembali secara otomatis setelah kamu melakukan push. Bahkan, pengguna pemula bisa memanfaatkan paket gratis untuk proyek personal sesuai batas dan ketentuan layanan. Meski begitu, ada beberapa hal yang perlu diperhatikan, seperti perbedaan proyek React berbasis Vite dan Create React App, pengaturan output directory, environment variables, hingga masalah halaman 404 ketika menggunakan React Router. Semua bagian tersebut akan dibahas secara bertahap agar website dapat berjalan dengan benar setelah dipublikasikan.

Apa Itu Vercel dan Mengapa Cocok untuk React

Sebelum mempraktikkan deployment, ada baiknya kamu memahami bagaimana Vercel bekerja. Vercel merupakan platform deployment dan hosting yang dirancang untuk mempermudah publikasi aplikasi web. Platform ini mendukung berbagai framework frontend, termasuk React yang menggunakan Vite, serta framework berbasis React seperti Next.js. Untuk proyek React statis, prosesnya umumnya dimulai dari membaca source code, memasang dependency, menjalankan build, lalu menyediakan hasil build melalui infrastruktur hosting Vercel.

Salah satu kelebihan Vercel adalah integrasinya dengan GitHub, GitLab, dan Bitbucket. Ketika repository sudah terhubung, platform dapat membuat deployment baru berdasarkan perubahan kode. Vercel juga menyediakan preview deployment untuk membantu developer memeriksa perubahan sebelum dipublikasikan ke website utama.

Bagi pengguna yang baru belajar frontend, pendekatan ini jauh lebih sederhana dibandingkan mengelola server sendiri. Kamu bisa fokus mengembangkan komponen, memperbaiki tampilan, dan menambahkan fitur tanpa perlu menangani seluruh proses operasional hosting secara manual.

Kelebihan Hosting React Menggunakan Vercel

Keuntungan utama Vercel terletak pada kemudahan deployment. Proyek React yang sudah memiliki konfigurasi build standar biasanya dapat dikenali secara otomatis. Developer hanya perlu memastikan framework preset, build command, dan output directory sesuai dengan struktur proyek.

Vercel juga menyediakan HTTPS untuk domain deployment, integrasi custom domain, serta pengelolaan environment variables. Paket Hobby tersedia untuk penggunaan personal sesuai ketentuan yang berlaku, sedangkan kebutuhan komersial atau tim perlu menyesuaikan paket layanan.

Persiapan Sebelum Deploy Website React

Walaupun proses deployment relatif sederhana, persiapan tetap penting agar website tidak mengalami error setelah diunggah. Pastikan aplikasi sudah berjalan dengan baik di komputer lokal, seluruh dependency tercatat dalam package.json, dan tidak ada file penting yang hanya tersedia di komputer pengembang. Perhatikan pula konfigurasi API, routing, serta variabel lingkungan yang mungkin berbeda antara mode development dan production.

Untuk mengikuti tutorial ini, kamu memerlukan proyek React, Node.js beserta npm, akun GitHub, dan akun Vercel. Git juga diperlukan apabila kamu ingin mengunggah repository menggunakan terminal. Kamu dapat menggunakan React berbasis Vite atau proyek React lain yang memiliki proses build kompatibel.

Pastikan Project React Berjalan Normal

Buka terminal pada folder proyek React, kemudian jalankan perintah berikut untuk memasang dependency:

npm install

Setelah selesai, jalankan aplikasi menggunakan:

npm run dev

Perintah tersebut umum digunakan pada proyek Vite. Jika proyek menggunakan konfigurasi berbeda, gunakan script development yang tersedia pada package.json.

Buka alamat localhost yang ditampilkan terminal. Periksa apakah halaman, navigasi, gambar, dan fitur utama sudah berjalan dengan benar sebelum melanjutkan deployment.

Cara Deploy Website React ke Vercel Melalui GitHub

Metode yang paling praktis untuk melakukan deployment adalah menghubungkan repository GitHub dengan Vercel. Cara ini cocok untuk proyek yang terus dikembangkan karena setiap perubahan dapat dikirim melalui Git tanpa harus mengunggah file secara manual. Setelah integrasi berhasil, Vercel akan mengambil source code dari repository, menjalankan proses build, dan mempublikasikan hasilnya.

Sebelum memulai, pastikan proyek React sudah tersimpan dalam folder yang benar. Periksa file package.json dan konfigurasi build agar proses deployment tidak gagal karena dependency atau script yang belum tersedia.

Langkah 1 Upload Project React ke GitHub

Buat repository baru melalui GitHub. Kamu dapat memilih repository public atau private sesuai kebutuhan proyek.

Setelah repository tersedia, buka terminal di folder React dan jalankan:

git init
git add .
git commit -m "Initial React project"
git branch -M main
git remote add origin https://github.com/username/nama-repository.git
git push -u origin main

Ganti username dan nama-repository dengan informasi repository milikmu.

Jika proyek sudah memiliki Git atau remote origin, tidak perlu mengulang seluruh proses inisialisasi. Pastikan juga file seperti node_modules, hasil build, dan file environment berisi rahasia tidak ikut diunggah. Gunakan .gitignore untuk mengecualikannya.

Langkah 2 Login ke Dashboard Vercel

Kunjungi Vercel dan masuk menggunakan akun yang tersedia. Untuk mempermudah integrasi repository, kamu dapat menghubungkan akun GitHub melalui proses otorisasi resmi.

Setelah berhasil login, buka dashboard dan pilih opsi membuat proyek baru. Vercel akan menyediakan pilihan untuk mengimpor repository dari penyedia Git yang terhubung.

Pastikan repository React sudah muncul dan akses integrasinya sesuai dengan pengaturan GitHub.

Langkah 3 Import Repository React

Pilih repository yang ingin dipublikasikan, kemudian klik Import.

Vercel akan membaca struktur proyek dan mencoba mengenali framework yang digunakan. Untuk proyek React berbasis Vite, framework preset biasanya dapat menggunakan Vite.

Jika repository berbentuk monorepo atau aplikasi berada di dalam subfolder, atur Root Directory agar menunjuk ke lokasi proyek yang benar.

Langkah 4 Konfigurasi Build React

Bagian ini sangat penting karena hasil build menentukan file yang akan dipublikasikan. Untuk React berbasis Vite, konfigurasi umum adalah:

Pengaturan	React Vite
Framework Preset	Vite
Build Command	npm run build
Output Directory	dist
Install Command	npm install
Root Directory	Folder proyek React

Sementara itu, proyek Create React App umumnya menghasilkan output dalam folder build, bukan dist.

Pastikan konfigurasi mengikuti script pada package.json. Jangan menggunakan output directory yang salah karena Vercel bisa gagal menemukan file hasil build.

Langkah 5 Deploy Website React

Setelah konfigurasi selesai, klik tombol Deploy.

Vercel akan memasang dependency, menjalankan proses build, dan mempublikasikan aplikasi apabila seluruh tahapan berhasil. Durasi deployment bergantung pada ukuran proyek, dependency, dan kondisi proses build.

Ketika status menunjukkan deployment berhasil, kamu akan mendapatkan URL dengan domain vercel.app.

Buka URL tersebut melalui browser dan periksa seluruh halaman. Jangan hanya memeriksa homepage karena masalah routing atau resource terkadang baru terlihat ketika pengguna membuka halaman lain.

Cara Deploy React Vite ke Vercel dengan Benar

Vite menjadi salah satu build tool yang banyak digunakan untuk mengembangkan aplikasi React. Proses development-nya cepat dan konfigurasi proyek relatif sederhana. Namun, perbedaan antara development server dan production build perlu dipahami agar aplikasi yang berjalan normal di localhost juga berfungsi setelah deployment.

Pada proyek Vite, script build biasanya menjalankan perintah vite build. Proses tersebut menghasilkan file statis di folder dist, kecuali developer mengubah konfigurasi output secara khusus. File inilah yang digunakan ketika website dipublikasikan sebagai aplikasi statis.

Cara Mengecek Build React Vite

Sebelum deploy, jalankan:

npm run build

Jika berhasil, Vite akan membuat folder dist.

Kamu juga dapat melakukan pemeriksaan hasil build secara lokal dengan:

npm run preview

Perintah preview membantu memastikan hasil production build dapat dijalankan sebelum dikirim ke Vercel.

Perhatikan bahwa preview lokal bukan pengganti pengujian setelah deployment. Perbedaan environment variables, domain, dan konfigurasi routing masih dapat menyebabkan perilaku berbeda.

Cara Deploy React Tanpa GitHub Menggunakan Vercel CLI

Tidak semua developer ingin menghubungkan repository GitHub. Dalam kondisi tertentu, kamu mungkin sedang membuat prototipe sederhana atau ingin menguji deployment langsung dari folder lokal. Vercel menyediakan Command Line Interface atau CLI yang memungkinkan proyek dikirim melalui terminal.

Metode ini berguna untuk eksperimen dan pengujian cepat. Namun, deployment berbasis Git biasanya lebih nyaman untuk proyek yang membutuhkan riwayat perubahan, kolaborasi, serta proses publikasi otomatis.

Install dan Jalankan Vercel CLI

Pastikan Node.js dan npm sudah tersedia. Kemudian instal Vercel CLI:

npm install -g vercel

Masuk ke folder proyek React, lalu jalankan:

vercel

Ikuti proses login dan konfigurasi yang ditampilkan.

Perintah tersebut dapat membuat deployment preview. Jika ingin mempublikasikan langsung ke environment production, gunakan:

vercel --prod

Pastikan konfigurasi proyek sudah benar sebelum menjalankan deployment production.

Mengatasi React Router 404 Setelah Deploy

Salah satu masalah yang cukup sering ditemui saat melakukan cara deploy website React adalah halaman 404 ketika URL tertentu dibuka langsung atau browser di-refresh. Masalah ini umum terjadi pada aplikasi React Single Page Application yang menggunakan client-side routing.

Sebagai contoh, navigasi dari homepage ke /dashboard mungkin berjalan normal karena React Router menangani perpindahan halaman di browser. Namun, ketika pengguna membuka /dashboard secara langsung, server hosting bisa mencari file atau route fisik yang tidak tersedia.

Untuk aplikasi SPA statis, konfigurasi fallback dapat digunakan agar permintaan route yang sesuai diarahkan ke file index.html.

Konfigurasi Vercel JSON untuk React Router

Buat file vercel.json pada root proyek dengan konfigurasi berikut:

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

Konfigurasi ini merupakan contoh fallback umum untuk React SPA statis yang menggunakan BrowserRouter.

Setelah menyimpan file, lakukan commit dan push agar Vercel menjalankan deployment baru.

Perlu diperhatikan, aturan rewrite yang terlalu luas tidak selalu cocok untuk proyek yang mempunyai API routes, server-side rendering, atau routing khusus. Untuk aplikasi seperti itu, sesuaikan aturan dengan arsitektur sebenarnya agar request API tidak ikut diarahkan ke HTML.

Cara Mengatur Environment Variables di Vercel

Aplikasi React modern sering membutuhkan konfigurasi berbeda antara development dan production. Misalnya, alamat API lokal menggunakan localhost, sedangkan website production harus mengakses endpoint publik. Menulis seluruh konfigurasi langsung di source code bukan pendekatan yang ideal karena perubahan environment menjadi lebih sulit dikelola.

Vercel menyediakan pengaturan environment variables untuk membantu memisahkan konfigurasi proyek. Namun, developer tetap harus memahami bahwa variabel yang digunakan pada frontend dapat masuk ke bundle JavaScript dan dibaca pengguna.

Menambahkan Variabel Environment React Vite

Buka pengaturan proyek di Vercel, kemudian cari bagian Environment Variables.

Untuk proyek Vite, variabel yang ingin diakses melalui kode frontend umumnya menggunakan awalan VITE_, misalnya:

VITE_API_URL=https://api.example.com

Di React, variabel tersebut dapat dibaca menggunakan:

const apiUrl = import.meta.env.VITE_API_URL;

Setelah menambah atau mengubah variabel, jalankan deployment baru agar konfigurasi build yang terbaru digunakan.

Jangan menyimpan API secret, private key, atau token rahasia dalam variabel VITE_ karena nilainya dapat terekspos pada aplikasi frontend.

Cara Menghubungkan Custom Domain ke Vercel

Setelah website berhasil online, kamu mungkin ingin mengganti alamat bawaan vercel.app dengan domain sendiri. Custom domain membuat alamat website lebih mudah diingat dan memberikan identitas yang lebih profesional, terutama untuk portofolio, landing page bisnis, atau aplikasi yang digunakan publik.

Vercel mendukung penggunaan domain khusus melalui konfigurasi proyek dan DNS. Namun, pengaturan DNS harus mengikuti instruksi yang diberikan dashboard karena jenis record dan nilai yang diperlukan dapat berbeda berdasarkan konfigurasi domain.

Menambahkan Domain Website React

Buka dashboard proyek Vercel, kemudian masuk ke Settings dan pilih Domains.

Masukkan nama domain yang ingin digunakan, misalnya contohwebsite.com.

Vercel akan menampilkan petunjuk konfigurasi DNS. Sesuaikan record melalui penyedia domain atau DNS yang digunakan.

Setelah verifikasi dan propagasi DNS selesai, periksa akses domain menggunakan HTTPS. Pastikan juga domain utama yang dipilih sesuai dengan kebutuhan canonical URL website.

Cara Update Website React Setelah Deploy

Salah satu keuntungan deploy React dari GitHub adalah kemudahan melakukan pembaruan. Setelah repository terhubung dengan Vercel, perubahan pada branch yang dikonfigurasi sebagai production branch dapat memicu deployment baru secara otomatis.

Artinya, kamu tidak perlu mengulang proses import repository setiap kali memperbaiki tampilan atau menambahkan komponen. Cukup ubah kode, lakukan commit, lalu push ke branch yang sesuai.

Update React Menggunakan Git Push

Setelah menyelesaikan perubahan, jalankan:

git add .
git commit -m "Update tampilan website"
git push origin main

Contoh tersebut menggunakan branch main. Jika production branch proyek berbeda, sesuaikan perintahnya.

Vercel akan memproses deployment baru sesuai konfigurasi integrasi Git.

Periksa status deployment dan lakukan pengujian sebelum menganggap perubahan sudah berhasil diterapkan.

Penyebab Deploy React ke Vercel Gagal

Walaupun deployment dapat dilakukan dalam beberapa langkah, error tetap mungkin terjadi. Penyebabnya bisa berasal dari dependency yang tidak kompatibel, script build tidak tersedia, kesalahan import, perbedaan huruf besar dan kecil pada nama file, hingga konfigurasi environment yang belum lengkap.

Salah satu perbedaan penting antara komputer lokal dan lingkungan build adalah sensitivitas nama file. Import yang terlihat normal pada sebagian sistem operasi dapat gagal ketika proses build berjalan pada lingkungan yang membedakan huruf besar dan kecil.

Karena itu, log deployment merupakan sumber informasi pertama yang sebaiknya diperiksa ketika terjadi kegagalan.

Cara Memperbaiki Build Failed di Vercel

Buka deployment yang gagal dan periksa Build Logs.

Cari pesan error utama, kemudian cocokkan dengan struktur proyek. Jika error berasal dari dependency, periksa package.json dan lockfile. Jika terjadi kesalahan import, pastikan nama file serta path sesuai.

Jalankan kembali:

npm install
npm run build

Apabila build lokal berhasil tetapi Vercel gagal, bandingkan versi Node.js, environment variables, dependency, serta konfigurasi root directory.

Hindari mengubah banyak konfigurasi sekaligus karena hal tersebut dapat membuat sumber masalah semakin sulit ditemukan.

Tips Optimasi Website React Setelah Online

Deployment berhasil bukan berarti seluruh pekerjaan selesai. Website yang sudah online tetap perlu diperiksa dari sisi performa, aksesibilitas, pengalaman pengguna, dan SEO. Terutama jika React digunakan untuk membangun landing page, portofolio, atau website konten, kecepatan dan kemudahan navigasi dapat memengaruhi pengalaman pengunjung.

Beberapa hal yang perlu diperhatikan adalah ukuran JavaScript, optimasi gambar, lazy loading, penggunaan font, serta jumlah request jaringan. Aplikasi yang ringan biasanya lebih nyaman digunakan pada perangkat dengan koneksi internet terbatas.

Optimasi SEO React di Vercel

Pastikan setiap halaman penting memiliki title dan meta description yang relevan. Gunakan heading yang terstruktur, teks alternatif gambar, navigasi yang jelas, serta URL yang mudah dipahami.

Untuk aplikasi React SPA, perlu diingat bahwa pengaturan metadata di browser saja belum tentu memberikan hasil yang sama dengan HTML yang sudah dirender pada server atau saat build. Jika proyek sangat bergantung pada SEO dan pengindeksan halaman dinamis, pertimbangkan pendekatan prerendering atau framework yang mendukung server-side rendering.

Gunakan Google Search Console untuk memantau pengindeksan dan PageSpeed Insights untuk mengevaluasi performa halaman setelah website dipublikasikan.

Apakah Deploy React ke Vercel Gratis

Vercel menyediakan paket Hobby gratis yang ditujukan untuk penggunaan personal dan nonkomersial sesuai ketentuan layanan. Paket tersebut dapat digunakan untuk mempelajari deployment, mengembangkan portofolio, dan menjalankan proyek yang memenuhi batas penggunaan.

Namun, gratis bukan berarti seluruh fitur dan sumber daya tersedia tanpa batas. Penggunaan bandwidth, build, fungsi server, serta kebutuhan tim atau komersial perlu disesuaikan dengan ketentuan paket yang berlaku.

Kapan Perlu Upgrade Hosting

Jika proyek berkembang menjadi aplikasi bisnis, membutuhkan kolaborasi tim, atau penggunaan sumber daya meningkat, evaluasi paket layanan yang tersedia.

Jangan hanya mempertimbangkan harga. Perhatikan kebutuhan deployment, keamanan, kapasitas, observabilitas, serta arsitektur backend yang digunakan.

Untuk aplikasi React statis sederhana, kebutuhan hosting biasanya berbeda dibandingkan aplikasi full-stack dengan database, autentikasi, dan pemrosesan server.

Kesimpulan

Memahami cara deploy website React merupakan kemampuan penting bagi developer frontend karena aplikasi yang berjalan di localhost belum dapat digunakan publik. Melalui Vercel, proses deployment dapat dilakukan dengan menghubungkan repository GitHub, mengatur konfigurasi build, lalu mempublikasikan hasilnya ke domain yang tersedia.

Untuk proyek React berbasis Vite, konfigurasi umum menggunakan npm run build dengan output directory dist. Sementara itu, Create React App umumnya menggunakan folder build. Perbedaan tersebut perlu diperhatikan agar Vercel dapat menemukan hasil kompilasi aplikasi.

Selain deployment awal, kamu juga perlu memahami pengaturan React Router, environment variables, custom domain, serta proses update melalui Git. Jika terjadi error, periksa build logs dan pastikan konfigurasi proyek sesuai dengan lingkungan production.

Dengan mengikuti tahapan cara deploy website React ke Vercel secara berurutan, kamu bisa mempublikasikan aplikasi tanpa harus mengelola server secara manual. Setelah website online, lanjutkan dengan pengujian fitur, optimasi performa, dan perbaikan SEO agar hasil akhirnya bukan hanya dapat diakses, tetapi juga nyaman digunakan pengunjung.

FAQ Cara Deploy Website React ke Vercel

Setelah mempelajari proses deployment, biasanya masih muncul pertanyaan mengenai biaya hosting, konfigurasi build, penggunaan GitHub, serta penyebab error. Berikut beberapa jawaban yang dapat membantu ketika kamu mulai mempublikasikan aplikasi React sendiri.

Bagaimana cara deploy website React ke Vercel?

Upload proyek React ke GitHub, hubungkan repository dengan Vercel, pilih framework yang sesuai, periksa build command dan output directory, lalu jalankan deployment. Setelah berhasil, website mendapatkan URL yang dapat diakses melalui internet.

Apakah Vercel gratis untuk React?

Vercel menyediakan paket Hobby gratis untuk penggunaan personal dan nonkomersial sesuai ketentuan layanan. Batas penggunaan dan fitur dapat berubah sehingga sebaiknya diperiksa melalui halaman pricing resmi.

Apakah React Vite bisa dihosting di Vercel?

Bisa. Vercel mendukung proyek Vite. Konfigurasi umumnya menggunakan npm run build dan output directory dist, selama proyek tidak menggunakan pengaturan build khusus.

Apakah deploy React harus menggunakan GitHub?

Tidak. Kamu dapat menggunakan integrasi Git atau melakukan deployment melalui Vercel CLI. GitHub lebih praktis untuk proyek yang membutuhkan pembaruan otomatis dan riwayat perubahan.

Kenapa React Router error 404 setelah deploy?

Masalah tersebut dapat terjadi ketika server tidak memiliki fallback untuk route yang dikelola di browser. Pada SPA statis, konfigurasi rewrite ke index.html dapat digunakan, dengan tetap memperhatikan route API atau server yang mungkin tersedia.

Bagaimana cara update website React di Vercel?

Jika repository terhubung melalui Git, lakukan commit dan push perubahan ke branch yang digunakan untuk production. Vercel dapat memicu deployment baru secara otomatis.

Apakah Vercel mendukung custom domain?

Ya. Kamu dapat menambahkan domain melalui pengaturan proyek dan mengikuti instruksi DNS yang ditampilkan dashboard Vercel.

Kenapa npm run build gagal saat deploy?

Penyebabnya dapat berupa dependency bermasalah, kesalahan import, script build yang tidak tersedia, perbedaan versi Node.js, atau environment variables yang belum dikonfigurasi. Periksa build logs untuk menemukan penyebab spesifik.

Apakah environment variables React aman di Vercel?

Vercel menyediakan pengelolaan environment variables, tetapi nilai yang dimasukkan ke bundle frontend tetap dapat diakses pengguna. Jangan memasukkan secret ke variabel publik seperti yang menggunakan awalan VITE_.

Apakah website React di Vercel bisa muncul di Google?

Bisa, selama halaman dapat diakses dan memenuhi persyaratan pengindeksan. Untuk aplikasi SPA, perhatikan bagaimana konten dan metadata dirender. Gunakan Google Search Console untuk memantau status pengindeksan.

Mana yang lebih baik Vercel atau Netlify untuk React?

Keduanya mendukung deployment React. Pilihan bergantung pada kebutuhan proyek, alur kerja, fitur hosting, integrasi Git, dan ketentuan paket. Vercel menjadi pilihan praktis untuk alur deployment yang dijelaskan dalam tutorial ini.

Apakah React membutuhkan VPS untuk online?

Tidak selalu. Aplikasi React yang menghasilkan file statis dapat dihosting pada layanan seperti Vercel tanpa harus mengelola VPS. Jika aplikasi membutuhkan backend khusus, kebutuhan infrastrukturnya harus dievaluasi secara terpisah.