Cara Install ReactJs DiCpanel 2024
Apa itu ReactJs?
ReactJS adalah sebuah pustaka JavaScript yang digunakan untuk membangun antarmuka pengguna (UI) dalam aplikasi web. Pendekatan React yang berbasis komponen memungkinkan pengembang untuk membagi UI menjadi bagian-bagian kecil yang dikelola secara terpisah.
ReactJs memiliki kelebihan dan kekurangan itu sendiri yaitu:
Kelebihan
1. Komponen Berbasis: Pendekatan berbasis komponen memudahkan pembuatan, pengujian, dan pemeliharaan kode yang bersih dan terorganisir.
2. JSX: JSX memungkinkan penulisan markup HTML dalam JavaScript, membuat kode lebih ekspresif dan mudah dipahami.
3. Ekosistem yang Kuat: React memiliki ekosistem yang kaya dengan berbagai alat, pustaka, dan sumber daya yang mendukung pengembangan aplikasi web modern.
kekurangan
1. Kinerja Komponen: Ketika aplikasi menjadi besar, penggunaan komponen React yang tidak efisien dapat mempengaruhi kinerja aplikasi.
2. Keputusan Desain: React memberi kebebasan yang besar dalam bagaimana aplikasi dibangun, yang bisa menjadi keuntungan tetapi juga bisa menghasilkan banyak pilihan desain yang membingungkan.
3. Kurva Pembelajaran: Meskipun JSX dan pendekatan berbasis komponen memudahkan pengembangan bagi banyak pengembang, masih ada kurva belajar dalam memahami konsep-konsep dasar React.
Cara instalasi ReactJs diCpanel
1. login terlebih dahulu kedalam cpanel anda
2. jika sudah login, anda cari “setup node js” dan kalian click
3. jika sudah di click kalian pencet “create application”
4. setelah itu nanti kalian akan disuruh mengisikan untuk membuat reactjs
Node.js version : versi untuk node jsnya mulai dari versi lama hingga terbaru
Application mode : ada dua pilihan yaitu devolopment dan production
Application root : untuk menuju directory folder/file anda di cpanel
Application URL : domain sebuah website anda (dikosongkan saja)
Application startup file : beerguna untuk ke tampilan website tersebut
Add variable : opsional saja
5. jika sudah kalian pencet create
6. nanti hasilnya akan seperti ini
Cara install ReactJs
1. sebelum masuk keterminal kalian wajib copy yang di coret warna biru
2. jika sudah kalian copy, lanjut dan masuk ke terminal
3. setelah itu kalian pastekan hasil copy-an tadi dan enter
4. setelah dienter kalian akan masuk ke dalam folder reactjs anda, untuk melihatnya tekan ls
5. lanjut penginstalan nya
npm install create-react-app
npm install pm2
kalian tunggu hingga selesai penginstalannya, jangan sampai eror karna bisa membuat kegagalan dalam penginstalan reactjs
6. setelah berjalan dengan normal dan tidak ada eror kalian lanjut dengan command dibawah ini
npx create-react-app nodenode : yaitu untuk membuat directory
cd nodenode : untuk masuk ke directory
7. setelah itu kalian keluar dari directory diatas dan masuk kaya nomor 3 dan ketikkan command dibawah ini
npm start : yaitu untuk berjalannya nodejs
8. lanjut untuk menunjukkan localhost nodejs dan bisa mendapatkan port yang random
npx serve -s build
9. port yang random bisa diubah dengan sesuka anda yaitu dengan command dibawah ini
npx serve -s -l 64046 build
Membuat file ecosystem.config.js
masih dengan terminal yang sama, kalian ketik command dibawah ini untuk membuat file ecosytem.config.js
vim ecosystem.config.js
jika sudah membuat filenya kalian copy dan pastekan codingan dibawah ini
module.exports = {
apps: [
{
name: “nodenode”, // ubah sesuai nama aplikasi yang dibuat
script: “npx”,
// sesuaikan port yang telah diubah
args: “serve -s -l 64046 build”,
interpreter: “none”,
watch: true,
merge_logs: true,
env: {
“NODE_ENV”: “production”,
}
}
]
}
selesai deh kalian lanjut penginstalan berikutnya
Menginstall pm2
setelah kalian mengikuti tutorial diatas, kalian lanjut penginstalan pm2.
PM2 adalah manajer proses untuk aplikasi Node.js yang memungkinkan Anda untuk menjalankan, mengelola, dan memantau aplikasi Node.js Anda. Ini sangat berguna dalam pengelolaan aplikasi yang dijalankan secara terus menerus, seperti server web, aplikasi backend, atau layanan lainnya.
Lanjut cara penginstalannya
npx pm2 start ecosystem.config.js
digunakan untuk menjalankan aplikasi atau proses menggunakan PM2 dengan konfigurasi yang didefinisikan dalam file ecosystem.config.js.
npx pm2 list
digunakan untuk menampilkan daftar semua proses yang sedang dijalankan oleh PM2
npx pm2 save
digunakan untuk menyimpan konfigurasi PM2 yang sedang berjalan ke dalam sebuah file, biasanya bernama ecosystem.config.js.
Lanjut setting file .htacces di terminal cpanel kalian
kalian lanjut setting file .htacces kalian di file manager dengan cara
1. masih sama dengan terminal yang tadi, kalian ketik command dibawah ini
vim .htaccess
Menggunakan perintah vim .htaccess akan membuka file .htaccess menggunakan editor teks Vim. Ini berguna untuk membuat, mengedit, atau melihat konfigurasi yang terkandung di dalamnya. File .htaccess digunakan untuk mengonfigurasi pengaturan khusus untuk direktori tertentu dalam server web Apache.
2. setelah itu kalian copy dan pastekan kedalam .htaccess
Options +FollowSymLinks -Indexes
IndexIgnore *
DirectoryIndex
<IfModule mod_rewrite.c>
RewriteEngine on
# gunakan port yg sesuai seperti sebelumnya
RewriteRule ^(.*)$ http://localhost:64046/$1 [P]
</IfModule>
3. Setelah itu untuk menyimpan script, silahkan tekan “Esc” pada keyboard. Lalu tulis :wq dan enter.
4. setelah itu kalian buka domain reactjs anda untuk memastikan apakah sudah berhasil atau tidak
nanti hasilnya akan seperti dibawah ini, jika seperto itu tandanya kalian sudah berhasil menginstallnya
Kesimpulan
Dengan memahami konsep-konsep dasar ini, pengembang dapat memanfaatkan ReactJS untuk membangun aplikasi web modern yang responsif, efisien, dan mudah dikembangkan.
