Hosting React App di Heroku

React App adalah framework JavaScript yang sangat populer dan digunakan oleh banyak pengembang web di seluruh dunia. Jika Anda ingin membagikan aplikasi React Anda ke publik, Anda perlu mem-hosting aplikasi Anda di server. Salah satu opsi hosting Anda adalah Heroku. Heroku adalah platform cloud yang memudahkan pengembang untuk mem-hosting aplikasi web. Artikel ini akan memberikan tutorial tentang cara hosting React App di Heroku.

Langkah Pertama: Membuat Aplikasi React

Sebelum Anda mem-hosting aplikasi React Anda di Heroku, pastikan Anda sudah membuat aplikasi React. Jika Anda belum membuatnya, Anda dapat menggunakan create-react-app. Cara membuat aplikasi React dengan create-react-app sangat mudah dan cepat.

Pertama, Anda perlu menginstal create-react-app dengan menjalankan perintah berikut di terminal:

npm install -g create-react-app

Setelah create-react-app terinstal, Anda dapat membuat aplikasi React dengan menjalankan perintah berikut:

create-react-app my-app

my-app adalah nama aplikasi Anda. Anda dapat menggantinya dengan nama yang Anda inginkan. Setelah perintah dijalankan, create-react-app akan membuat aplikasi React untuk Anda.

Langkah Kedua: Membuat Akun Heroku

Jika Anda belum memiliki akun Heroku, Anda perlu membuat akun terlebih dahulu. Membuat akun Heroku sangat mudah. Cukup kunjungi situs web Heroku dan klik tombol Sign Up. Setelah itu, Anda akan diminta untuk mengisi formulir pendaftaran dan memverifikasi email Anda.

Setelah Anda memiliki akun Heroku, Anda dapat login ke dashboard Heroku Anda.

Langkah Ketiga: Membuat Heroku App

Setelah Anda login ke dashboard Heroku Anda, klik tombol New di sebelah kanan atas dan pilih Create new app.

Anda akan diminta untuk memilih nama dan wilayah untuk aplikasi Anda. Setelah Anda memilih nama dan wilayah, klik tombol Create app.

Sekarang, Heroku akan membuat aplikasi kosong untuk Anda.

Langkah Keempat: Menghubungkan Aplikasi dengan GitHub

Untuk mem-hosting aplikasi React Anda di Heroku, Anda perlu menghubungkan aplikasi Anda dengan GitHub. Jika Anda belum memiliki akun GitHub, Anda perlu membuat akun terlebih dahulu.

Jika Anda sudah memiliki akun GitHub, buat repository GitHub baru untuk aplikasi Anda. Setelah itu, login ke dashboard Heroku Anda dan klik tab Deploy. Di sana, Anda akan melihat opsi untuk menghubungkan aplikasi Anda dengan GitHub.

Klik tombol Connect to GitHub dan ikuti instruksi untuk menghubungkan akun Heroku Anda dengan akun GitHub Anda. Setelah Anda menghubungkan akun Heroku Anda dengan akun GitHub Anda, Anda dapat memilih repository GitHub Anda untuk di-deploy ke Heroku.

Langkah Kelima: Mengkonfigurasi Heroku

Setelah Anda menghubungkan aplikasi Anda dengan GitHub, Anda perlu mengkonfigurasi Heroku agar dapat menjalankan aplikasi React Anda.

Pertama, buka file package.json aplikasi Anda dan tambahkan baris berikut:

"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"}

Selanjutnya, buka file server.js dan tambahkan baris berikut:

const express = require('express');const path = require('path');const app = express();app.use(express.static(path.join(__dirname, 'build')));app.get('*', (req, res) => {res.sendFile(path.join(__dirname, 'build', 'index.html'));});const port = process.env.PORT || 5000;app.listen(port);console.log('App is listening on port ' + port);

File server.js ini akan menjalankan server express dan mengirimkan file index.html ke browser ketika permintaan GET diterima. File index.html akan di-generate oleh perintah npm run build.

Langkah Keenam: Deploy ke Heroku

Sekarang, Anda siap untuk deploy aplikasi React Anda ke Heroku. Klik tombol Deploy di dashboard Heroku Anda dan tunggu hingga proses deploy selesai.

Setelah proses deploy selesai, Anda dapat membuka aplikasi Anda di browser dengan mengeklik tombol Open app di dashboard Heroku Anda.

Kesimpulan

Sekarang Anda tahu cara mem-hosting aplikasi React di Heroku. Dengan mengetahui cara ini, Anda dapat membagikan aplikasi React Anda ke publik dengan mudah. Jangan lupa untuk selalu update aplikasi Anda dan mengikuti perkembangan teknologi terbaru agar aplikasi Anda tetap up-to-date dan dapat bersaing di pasar yang semakin ketat.