# Deployment

Dalam proses pengembangan aplikasi atau web app, terdapat fase deployment di mana kita akan menyebarkan aplikasi yang sudah dibuat. Umumnya, pada tahap deployment, kita membuat dua server yaitu staging dan production.&#x20;

Staging digunakan untuk melakukan pengujian sebelum aplikasi diimplementasikan di production, yang nantinya akan digunakan oleh pengguna akhir.

Pada materi ini, kita akan melakukan deployment proyek untuk keperluan staging. Ada banyak opsi untuk membuat aplikasi dapat diakses oleh orang lain, seperti menggunakan Cloud, VPS, hosting, SaaS (Software as a Service), dan sebagainya. Kali ini, kita akan melakukan deployment ke Netlify sebagai pilihan opsi SaaS.&#x20;

### Daftar

Sebelum melakukan proses deployment, silakan akses [https://www.netlify.com/](https://www.netlify.com/). Jika belum memiliki akun, silakan daftar terlebih dahulu dengan memilih tombol Sign Up.

<figure><img src="https://2220535400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfI5wsxyjoqzXlxlbSlJa%2Fuploads%2FTLQwIBdzPgQANeBony0q%2Fimage.png?alt=media&#x26;token=a48391d5-8e17-4508-8a3d-9492bbc767b7" alt=""><figcaption></figcaption></figure>

Ada 4 pilihan Sign Up akun netlify. Silakan pilih salah satu Sign Up with Email/Github/GitLab/BitBucket.&#x20;

<figure><img src="https://2220535400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfI5wsxyjoqzXlxlbSlJa%2Fuploads%2FVzQFWAQr5wWLuk4fD809%2Fimage.png?alt=media&#x26;token=43363fc5-f1f5-487f-81a3-8cabe1d4e749" alt=""><figcaption></figcaption></figure>

Tekan tombol Authorize Netlify jika Sign Up menggunakan GitHub.

<figure><img src="https://2220535400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfI5wsxyjoqzXlxlbSlJa%2Fuploads%2FSgPhYhDuKF5bqPDldpUq%2Fimage.png?alt=media&#x26;token=d76fe984-c120-49fd-8751-ec0c26542cdd" alt=""><figcaption></figcaption></figure>

### Dashboard

Jika sudah selesai proses daftar, kemudian dilanjutkan login netlify, akan tampil halaman Dashboard sebagai berikut:

<figure><img src="https://2220535400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfI5wsxyjoqzXlxlbSlJa%2Fuploads%2FmrQ1VKaspIGHWkGWnZq4%2Fimage.png?alt=media&#x26;token=b0bcc81f-3a08-4c99-9f5e-236cbed5b78a" alt=""><figcaption></figcaption></figure>

Pada halaman Dashboard terdapat 3 pilihan cara deployment, antara lain Import an existing project, Start from a template dan Deploy manually. Kali ini kita akan coba Deploy manually.

Sebelum lanjut ke proses deploy manually, silakan jalankan perintah berikut ini pada terminal Project React

```
npm run build
```

Perintah npm di atas akan membuat satu folder dengan nama build di dalam project React

<figure><img src="https://2220535400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfI5wsxyjoqzXlxlbSlJa%2Fuploads%2F13I8KHGZb6oMtn44c98m%2Fimage.png?alt=media&#x26;token=35f46e10-c623-40e9-9d65-fae2ffc0a7b1" alt="" width="275"><figcaption></figcaption></figure>



### Deployment

Pilih Deploy manually

<figure><img src="https://2220535400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfI5wsxyjoqzXlxlbSlJa%2Fuploads%2F6eHajB99Ned7eGUE1Xuc%2Fimage.png?alt=media&#x26;token=3a2fffff-ed92-49ed-ba60-103a4f2f3768" alt=""><figcaption></figcaption></figure>

Kemudian drag and drop folder build ke dalam halaman netlify

<figure><img src="https://2220535400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfI5wsxyjoqzXlxlbSlJa%2Fuploads%2Fq1c1jxLzplti91qXcRwV%2Fimage.png?alt=media&#x26;token=61dbe062-73d4-40f8-9ac9-c06afcb8b237" alt=""><figcaption></figcaption></figure>

Jika deployment berhasil, tampil halaman Published deploy. Kemudian pilih menu Site overview.

<figure><img src="https://2220535400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfI5wsxyjoqzXlxlbSlJa%2Fuploads%2FR2oaVlz28pSwdR9yb4y1%2Fimage.png?alt=media&#x26;token=890c8a86-24c0-466c-b90d-0e691a6bd95b" alt=""><figcaption></figcaption></figure>

Pada halaman Site overview menampilkan link Project React yang dapat diakses secara publik.&#x20;

<figure><img src="https://2220535400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfI5wsxyjoqzXlxlbSlJa%2Fuploads%2FBJprWO6Q1lYZb25fx5qW%2Fimage.png?alt=media&#x26;token=4a500ce1-01fc-4744-9fe1-6a7e3317a872" alt=""><figcaption></figcaption></figure>

Selanjutnya kita coba akses link berikut ini : [https://calm-liger-fe2174.netlify.app/](https://calm-liger-fe2174.netlify.app/)

<figure><img src="https://2220535400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfI5wsxyjoqzXlxlbSlJa%2Fuploads%2F0NuCYZu0uggIrkVTXoft%2Fimage.png?alt=media&#x26;token=fe866c5c-21f5-492d-b7cc-71ed69f443c0" alt=""><figcaption><p>Halaman Home</p></figcaption></figure>

<figure><img src="https://2220535400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfI5wsxyjoqzXlxlbSlJa%2Fuploads%2FnkjubxEKYGLoORqvaRip%2Fimage.png?alt=media&#x26;token=c6abffda-a14b-4243-9d35-bd34a0d84a76" alt=""><figcaption><p>Halaman Fakultas</p></figcaption></figure>

<figure><img src="https://2220535400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfI5wsxyjoqzXlxlbSlJa%2Fuploads%2Ff2Jy30JUFBA5AhNvPCVu%2Fimage.png?alt=media&#x26;token=f1d43761-28be-47cd-888f-4bb5bc570aa1" alt=""><figcaption><p>Halaman Program Studi</p></figcaption></figure>

Demikian materi deploy project React ke Netlify.

Semoga bermanfaat :smile:
