Cara Mudah Deploy Create-React-App

Ihsan Satriawan
Jan 13, 2018 · 3 min read
Create-React-

Halo semuanya, kali ini kita akan belajar mengenai bagaimana men-deploy React app yang telah kita buat ke server sehingga teman-teman kita dapat mengakses melalui browser masing-masing. Sebenarnya banyak cara dan layanan yang dapat kita gunakan, namun pada artikel kali ini akan menggunakan:

  1. Create React App (CRA)
  2. Surge.sh
  3. Heroku

Create React App (CRA)

npm install -g create-react-appcreate-react-app <your project name>cd <your project name>
Jika sukses membuat React App menggunakan CRA

Dengan menggunakan CRA ini kita tinggal fokus dalam membangun feature dari app yang ingin kita buat. Kita bisa menggunakan yarn startsaat melakukan development di local dan menggunakan yarn builduntuk melakukan deployment. CRA pun dapat kita custom configuration-nya sesuai keinginan kita, dengan cara melalukan yarn eject, perlu diperhatikan sekali kita menggunakannya perintah ini, kita tidak dapat mengembalikannya (pada artikel selanjutnya akan saya jelaskan lebih detail mengenai config react app menggunakan yarn eject )

Tampilan Default dari CRA

Surge.sh

Static web publishing for Front-End Developers

Langkah pertama kita perlu meng-install package surge.sh secara global

npm install -g surge

langkah selanjutnya, kita perlu melakukan persiapan dari React app yang telah kita, yakni dengan yarn build . Dengan perintah tersebut, kita membuat React app kita dalam bentuk static sehingga dapat diserve oleh server surge

Sukses deploy menggunakan surge.sh

Yang perlu diperhatikan adalah, ketika diminta memasukkan path dari project kita adalah, kita perlu mengarahkan kepada folder build dari React app yang kita buat.


Heroku

Tampilan ketika kita sukses install Heroku CLI

Selanjutnya kita dapat menggunakan React app yang telah kita buat sebelumnya untuk dideploy ke Heroku dengan cara sebagai berikut:

git init# Membuat Heroku app, membutuhkan akun gratis di Heroku.com
heroku create -b https://github.com/heroku/heroku-buildpack-static.git
# Mengarahkan root dari directory kita ke folder build
echo '{ "root": "build/" }' > static.json
# Menghapus folder build dari .gitignore
sed '/build/d' .gitignore > .gitignore.new && mv .gitignore.new .gitignore
# Build, commit, deploy!
yarn build
git add .
git commit -m "Deploy to Heroku!"
git push heroku master
Gagal deploy

Jika ada yang mengalami gagal seperti yang diatas, kita perlu masuk ke dalam halaman Dashboard akun Heroku. Masuk kedalam nama apps yang kita buat dan ada di tab Deploy

Dashboard Heroku tab Deploy
Sukses Deploy ke Heroku!

Easyread

Easy read, easy understanding. A good writing is a writing that can be understood in easy ways

Ihsan Satriawan

Written by

Senior Software Engineer Mobile Web@Tokopedia | Father | Husband | Software and Data Lover

Easyread

Easyread

Easy read, easy understanding. A good writing is a writing that can be understood in easy ways

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade