Home  »  Hosting   »   Cara Install React.js di Hosting

Cara Install React.js di Hosting

Last Update:
3/5 (2)

cara install reactjs di hosting
Hi DomaiNesians! Kamu fans berat dari semua jenis javascript? Berapa jenis javascript yang udah kamu utak atik? Dari sekian banyak jenis javascript, yang perlu kamu tahu yaitu ada 2 jenis secara general. Yaitu jenis javascript yang dapat dijalankan dari sisi server dan sisi user interface. Misalnya ada Node.js yang bekerja di sisi server. Kemudian ada React.js, Angular.js, Vue.js dan masih banyak lagi yang bekerja di sisi user interface. Nah, pada panduan kali ini akan mengulik lebih dalam tentang React.js. React.js merupakan salah satu jenis javascript yang bekerja di sisi user interface. Artinya, jenis javascript ini akan membuat tampilan website kamu menjadi lebih menarik dan proses laoding data menjadi tidak berat. Kamu juga tetap bisa menggunakan CSS dan HTML juga kok. Pengen tahu lebih banyak tentang apa itu React.js, apa kelebihannya, serta bagaimana cara install React.js di Hosting ? Yuk ikuti step by stepnya.

Baca Juga: Cara Membuat Database di Hosting

Apa itu React.js?

Sebelum mengetahui cara install React.js di Hosting, pastikan kamu tahu apa itu React.js terlebih dahulu. Dikutip dari website resminya, React.js merupakan salah satu library Javascript yang berfungsi untuk membuat tampilan user interface website. Agar bisa dijalankan, React.js membutuhkan bantuan Node.js di sisi server. Belum tahu apa itu Node.js? Silahkan baca Membangun Website dengan Node.js.

Kelebihan dan Kelemahan React.js

Ada banyak kelebihan dari React.js itu sendiri. Diantaranya,
1. Memiliki komponen yang simpel dan mudah digunakan bagi pemula
2. Bisa ditambah plugin external seperti Markdown Library
3. Bersifat modular. Artinya kamu bisa membangun website dengan menggabungkan beberapa pecahan kecil menjadi satu kesatuan
4. React.js dapat digunakan untuk tampilan website dan mobile. Untuk membangun website, perlu bantuan dari Node.js. Sedangkan untuk membangun versi mobile, perlu bantuan dari React Native.
5. Menggunakan JSX yang digunakan untuk menulis HTML dalam Javascript
6. Sangat bagus jika digunakan untuk menampilkan data dengan skala besar

Tahap Persiapan

Ada beberapa hal yang perlu kamu persiapkan terlebih dahulu.
Pertama, kamu harus tahu bagaimana akses server via SSH. Hal ini sangat penting lho! Ketika melakukan instalasi, semua dilakukan via SSH melalui konsol. Nah buat kamu yang belum terbiasa, silahkan baca Cara Akses SSH Melalui Terminal atau PuTTy. Atau buat kamu yang belum tahu apa itu SSH, silahkan baca Apa itu SSH Server.
Kedua, karena proses instalasi banyak menggunakan command Linux pastikan kamu sudah familiar dengan berbagai command/perintah Linux. Buat kamu yang belum tahu, bisa baca di 10 Perintah Linux Yang Harus Kamu Tahu.
Ketiga, pastikan kamu telah menginstall Node.js di server Hosting. Hal ini mengingat React.js hanya dapat berjalan dengan bantuan Node.js di sisi server. Untuk panduannya, bisa cek di Cara Install Node.js di Hosting.
Setelah ketiga persiapan tersebut sudah dilakukan, maka kamu siap untuk menginstall React.js di Hosting :))

Cara Install React.js di Hosting

Nah, setelah tahap persiapan selesai sekarang saatnya melakukan instalasi React.js di Hosting. Hal ini bermanfaat banget buat kamu yang ingin memindahkan file website dari localhost ke hosting agar website bisa online. Adapun cara install React.js adalah sebagai berikut.

1. Menentukan Lokasi Install

Hal pertama yang harus kamu pikirkan adalah lokasi di mana React.js akan diinstal. Apakah di domain utama? Apakah di subdomain? Jika di domain utama, silahkan lakukan instalasi di dalam public_html. Jika di subdomain, silahkan lakukan instalasi React.js di dalam foldernya.
Misal:
Domain utama: websitesaya.com
Subdomain: reactjs.websitesaya.com
Untuk membuat subdomain, silahkan ikuti panduan Cara Membuat Subdomain di Hosting.

cara install react.js

2. Membuat NodeJS App

Karena React.js adalah web framework berbasis Node.js maka kamu harus membuat NodeJS App terlebih dahulu di cPanel. Silahkan login cPanel dan pilih menu Setup Nodejs App. Silahkan buat sesuai Panduan Setting NodeJS.

Cara Install Express.js

Kemudian pilih versi NodeJS yang digunakan. Kami merekomendasikan untuk menggunakan NodeJS terbaru karena sudah stabil. Pada Application mode, silahkan pilih mode Production. Pada Application root, kamu bisa buat folder untuk tempat instalasi.

