ServBay

Bahasa Indonesia

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Bahasa Indonesia

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Appearance

Membuat dan Menjalankan Proyek React dengan ServBay ​

Apa Itu React? ​

React adalah library JavaScript open-source yang dikembangkan dan dikelola oleh Meta (sebelumnya Facebook) beserta komunitasnya, digunakan khusus untuk membangun antarmuka pengguna (UI). React menggunakan pendekatan berbasis komponen untuk membangun UI interaktif, memungkinkan developer merancang aplikasi satu halaman (SPA) ataupun aplikasi web skala besar secara efisien dan tetap mudah dikelola. Keunggulan utama React terletak pada paradigma deklaratif, mekanisme virtual DOM yang efisien, serta ekosistem komunitas yang sangat luas.

Fitur dan Keunggulan Utama React ​

  • Pengembangan Berbasis Komponen: Memecah UI yang kompleks menjadi komponen-komponen terpisah dan reusable, sehingga kode lebih mudah dipelihara dan digunakan kembali.
  • Tampilan Deklaratif: Deskripsikan status UI dengan cara yang sederhana, dan React akan otomatis memperbarui DOM agar sesuai, memudahkan logika pengembangan UI.
  • Virtual DOM: Membuat representasi virtual dari DOM di memori; React membandingkan perubahan dan memperbarui DOM asli seminimal mungkin, sehingga meningkatkan performa aplikasi.
  • Aliran Data Searah: Data mengalir dari atas ke bawah secara terstruktur, sehingga perubahan status aplikasi lebih mudah dilacak dan dipahami.
  • JSX: Ekstensi sintaks JavaScript yang memungkinkan penulisan markup mirip HTML langsung di dalam kode JavaScript, meningkatkan keterbacaan kode.
  • Ekosistem Kuat: Dukungan komunitas serta banyak library pihak ketiga (seperti React Router, Redux/Zustand/MobX, Material UI, dan lainnya) yang mencakup manajemen status, routing, hingga komponen UI.

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

Membangun Lingkungan Pengembangan dan Produksi React dengan ServBay ​

ServBay adalah solusi lingkungan pengembangan web lokal yang powerful, menyediakan beragam package termasuk Node.js bagi pengguna macOS dan Windows. Panduan ini akan menjelaskan secara detail cara memanfaatkan Node.js serta fitur Websites di ServBay untuk membuat, mengatur, dan menjalankan proyek React, termasuk pengaturan reverse proxy untuk mode pengembangan dan layanan situs statis untuk mode produksi.

Prasyarat ​

Sebelum memulai, pastikan Anda sudah melakukan hal berikut:

  1. Instal ServBay: ServBay sudah terpasang dan berjalan di sistem Anda.
  2. Instal Paket Node.js: Paket Node.js sudah terpasang melalui interface ServBay atau via perintah terminal. Lihat Dokumentasi instalasi Node.js di ServBay untuk langkah detailnya. ServBay akan otomatis mengelola versi Node.js dan variabel lingkungan.

Membuat Proyek React ​

Kita akan menggunakan Vite, sebuah build tool frontend modern, untuk membuat proyek React dengan cepat. Vite menawarkan proses startup yang sangat cepat dan hot module replacement (HMR) secara instan, jadi menjadi pilihan utama untuk pembuatan proyek React baru (menggantikan create-react-app yang lama).

  1. Buka Terminal dan Navigasi ke Direktori Root Website

    Buka aplikasi terminal Anda. Direktori root website yang direkomendasikan ServBay adalah:

    macOS:

    bash
    cd /Applications/ServBay/www

    Windows:

    cmd
    cd C:\ServBay\www

  2. Membuat Proyek React Baru dengan Vite

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

    bash
    npx create-vite servbay-react-demo --template react
    • npx adalah package executor dari npm yang memungkinkan Anda menjalankan tool CLI tanpa harus menginstallnya secara global, supaya selalu menggunakan versi terbaru dari create-vite.
    • create-vite adalah alat resmi dari Vite untuk scaffolding proyek.
    • servbay-react-demo adalah nama folder proyek Anda.
    • --template react menentukan template React untuk inisialisasi struktur proyek.

    Ikuti petunjuk di terminal untuk menyelesaikan pembuatan proyek.

  3. Masuk ke Direktori Proyek dan Instal Dependensi

    Masuk ke folder proyek baru, lalu install dependensi yang dibutuhkan dengan npm:

    bash
    cd servbay-react-demo
npm install
    • Bisa juga menggunakan yarn install atau pnpm install jika Anda lebih memilih package manager Yarn atau pnpm.

Modifikasi Konten Proyek React (Opsional) ​

Untuk memastikan setup sudah berjalan lancar, Anda bisa melakukan perubahan sederhana pada konten halaman utama proyek.

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

    Gunakan editor kode favorit Anda untuk membuka file src/App.jsx (jika menggunakan template JavaScript) atau src/App.tsx (jika menggunakan template TypeScript) di direktori proyek.

  2. Ubah Konten

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

    javascript
    // ... import lainnya ...
import './App.css';

function App() {
  // ... kode lain ...
  return (
    <>
      {/* ... elemen lainnya ... */}
      <h1>Hello ServBay!</h1>
      {/* ... elemen lainnya ... */}
    </>
  );
}

export default App;

    Simpan file Anda.

Mode Pengembangan ​

Selama tahap pengembangan, biasanya dijalankan server lokal yang mendukung hot module replacement (HMR) untuk memudahkan proses coding. ServBay dapat melakukan reverse proxy dari request luar ke server pengembangan ini.

  1. Menjalankan Server Pengembangan di Terminal

    Pada direktori proyek servbay-react-demo, jalankan perintah berikut untuk memulai server Vite dan menentukan port (misal: 8585):

    bash
    npm run dev -- --port 8585
    • npm run dev menjalankan script dev dari file package.json, biasanya akan menyalakan server Vite.
    • -- --port 8585 meneruskan parameter port ke perintah Vite.

    Setelah server jalan, biasanya akan muncul alamat akses lokal di terminal, contoh http://localhost:8585. Pastikan terminal tetap terbuka dan server tetap berjalan.

  2. Mengatur Reverse Proxy Website di ServBay

    Buka aplikasi ServBay. Navigasi ke fitur Websites. Klik tombol tambah untuk membuat konfigurasi website baru:

    • Nama: ServBay React Dev (nama deskriptif)
    • Domain: servbay-react-dev.servbay.demo (domain demo brand ServBay)
    • Tipe Website: Pilih Reverse Proxy
    • Proxy IP: 127.0.0.1 (server berjalan di lokal)
    • Proxy Port: 8585 (sesuai port server pengembangan yang telah dijalankan)

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

    Untuk detail langkah penambahan website di ServBay, lihat Dokumentasi Manajemen Website di ServBay.

  3. Akses Website Pengembangan Anda

    Buka browser Anda dan akses domain yang baru dikonfigurasi: https://servbay-react-dev.servbay.demo.

    • Berkat fitur ServBay, website pengembangan Anda langsung mendapatkan sertifikat SSL otomatis (ditandatangani oleh ServBay User CA atau ServBay Public CA), sehingga dapat diakses aman melalui HTTPS. Untuk info lebih lanjut tentang SSL di ServBay, lihat Mengamankan Website Anda dengan SSL.
    • Kini, setiap Anda melakukan perubahan dan menyimpan file proyek di editor, halaman di browser langsung otomatis ter-update berkat hot module replacement (HMR).

Membuat Build Produksi ​

Setelah proyek React selesai dan siap dipublikasikan, Anda perlu membuat build yang optimal untuk mode produksi.

  1. Build Produksi di Terminal

    Pada direktori proyek servbay-react-demo, jalankan perintah berikut untuk membangun versi produksi:

    bash
    npm run build

    Perintah ini akan menjalankan script build (biasanya dari Vite) yang akan meng-compile, menggabungkan, dan mengoptimalkan kode menjadi file statis (HTML, CSS, JavaScript, dan resource lainnya), hasilnya biasanya disimpan di folder dist di root proyek. Setelah selesai, akan muncul notifikasi sukses di terminal.

  2. Menyiapkan Layanan File Statis di ServBay

    Folder dist hasil build produksi berisi file statis yang siap dilayani langsung oleh web server. Di ServBay, Anda bisa mengatur website statis dengan mengarah ke folder ini.

    Buka aplikasi ServBay, masuk ke fitur Websites. Klik tambah untuk membuat konfigurasi website baru:

    • Nama: ServBay React Prod (nama deskriptif)
    • Domain: servbay-react.servbay.demo (domain demo brand ServBay, dibedakan dari domain pengembangan)
    • Tipe Website: Pilih Static
    • Root Direktori Website: Arahkan ke folder dist setelah build:
      • macOS: /Applications/ServBay/www/servbay-react-demo/dist
      • Windows: C:\ServBay\www\servbay-react-demo\dist

    Simpan konfigurasi. Web server internal ServBay akan langsung melayani file statis di folder dist.

  3. Akses Website Produksi Anda

    Buka browser dan kunjungi domain produksi yang sudah disetting: https://servbay-react.servbay.demo.

    Kini, Anda bisa melihat versi website hasil optimasi build produksi. Website tersebut juga telah otomatis dilengkapi SSL lewat ServBay.

Kesimpulan ​

Dengan mengikuti langkah-langkah di atas, Anda telah membuat proyek React di lingkungan lokal menggunakan ServBay, serta mengonfigurasi reverse proxy untuk mode pengembangan dan layanan file statis untuk mode produksi. ServBay memudahkan proses setup dan pengelolaan lingkungan pengembangan lokal di macOS dan Windows, dengan Node.js bawaan, konfigurasi website yang fleksibel (reverse proxy dan static), serta fitur SSL otomatis. Pengembang React dapat semakin mudah membangun, menguji, dan deploy aplikasi web mereka menggunakan ServBay.