Nauval

Deploy Aplikasi React ke cPanel

Nauval Shidqi's photo
Nauval Shidqi
·

2 min read

Masalah

Apakah bisa deploy aplikasi react ke cpanel? dan ternyata bisa banget, caranya mudah sekali. Saya harap ini berguna untuk teman-teman yang ingin deploy aplikasi react ke cpanel.

How To

  • Beli domain dan hosting
    Pastikan kamu sudah punya domain dan hosting cpanel ya, kalau belum ya silahkan beli dulu cari di google banyak yang murah kok.

  • Tambahkan “homepage” di file package.json
    Buka file package.json lalu tambahkan property “homepage”, kurang lebih akan seperti ini:

"name": "nama_aplikasi",
"homepage": "http://namadomain.id",
"version": "0.1.0",
"private": true,

  • Build file
    Jalankan perintah npm run start & npm run build atau yarn install & yarn build, nanti akan muncul folder baru bernama build.

  • Koneksikan ke Cpanel
    Login ke cpanel, lalu buka file manager. Navigasikan ke folder public_html.

Bonus: Deploying react to sub directory
Perlu diketahui kalau kamu ingin menggunakan sub path, misal http://namadomain.id/tokoonline maka pada direktori public_html buat folder baru bernama tokoonline, yang mana folder tokoonline ini akan menjadi root directory dari aplikasi react yang akan kita deploy. Lalu pada file package.json tambahkan "homepage": "http://namadomain.id/tokoonline". Dan pada route aplikasi react tambahkan base path /tokoonline.

Misalnya:

<Router basename="/tokoonline">
  <Header />
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="*" component={P404} />
  </Switch>
</Router>
  • Upload file ke cpanel
    Upload semua file yang ada pada folder build di aplikasi react local ke folder public_html di cpanel.

Isi file build kurang lebih seperti ini:

|-- _redirects
|-- asset-manifest.json
|-- favicon.ico        
|-- images  
|-- index.html
|-- logo192.png
|-- logo512.png
|-- manifest.json
|-- precache-manifest.f2ecb03c4924ef17df3d96a875f645a5.js
|-- robots.txt
|-- service-worker.js
`-- static
  • Buat file .htaccess
    Buat file .htaccess isi dengan kode berikut
<IfModule mod_rewrite.c>
  Options -MultiViews
  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule ^ index.html [QSA,L]
</IfModule>

Jangan lupa upload juga file .htaccess ke hosting dengan direktori yang sama.

Penutup

Sampai sini seharusnya sudah semua langkah-langkah deploy react application ke cpanel. Bagaimana cukup mudah bukan? jika ada yang bingung bisa diskusi di kolom komentar.

React