Deploy Frontend Web Application with React to cPanel.

Tech stack: Complete CRUD NodeJs, swr, react-router-dom, react-dom, react, axios

Melanjutkan tutorial sebelumnya dimana kita sudah melakukan Deploy Backend API NodeJs to cPanel. Di tutorial ini kita akan deploy aplikasi frontendnya yang nantinya hasilnya akan di url https://todoapp.codesync.id

1. Setup Application

Aplikasi frontend nya terlebih dahulu karena pada case aplikasi frontend ini aplikasi harus di build terlebih dahulu sebelum di upload ke Hosting / cPanel.

Pada komponen tersebut memiliki fungsi untuk menambahkan tugas baru dengan mengirim permintaan ke server serta memperbarui data setelah tugas ditambahkan. Namun pada script tersebut masih berjalan pada lokal komputer http://localhost:5001 yang seharusnya ketika nantinya berjalan di server production / hosting URL diganti menjadi https://api-todoapp.codesync.id/ sehingga menjadi seperti berikut:

Pastikan URL pada semua komponen yang melakukan fetch data atau update data ke server lokal diganti menjadi URL yang sudah di setup pada hosting https://api-todoapp.codesync.id/

2. Build Aplikasi

Jika semua script code sudah disesuaikan bisa dilanjutkan dengan build aplikasinya jalankan command berikut pada terminal untuk melakukan build pada aplikasinya npm run build

command npm run build akan menghasilkan folder baru dengan nama dist yang nantinya isi folder tersebut yang akan di upload ke hosting.

3. Compress file dist hasil Build

Select isi file yang berada di dalam folder dist kemudian compress dalam bentuk .zip

4. Upload file ke cPanel > File Manager

Kali ini project aplikasi frontend akan di upload pada subdomain di folder todoapp.codesync.id pastikan path folder upload sudah sesuai dan benar.

pada gambar tersebut file telah berhasil di upload dan berada di folder atau path folder yang diinginkan kemudian bisa dilanjutkan dengan extract file .zip tersebut.

5. Done

Setelah file .zip tersebut selesai di extract hasilnya akan di ketahui dengan mengakses URL aplikasi frontend nya. https://todoapp.codesync.id/
ini adalah tampilan bahwa aplikasi frontend berjalan dengan baik data telah berhasil diambil dari API https://api-todoapp.codesync.id/

Dengan ini selesai sudah tutorial deploy aplikasi frontend dengan React library yang melakukan fetch data API publik yang sudah di setup sebelumnya.

Semoga tutorial ini bisa membantu.
Terima kasih 😊