Membuat dan Menjalankan Proyek React di Lingkungan Lokal macOS Menggunakan ServBay

Apa Itu React?

React adalah library JavaScript open-source yang dikembangkan oleh Meta (sebelumnya Facebook) bersama komunitasnya, khusus untuk membangun user interface (UI). Dengan pendekatan berbasis komponen, React memudahkan developer membuat UI interaktif secara efisien, baik untuk single page application (SPA) yang kompleks maupun layer tampilan aplikasi web berskala besar yang mudah dikelola. Keunggulan inti React terletak pada paradigma deklaratifnya, mekanisme pembaruan virtual DOM yang efisien, serta ekosistem komunitas yang kuat.

Fitur dan Keunggulan Utama React

• Pengembangan Berbasis Komponen: Memecah UI kompleks menjadi komponen-komponen independen dan dapat digunakan ulang, meningkatkan keterkelolaan serta reusabilitas kode.
• Tampilan Deklaratif: Dengan mendeklarasikan status UI, React akan otomatis memperbarui DOM agar sesuai, sehingga logika UI menjadi lebih sederhana.
• Virtual DOM: Menyimpan representasi virtual DOM di memori dan hanya melakukan pembaruan minimal ke DOM nyata, mempercepat performa secara signifikan.
• Alur Data Satu Arah: Data mengalir dari atas ke bawah, membuat perubahan status aplikasi lebih mudah diikuti dan dipahami.
• JSX: Ekstensi sintaks JavaScript yang memungkinkan penulisan struktur mirip HTML langsung di dalam kode JavaScript, sehingga lebih mudah dibaca.
• Ekosistem yang Kuat: Didukung komunitas yang besar dan library pihak ketiga yang beragam (misalnya React Router, Redux/Zustand/MobX, Material UI, dll) untuk kebutuhan manajemen data, routing, sampai UI komponen.

Dengan React, developer dapat membangun aplikasi web modern dan berkinerja tinggi dengan lebih cepat dan efisien.

Menyiapkan Lingkungan Pengembangan dan Produksi React dengan ServBay

ServBay adalah lingkungan pengembangan web lokal yang tangguh untuk pengguna macOS, menyediakan berbagai paket perangkat lunak termasuk Node.js. Panduan ini akan menjelaskan langkah demi langkah cara memanfaatkan lingkungan Node.js dari ServBay beserta fitur Websites-nya untuk membuat, mengonfigurasi, dan menjalankan proyek React, mulai dari pengaturan reverse proxy untuk mode pengembangan hingga deployment file statis untuk produksi.

Prasyarat

Sebelum memulai, pastikan Anda telah melakukan hal-hal berikut:

1. Instalasi ServBay: ServBay sudah berhasil terpasang dan berjalan di sistem macOS Anda.
2. Instalasi Paket Node.js: Node.js telah diinstal melalui antarmuka ServBay atau perintah terminal. Anda dapat melihat panduan lengkap instalasi Node.js di dokumentasi penggunaan Node.js ServBay. ServBay akan secara otomatis mengelola versi dan environment variable Node.js.

Membuat Proyek React

Kita akan menggunakan Vite, alat build frontend modern yang menawarkan startup sangat cepat dan Hot Module Replacement (HMR) instan, sehingga pengalaman developer menjadi jauh lebih baik. Vite kini menjadi standar utama menggantikan create-react-app untuk pembuatan proyek React baru.

1. Buka Terminal dan Arahkan ke Direktori Root Website

   Jalankan aplikasi terminal Anda. ServBay secara default menggunakan /Applications/ServBay/www sebagai direktori root website. Pindah ke direktori tersebut:

   cd /Applications/ServBay/www

2. Buat Proyek React Baru dengan Vite

   Jalankan perintah berikut untuk membuat proyek bernama servbay-react-demo menggunakan scaffolding create-vite, lalu pilih template react:

   npx create-vite servbay-react-demo --template react

   • npx merupakan eksekutor paket npm yang memungkinkan Anda menjalankan alat CLI langsung dari registry npm tanpa harus menginstalnya secara global. Ini memastikan Anda selalu mendapatkan versi terbaru dari create-vite.
   • create-vite adalah alat scaffolding resmi dari Vite.
   • servbay-react-demo adalah nama folder proyek Anda yang akan dibuat.
   • --template react mengatur struktur awal proyek menggunakan template React.

   Ikuti instruksi yang muncul di layar untuk menyelesaikan proses pembuatan proyek.

3. Masuk ke Direktori Proyek dan Instal Dependency

   Setelah proyek berhasil dibuat, masuk ke folder proyek dan instal dependency dengan npm:

   cd servbay-react-demo
   npm install

   • Jika Anda lebih memilih manajer paket lain, bisa juga menggunakan yarn install atau pnpm install.

Modifikasi Konten Proyek React (Opsional)

Untuk memastikan setup Anda berhasil, kita bisa modi fikasi konten beranda proyek React yang baru saja dibuat.

1. Buka File src/App.jsx atau src/App.tsx

   Dengan code editor favorit Anda, buka file src/App.jsx (untuk template JavaScript) atau src/App.tsx (untuk template TypeScript) di direktori proyek.