Catatan: hindari penggunaan nama folder seperti react, react-dom dan react-scripts. Mengapa? Karena akan ada crash dan react js tidak dapat terinstall dengan sempurna

Pada Application URL silakan pilih domain/ subdomain dimana file instalasi react ingin dijalankan.  Setelah itu klik Create.

Tunggu sebentar hingga muncul seperti gambar. Pastikan kamu sudah menyalin/ mengcopy path yang ada di Enter to the virtual environment . Path tersebut nantinya digunakan untuk instalasi React.js. Jangan lupa untuk mengingat nama folder yang telah kamu buat ya. Pada panduan kali ini folder yang dibuat yaitu bernama react-app
Keterangan:
Perintah source /home/websites/nodevenv/react-app/10/bin/activate digunakan untuk masuk ke virtual environment
Perintah cd /home/websites/react-app digunakan untuk masuk ke folder instalasi

3. Akses SSH via Terminal atau PuTTy

Kemudian yang harus kamu lakukan yaitu mengakses server via SSH menggunakan Terminal atau Software PuTTy. Buat kamu pengguna Linux atau Mac, bisa menggunakan terminal. Buat kamu pengguna WIndows, bisa menggunakan Software PuTTy. Apabila anda belum mengetahui caranya, silahkan baca di Panduan Cara Akses SSH. Silahkan tulis perintah berikut di Terminal/ PuTTy.

Ingat, akses SSH hanya bisa dilakukan minimal Paket Hosting Super ya!

4. Install React.js dan Forever.js

Nah untuk melakukan instalasi React.js silahkan masuk ke virtual environment dengan perintah,

setelah itu silakan lakukan instalasi react.js dengan command berikut.

Tunggu sebentar hingga proses instalasi selesai. Jangan kaget ya ketika di dalam folder (lokasi install) tadi akan terisi banyak dependensi/ file- file baru. Perintah npx digunakan untuk eksekusi npm app dan membuat aplikasi reactjs.

5. Melakukan Instalasi pm2

Agar nodejs dapat berjalan secara otomatis dan prosesnya dapat dicek, maka kamu bisa gunakan pm2. Apa itu pm2? PM2 adalah sebuah package process manager dari Keymetrics yang bertujuan agar project NodeJS dapat berjalan terus menerus. Untuk lebih jelasnya, bisa baca Cara Setting NodeJS Menggunakan pm2.

Silakan tunggu hingga proses instalasi pm2 selesai ya.

6. Membuat file ecosystem.config.js

Sekarang silakan buat file ecosystem.config.js dengan perintah berikut. Kamu bisa gunakan perintah vim atau nano

Kemudian silakan copy paste kode berikut ini,

7. Build Aplikasi Untuk Production

Sekarang saatnya build aplikasi untuk production. Silakan ikuti perintah,

8. Melakukan Start Service

Sekarang saatnya melakukan start service pm2,

Untuk cek list, bisa gunakan perintah,

Untuk stop service pm2, bisa gunakan perintah,

Untuk restart service pm2, bisa gunakan perintah,

7. Setting .htaccess di Folder Web-root

Agar react js dapat berjalan, kamu harus menambahkan file htaccess di folder dimana reactjs diletakkan. Yaitu di subdomain ataupun di domain utama. Jika di domain utama, kamu bisa letakkan di folder public_html. Silakan tambahkan kode berikut ini,

Catatan:

1. Bagi kamu yang belum terbiasa menggunakan vim, silahkan copy script di atas. Kemudian tulis vim index.js. Ketika muncul layar kosong, silahkan klik kanan pilih paste. Setelah itu untuk menyimpan script, silahkan tekan “Esc” pada keyboard. Lalu tulis :wq dan enter.

2. Apabila sudah ada file .htaccess dan didalam file .htaccess sudah ada isinya, maka kode diatas silakan ditambahkan pada bagian bawah seperti gambar berikut,

Baca Juga: Cara Membuat File .htaccess di cPanel Hosting

9. Proses Instalasi React.js Berhasil!

Oke, coba sekarang buka web browser kemudian tulis sesuai nama domain kamu. Jika menggunakan subdomain, pastikan tulis juga dengan subdomainnya. Dan lihat apa yang terjadi! React.js berhasil diinstall di Hosting kamu 😀

Closing

Nah buat kamu yang suka oprek javascript khususnya React.js, panduan ini sangat bermanfaat lho! Coba bayangkan ketika di localhost website kamu lancar jaya. Tetapi ketika di Hosting, tiba-tiba website error dan bermasalah hanya karena service React.js belum jalan. Maka dari itu, ikuti panduan cara install React.js di Hosting step by step ya. Jangan ada yang terlewat! DomaiNesia support Node.js, PHP, Python dan Ruby lho! Pengen cobain Hosting Murah dengan kualitas terbaik dari DomaiNesia? Yuk order Hosting Murah DomaiNesia

Baca Juga: Cara Deploy Website Python di Hosting

Please rate this


Pindah ke DomaiNesia

Tertarik mendapatkan semua fitur layanan DomaiNesia?
Dapatkan Diskon Migrasi 25% serta GRATIS biaya migrasi & setup

Ya, migrasikan layanan saya!