2. Ubah Konten

   Temukan bagian kode yang merender konten utama, lalu ubah agar menampilkan tulisan "Hello ServBay!":

   // ... import lain ...
   import './App.css';
   
   function App() {
     // ... kode lain ...
     return (
       <>
         {/* ... elemen lain ... */}
         <h1>Hello ServBay!</h1>
         {/* ... elemen lain ... */}
       </>
     );
   }
   
   export default App;

   Simpan file tersebut.

Masuk ke Mode Pengembangan

Dalam fase pengembangan, biasanya Anda menjalankan server pengembangan lokal agar dapat memanfaatkan fitur seperti hot module replacement (HMR). ServBay dapat mengatur reverse proxy untuk meneruskan permintaan eksternal ke server pengembangan ini.

1. Jalankan Server Pengembangan di Terminal

   Di dalam direktori proyek servbay-react-demo, jalankan server pengembangan Vite dengan port custom (contoh: 8585):

   npm run dev -- --port 8585

   • npm run dev mengeksekusi script dev yang sudah didefinisikan pada file package.json, biasanya adalah server Vite.
   • -- --port 8585 meneruskan parameter port ke perintah Vite.

   Setelah server berjalan, Anda akan melihat alamat akses lokal di terminal seperti http://localhost:8585. Jangan tutup terminal, server ini harus tetap berjalan.

2. Konfigurasi Reverse Proxy Website di ServBay

   Buka antarmuka aplikasi ServBay. Navigasikan ke bagian Websites. Klik tombol tambah (+) untuk membuat konfigurasi website baru:

   • Name: ServBay React Dev (nama deskriptif)
   • Domain: servbay-react-dev.servbay.demo (domain contoh yang sesuai branding ServBay)
   • Site Type: Pilih Reverse Proxy
   • Proxy IP: 127.0.0.1 (server dev berjalan di lokal)
   • Proxy Port: 8585 (samakan dengan port server dev)

   Simpan konfigurasi. ServBay otomatis akan menerapkan perubahan dan mengatur web server internal (Caddy atau Nginx) untuk meneruskan request ke servbay-react-dev.servbay.demo menuju http://127.0.0.1:8585.

   Untuk panduan detail menambahkan website di ServBay, lihat dokumentasi manajemen website ServBay.

3. Akses Website Pengembangan

   Buka browser, kunjungi domain yang baru dikonfigurasi: https://servbay-react-dev.servbay.demo.

   • Berkat kemampuan ServBay, website pengembangan lokal Anda sudah otomatis menggunakan SSL (ditandatangani oleh ServBay User CA atau ServBay Public CA). Ini memungkinkan Anda mengaksesnya secara aman via HTTPS. Untuk detail info SSL ServBay, lihat mengamankan website Anda dengan SSL.
   • Sekarang, setiap kali Anda menyimpan perubahan kode di editor, halaman pada browser akan terupdate otomatis. Inilah fitur Hot Module Replacement (HMR) yang sedang berjalan.

Build untuk Produksi

Saat proyek sudah selesai dan siap di-deploy, Anda perlu menghasilkan versi build produksi yang telah dioptimalkan.

1. Build Versi Produksi di Terminal

   Dari direktori proyek servbay-react-demo, jalankan perintah build berikut:

   npm run build

   Perintah ini menjalankan script build pada package.json. Untuk proyek React berbasis Vite, proses ini akan melakukan kompilasi, bundling, dan optimasi kode menjadi file statis (HTML, CSS, JavaScript, dan sumber daya lain) yang hasilnya terdapat dalam folder dist. Setelah selesai, akan muncul pesan build sukses di terminal.

2. Setel Layanan File Statis di ServBay

   Folder dist berisi file statis siap publish langsung melalui web server. Dengan ServBay, Anda cukup mengatur tipe website statis yang mengarah ke folder ini.

   Buka aplikasi ServBay dan masuk ke fitur Websites. Klik tambah (+) untuk membuat konfigurasi baru:

   • Name: ServBay React Prod (nama deskriptif)
   • Domain: servbay-react.servbay.demo (domain contoh untuk produksi, dibedakan dari domain dev)
   • Site Type: Pilih Static
   • Website Root Directory: /Applications/ServBay/www/servbay-react-demo/dist (mengarah ke folder build dist Anda)

   Simpan konfigurasi. ServBay akan otomatis mengatur web server internal agar langsung menyajikan file-file statis pada direktori dist.

3. Akses Website Produksi

   Buka browser dan kunjungi domain produksi Anda: https://servbay-react.servbay.demo.

   Kini Anda akan melihat versi website hasil build/produksi yang telah dioptimalkan. Website ini juga sudah otomatis didukung SSL berkat ServBay.

Kesimpulan

Dengan mengikuti langkah-langkah di atas, Anda telah berhasil membuat proyek React di lingkungan lokal macOS menggunakan ServBay, lengkap dengan konfigurasi reverse proxy untuk mode pengembangan dan layanan file statis untuk mode produksi. ServBay memudahkan proses setup dan manajemen lingkungan pengembangan lokal, terutama dengan dukungan Node.js terintegrasi, konfigurasi website yang fleksibel (reverse proxy & layanan statis), serta SSL otomatis yang sangat membantu para developer React. Kini Anda dapat melanjutkan karya Anda—mengembangkan, menguji, dan mendistribusikan aplikasi React dengan workflow yang lebih sederhana dan aman!