Pertemuan 13: Finalisasi dan Deployment

PWA adalah singkatan dari Progressive Web Apps. Yaitu sebuah aplikasi atau website yang dibangun dengan melakukan optimasi sehingga menjadi layaknya aplikasi yang di install di Mobile, Desktop dan Tablet.

Dengan PWA, maka kita tidak perlu membuat aplikasi multiplaform yang terpisah-pisah. Karena PWA bisa diinstall layaknya aplikasi pada umumnya (berbasis browser). Beberpa contoh situs besar yang menggunakan PWA seperti Twitter, OLX dan masih banyak lagi.

PWA merupakan aplikasi hybrid yang terinspirasi dari kemudahan penggunaan browser di berbagai platform dan kenyamanan menggunakan aplikasi mobile di ponsel atau tablet.

Lalu, apakah perbedaan ketiganya? Berikut ini karakteristik yang dimiliki oleh masing-masing aplikasi:

Web App

• Dibuat dengan mengandalkan browser dan cross platform
• Update berjalan otomatis
• Hanya berjalan dalam kondisi online
• Fitur terbatas
• Biaya development murah

Aplikasi Mobile

• Dibuat untuk platform tertentu menggunakan bahasa khusus, seperti Swift untuk iOS dan Java untuk Android
• Update harus dilakukan manual
• Bisa berjalan dalam kondisi offline
• Fitur lengkap yang menjamin kenyamanan pengguna
• Biaya development cenderung mahal

PWA

• Dibuat mengandalkan browser dan cross platform
• Update berjalan otomatis
• Bisa berjalan dalam kondisi offline
• Menghadirkan UX yang lebih intuitif dari web app
• Biaya development murah

Sebuah web bisa dikatakan sebagai PWA jika telah mengusung karakteristik - karakteristik dibawah ini:

1. Progressive: Bekerja dengan baik di semua pengguna karena peningkatan progresif pada web / aplikasi.
2. Responsive: Bisa dijalankan di berbagai device (Desktop, mobile, dan tablet).
3. App-like: Menggunakan PWA terasa seperti menggunakan app native, contohnya pada twitter.
4. Connectivity Independent: Mampu berjalan di kondisi offline atau internet lambat.
5. Up-to-date: Dengan bantuan dari service worker, app PWA akan selalu terudpate. Jika pada native app, anda harus download dulu melalui app store.
6. Aman: Karena PWA hanya bisa berjalan sempurna di HTTPS, maka sekuritas akan selalu terjaga.
7. Discoverable: PWA bisa diidentifikasi sebagai Application karena adanya web manifest dan service worker, sehingga memungkinkan google untuk mengenalinya.
8. Installable: Dapat diinstall seperti native app, tetapi tanpa memakan ruang / space memory yang besar
9. Easy to share: Pengen share aplikasi? Ga perlu repot repot upload ke app store (seperti native app), tinggal copas urlnya saja :D

Fitur PWA

Fast

Respon yang didapat oleh pengguna sangat cepat, dengan adanya animasi yang halus dan pemuatan halaman yang cepat mampu memberikan pengalaman yang lebih baik di sisi user.

Integrated

Pengguna tidak perlu repot repot membuka browser untuk mulai menggunakan aplikasi, tinggal buka icon yang tersedia di Homescreen (fitur Add to Homescreen) maka aplikasi akan langsung terbuka. Sama seperti native bukan? Bedanya ini web app. Selain itu PWA memanfaatkan kemampuan dari perangkat untuk menciptakan pengalaman yang nyata.

Reliable

Memuat halaman dengan instan, kalian ga bakal nemuin lagi tuh halaman Downsaur ketika berada dalam keadaan offline / jaringan yang lagi ga stabil.

Engaging

Nah karena aplikasi / web yang mengusung konsep PWA ini membuat para pengguna merasa nyaman dengan pengalaman - pengalaman yang keren, maka secara ga langsung akan membuat mereka kembali lagi menggunakan / mengunjungi halaman Anda.

---

SUMBER :

1. https://www.niagahoster.co.id/blog/progressive-web-app/
2. https://nusendra.com/post/manfaat-menggunakan-pwa/

Setelah mengetahui apa itu PWA dan manfaatnya, maka sekarang kita akan lanjutkan belajar untuk mengimplementasikannya di dalam project yang sedang kita kembangkan menggunakan React.js.

Langkah 1 - Download Icons

Karena PWA membutuhkan beberapa icons, maka silahkan download icons dari link berikut ini https://drive.google.com/file/d/1sh9EDMcascdOUoZ0ARcmfOfGRvCUGu2w/view?usp=sharing, kemudian extract dan kita akan mendapatkan 1 folder yang bernama icons dengan isi beberapa gambar.

Silahkan copy folder icons tersebut dan paste di dalam folder public yang ada di project React.js, kurang lebih seperti berikut ini :

Langkah 2 - Konfigurasi file manifest.json

Sekarang kita lanjutkan untuk melakukan konfigurasi file yang bernama manifest.json yang berada di dalam folder public. File ini yang digunakan untuk konfigurasi dari PWA.

Silahkan buka file tersebut dan ubah semua kode-nya menjadi seperti berikut ini :

{
  "name": "Travel GIS",
  "short_name": "Travel GIS",
  "description": "Website Wisata Berbasis GIS (Geographic Information System)",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [
    {
      "src": "icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ]
}

Dari perubahan kode di atas, kita memberikan informasi mulai dari nama, deskripsi dan icon untuk PWA.

Langkah 3 - Konfigurasi Offline Mode

Sekarang kita lanjutkan untuk membuat 1 file HTML yang nanti kita tampilkan saat jaringan sedang offline. Dengan tujuan saat aplikasi dibuka tidak menampilkan gambar dinosaurus lagi :D.

Silahkan buat file baru dengan nama offline.html di dalam folder public, kemudian isi file tersebut dengan kode berikut ini :

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>You are Offline</title>
        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
        <style type="text/css">
            html {
                height: 100%;
            }
            body {
                height: 100%;
                margin: 0;
                background: #BCCAD8;
                display: flex;
                align-items: center;
                text-align: center;
                justify-content: center;
            }
        
            .container {
                align-items: center;
                width: 30%;
                display: flex;
                justify-content: center;
                flex-direction: column;
                padding: 40px 8%;
                border-radius: 20px;
                background: #fff;
            }

            .title {
                font-size: 1.5rem;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h2 class="title">
                <span class="">Please go online to check the website <strong>Travel GIS</strong>.</span>
            </h2>
        </div>
    </body>
</html>

Dari penambahan kode di atas, kita memberikan pesan saat jaringan sedang offline dengan kata Please go online to check the website Travel GIS.

Langkah 4 - Konfigurasi Service Worker

Silahkan buat file baru dengan nama worker.js di dalam folder public, dan masukkan kode berikut ini di dalamnya.

const CACHE_NAME = "version-1";
const urlsToCache = [ 'index.html', 'offline.html' ];

const self = this;

// Install SW
self.addEventListener('install', (event) => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then((cache) => {
                console.log('Opened cache');

                return cache.addAll(urlsToCache);
            })
    )
});

// Listen for requests
self.addEventListener('fetch', (event) => {
    event.respondWith(
        caches.match(event.request)
            .then(() => {
                return fetch(event.request) 
                    .catch(() => caches.match('offline.html'))
            })
    )
});

// Activate the SW
self.addEventListener('activate', (event) => {
    const cacheWhitelist = [];
    cacheWhitelist.push(CACHE_NAME);

    event.waitUntil(
        caches.keys().then((cacheNames) => Promise.all(
            cacheNames.map((cacheName) => {
                if(!cacheWhitelist.includes(cacheName)) {
                    return caches.delete(cacheName);
                }
            })
        ))
            
    )
});

Di atas, kita menambahkan 3 event untuk service worker, yaitu untuk proses install, fetch dan activated.

Untuk proses install, biasanya di URL browser akan muncul sebuah icon yang digunakan untuk melakukan installasi aplikasi.

Sedangkan fetch digunakan untuk melakukan fetching data ke aplikasi, dan jika gagal artinya jaringan sedang offline, maka akan memanggil file yang bernama offline.html. Dan yang terakhir yaitu activate, digunakan untuk mengaktifkan service worker untuk PWA.

Langkah 5 - Register Service Worker

Terakhir, kita akan memanggil file worker.js di dalam file index.html, dimana agar service worker dapat dijalankan saat aplikasi diakses.

Silahkan buka file index.html, kemudian ubah kode-nya menjadi seperti berikut ini :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  </head>
  <body>
    <div id="root"></div>
    <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register('worker.js').then(function(registration) {
            console.log('Worker registration successful', registration.scope);
          }, function(err) {
            console.log('Worker registration failed', err);
          }).catch(function(err) {
            console.log(err);
          });
        });
      } else {
        console.log('Service Worker is not supported by browser.');
      }
    </script>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Di atas, kita menambahkan sebuah event untuk memanggil file worker.js saat halaman di load.

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('worker.js').then(function(registration) {
            console.log('Worker registration successful', registration.scope);
        }, function(err) {
            console.log('Worker registration failed', err);
        }).catch(function(err) {
            console.log(err);
        });
    });
} else {
    console.log('Service Worker is not supported by browser.');
}

Langkah 6 - Uji Coba PWA

Untuk mencoba PWA, kita harus melakukan build terlebih dahulu ke tahap production. Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam folder project React.js.

npm run build

Jika perintah di atas, berhasil dijalankan, maka kita akan mendapatkan 1 folder baru dengan nama dist dan di dalam folder dist tersebutlah aplikasi kita berada di dalam mode production.

Dan isi di dalam folder dist yang nanti diupload ke dalam hosting (jika menggunakan provider hosting/cPanel).

Untuk mencoba menjalankan mode production, silahkan jalankan perintah berikut ini di dalam terminal/CMD :

serve -s dist

Perintah di atas, digunakan untuk melakukan serve ke dalam folder dist dan jika berhasil maka aplikasi kita akan dijalankan di dalam localhost dengan port 3000.

Silahkan buka di dalam web browser dengan mengetikkan http://localhost:3000, jika berhasil maka kita akan mendapatkan hasil seperti berikut ini :

Jika kita perhatikan di URL, maka akan muncul icon untuk melakukan installasi aplikasi kita ke dalam komputer. Jika dibuka menggunakan HP juga akan muncul icon tersebut dan bisa kita install di dalam HP.

Silahkan klik Install, maka secara otomatis aplikasi akan terinsntall di dalam komputer layaknya aplikasi Desktop dan jika diinstall dii HP, maka layaknya seperti aplikasi HP.

Setelah menyelesaikan semua materi di dalam ebook, baik dari sisi backend (Laravel) dan frontend (React.js), maka sekarang kita akan lanjutkan lagi belajar bagaimana cara melakukan deployment atau proses meng-onlinekan project yang sudah kita buat agar dapat diakses secara global di internet.

Disini saya akan berikan rekomendasi Hosting atau cPanel yang sudah support Laravel dan akan mendapatkan potongan harga dengan memasukkan kode kupon. Dan untuk fitur-fitur dari cPanel yang direkomendasikan ini kurang lebih seperti berikut :

• Git
• SSH
• Composer
• Terminal
• Dan lain-lain.
• Gratis SSL (https://)

Kupon Diskon Hosting di RiauCyberSoluion.net

---

👉 Link pembelian Hosting : https://riaucybersolution.net/cart.php?gid=58

👉 Kupon/Voucher : SantriKodingFullstack

---

❗️ CATATAN : Minimal pembelian Hosting 3 bulan

Disini saya akan menggunakan domain https://appdev.my.id dan untuk Laravel atau backend-nya nanti akan kita letakkan di dalam subdomain, katakanlah di subdomain berikut ini https://backend-travel.appdev.my.id. Untuk nama subdomain ini sifatnya bebas dan silahkan disesuaikan dengan keinginan masing-masing.

Langkah 1 - Membuat Subdomain

Sampai disini saya kira teman-teman semuanya sudah mempunyai domain dan hosting untuk proses pembelajaran, pertama kita akan belajar bagaimana membuat subdomain baru di dalam cPanel.

Silahkan buka cPanel dengan mengetikan http://namadomain.com/cpanel, jika berhasil maka akan muncul halaman login dari cPanel kurang lebih seperti berikut ini :

CATATAN! : silahkan ganti namadomain.com sesuai dengan domain yang teman-teman miliki.

Jika berhasil melakukan otentikasi, maka akan masuk ke dalam halaman dashboard dari cPanel, kurang lebih seperti berikut ini :

Setelah itu, silahkan klik menu Subdomains dan jika berhasil akan membuka halaman seperti berikut ini :

Sekarang, kita akan membuat subdomain baru yang nantinya akan kita gunakan untuk menaruh project Laravel. Silahkan buat subdomain sesuai dengan keinginan masing-masing. Dalam contoh kali ini saya membuat seperti berikut ini :

Di atas saya berikan contoh untuk nama subdomain-nya adalah backend-travel dan untuk domain yang digunakan adalah appdev.my.id. Maka nanti hasilnya seperti berikut ini : https://backend-travel.appdev.my.id.

Langkah 2 - Export Database di Localhost

Sekarang kita akan melakukan export database yang ada di lokal komputer kita. Silahkan buka http://localhost/phpmyadmin, kemudian pilih database yang akan di export.

Langkah 3 - Buat dan Import Database di cPanel

Setelah di lokal database kita berhasil di export, sekarang kita lanjutkan untuk import database kita di cPanel. Silahkan klik menu MySQL Database, seperti pada gambar di bawah ini :

Silahkan buat nama database terlebih dahulu, di atas saya contohkan untuk nama database-nya adalah appdev_travel, setelah itu klik create database.

Setelah database sudah berhasil terbuat, sekarang kita lanjutkan untuk membuat user dan password untuk database kita. Masih di menu yang sama di MySQL Database, akan tetapi kita secroll kebawah dan kita akan temukan inputan untuk membuat user dan password, kurang lebih seperti ini :

Di atas saya membuat user-nya sama dengan nama travel, dan ini sesuai keinginan kita, dengan syarat nanti harus bisa mengingatnya ya.

Kemudian untuk password silahkan diisi dengan password yang kita inginkan. Setelah itu klik create user dan tunggu prosesnya sampai selesai.

Kemudian sekarang kita lanjutkan untuk assign untuk user dan database. masih di menu yang sama, silahkan scroll kebawah dan kurang lebih seperti ini :

Di atas silahkan pilih user dan database yang sudah kita buat sebelumnya, maka kurang lebih hasilnya seperti di atas. Kemudian klik add. Kemudian akan muncul Manage User Privileges, Silahkan centang semua dan klik Make Changes.

Sekarang kita lanjutkan untuk proses import database kita di cPanel, silahkan kembali ke halaman awal cPanel, kemudian masuk ke menu phpmyadmin. Kurang lebih seperti berikut ini :

Tunggu beberapa saat, kita akan di arahkan ke halaman phpmyadmin milik cPanel dan kita bisa lakukan proses import database yang sudah kita export sebelumnya.

Langkah 4 - Upload Project Laravel

Setelah kita berhasil import database di cPanel, sekarang kita lanjutkan untuk upload project website-nya, langsung saja kita mulai. Silahkan klik kanan pada project Laravel dan compress menjadi format .zip, kurang lebih seperti berikut ini :

Setelah project sudah berhasil menjadi zip file, sekarang kita kembali ke halaman cPanel dan klik menu File Manager, kurang lebih seperti berikut ini tampilannya.

Di atas, silahkan upload project dengan format zip. Jika sudah berhasil terupload, kurang lebih seperti berikut ini :

Langkah 5 - Konfigurasi Project Laravel di cPanel

Setelah file project dengan format zip sudah terupload, sekarang kita akan lakukan konfigurasinya. Langsung saja kita mulai. Silahkan extract file zip-nya kurang lebih seperti beriku ini :

Di atas kita akan extract projectnya dengan nama backend-travel kemudian silahkan tunggu proses extracting sampai selesai.

Kemudian klik reload di filemanager, maka kita sudah mendapatkan sebuah folder dengan nama backend-travel kemudian buka folder tersebut maka kita akan mendapatkan folder lagi dengan nama laravel-travel. Kemudian masuk ke folder tersebut dan itulah project kita, hasilnya seperti berikut ini :

Kemudian kita lanjutkan untuk menampilkan hidden file, secara default cPanel meng-hidden file dengan awalan dot (.) oleh karena itu file .htaccess, .env, dan lain-lain semua di hidden.

Untuk menampilkannya kita bisa seperti berikut ini :

Setelah itu, disini kita akan melakukan move data 2 kali, silahkan masuk ke folder backend-travel/laravel-travel/public kemudian select all file dan folder kemudian pilih move. Kurang lebih seperti berikut ini :

Di atas kita move ke dalam folder /backend-travel.appdev.my.id. Folder tersebut merupakan folder dimana subdomain kita berada.

Setelah itu kita juga akan move lagi semua file yang ada di dalam folder laravel-travel ke dalam folder backend-travel. Yaitu mengeluarkan satu tingkat.

Sekarang, kita lanjutkan untuk merubah beberapa kode di dalam file index.php di folder backend-travel.appdev.my.id, silahkan masuk ke backend-travel.appdev.my.id kemudian pilih file index.php klik kanan dan klik edit. Kurang lebih seperti berikut ini :

Ubah di bagian autoload.php menjadi seperti berikut ini :

require __DIR__.'/../backend-travel/vendor/autoload.php’;

Kemudian ubah juga bagian app.php menjadi seperti beirkut ini :

$app = require_once __DIR__.'/../backend-travel/bootstrap/app.php’;

Kemudian kita juga akan merubah beberapa kode lagi untuk App Service Providers, silahkan ikuti gambar di bawah ini :

Dari gambar di atas, pada bagian function boot, silahkan tambahkan kode berikut ini :

$this->app->bind('path.public', function() {
    return base_path().'/../backend-travel.appdev.my.id';
});

Jadi di atas kita set untuk base path dari project kita adalah folder backend-travel.appdev.my.id.

Setelah itu kita akan lanjutkan untuk konfigurasi file .env untuk mengatur koneksi database kita, silahkan buka file .env di dalam folder backend-travel. Kemudian klik kanan dan edit.

Langkah 6 - Menjalankan Storage:link Laravel

Sebelum kita menjalankan storage:link atau symlink, kita harus hapus symlink yang lama bawaan dari localhost terlebih dahulu. Silahkan masuk ke folder backend-travel.appdev.my.idl. kemudian klik kanan pada folder storage dan delete.

Sekarang kita lanjutkan untuk menjalankan php artisan storage:link di cPanel, silahkan buka menu terminal di halaman utama cPanel, kurang lebih seperti berikut ini :

Sebelum menjalankan perintah berikut ini, silahkan perhatikan gambar di atas, silahkan ganti appdev dengan username cPanel kalian dan ganti backend-travel.appdev.my.id dengan subdomain atau domain kalain. Setelah itu jalankan perintah berikut ini di dalam terminal :

ln -s /home/username_cpanel/backend-travel/storage/app/public /home/username_cpanel/subdomain_kalian.com/storage

Langkah 7 - Mencoba Project

Sekarang jika kita coba jalankan project admin dari travel onlin-nya, dalam studi kasus kali ini saya menggunakan nama domain https://backend-travel.appdev.my.id/ dan kurang lebih hasilnya seperti berikut ini :

Terus kita coba akses salah satu Rest API-nya di link berikut ini https://backend-travel.appdev.my.id/api/web/places, jika berhasil maka kurang lebih hasilnya seperti berikut ini :

Pada tahap kali ini kita semua akan belajar bagaimana cara melakukan deployment project React.js di dalam Netlify. Jadi apa itu Netlify ?

Netlify merupakan salah satu layanan build tools yang memiliki fitur CI/CD atau Continue Integration dan Continue Development. Dengan Netlify kita dapat men-deploy website static dengan Git host yang sudah terkenal seperti Github, GitLab dan Bitbucket.

Konsepnya nanti, kita akan membuat repository di salah satu Git host di atas, dalam praktek ini yang akan kita gunakan adalah GitHub dan kita akan menggunakan jenis repository private agar source codenya tidak bisa dilihat oleh orang lain.

Setelah source code berhasil di push atau upload ke GitHub selanjutnya kita akan sambungkan dengan Netlify untuk proses deployment secara otomatis. Ketika kita merubah source code dan kita push ulang di GitHub maka Netlify juga akan melakukan CI/CD dari perubahan yang dilakukan di dalam repository.

Langkah 1 - Menambahkan File Redirect

Sekarang kita akan menambahkan file _redirects di dalam project React.js terlebih dahulu, karenan berbasis SPA maka kita akan melakukan reserve semua URL ke dalam file index.html.

Silahkan buat file baru dengan nama _redirects di dalam folder public React.js. Dan kemudian masukkan kode berikut ini :

/* /index.html 200.

Langkah 2 - Membuat Repository di GitHub

Silahkan register atau login di situs resmi GitHub yaitu : https://github.com kemudian silahkan buat repository baru https://github.com/new dengan jenis private, seperti gambar berikut ini :

Dari konfigurasi di atas, silahkan disesuaikan sendiri untuk nama dan deskripsi dari project React.js kita di GitHub. Setelah berhasil membuat repository langkah selanjutnya kita akan upload project React.js di GitHub.

Langkah 3 - Ubah Endpoint API

Sebelum upload/push project React.js ke GitHub, disini kita akan lakukan perubahan endpoint di dalam global API di dalam React.js. Silahkan buka file di dalam project React.js yaitu .env dan kemudian ubah bagian ini :

VITE_APP_BASEURL=http://localhost:8000

Ubah menjadi seperti berikut ini :

VITE_APP_BASEURL=https://backend-travel.appdev.my.id

Di atas, kita ubah endpoint dari localhost ke dalam nama domain yang kita gunakan untuk deploy project Laravel sebelumnya. Jadi silahkan disesuaikan dengan nama domain masing-masing.

Langkah 4 - Upload Project ke GitHub

Sekarang kita lanjutkan untuk melakukan upload atau push project kita ke GitHub. Silahkan ikuti dan jalankan perintah berikut ini di dalam project React.js.

git init

Perintah di atas digunakan untuk menginisialisasi git di dalam project kita.

git add .

Perintah di atas digunakan untuk menambahkan semua file dan folder ke dalam git.

git commit -m "initial commit"

Perintah di atas digunakan untuk memberikan komentar dari file-file dan folder yang kita tambahkan di atas, kita bisa mengganti kata initial commit dengan sesuai keinginan.

git remote add origin https://github.com/maulayyacyber/react-travel-gis.git

Perintah di atas digunakan untuk menambahkan alamat origin dengan repository yang sudah kita buat. Di atas contohnya untuk alamat repository saya adalah https://github.com/maulayyacyber/react-travel-gis.git, maka silahkan disesuaikan dengan alamat dari repository masing-masing.

git push origin master

Perintah di atas digunakan untuk melakukan push/upload semua file project ke dalam repository GitHub. Silahkan tunggu proses uploadnya sampai selesai.

Jika semua file project sudah terupload, maka hasilnya kurang lebih seperti berikut ini :

Langkah 5 - Deployment Dengan Netlify

Sekarang kita lanjutkan untuk proses deployment di Netlify, silahkan buka situs resi Netlify di https://netlify.com kurang lebih seperti berikut ini :

Silahkan Login atau Sign up di Netlify, disini kita bisa dengan mudah Sign up menggunakan akun dari GitHub, kurang lebih seperti berikut ini :

Setelah berhasil Sign up, sekarang kita bisa lanjutkan untuk proses deployent, silahkan klik tabs Sites kemudian klik New site from Git.

Kemudian silahkan pilih Git host yang akan kita gunakan, disini kita gunakan GitHub.

Sekanjutnya kita akan membuat perintah untuk melakukan deployment project React.js di dalam Netlify, silahkan ikuti langkah-langkahnya dari gambar berikut ini :

Kemudian proses deployment sudah berjalan dan kita tinggal menggu saja disini, dan nanti otomatis kita akan mendapatkan alamat domain secara random dari Netlify. Tapi jangan kawatir kita juga bisa meng-custom domain tersebut.

Setelah berhasil , untuk contoh disini saya mendapatkan alamat domain https://elastic-benz-7b89aa.netlify.app/, kurang lebih tampilannya seperti berikut ini :

Untuk yang ingin custom domain dengan domain pribadi bisa klik di domain setting dan silahkan disesuaikan langkah-langkahnya dari Netlify.

Disini saya custom domain akan tetapi masih menggunakan subdomain dari Netlify, yaitu : https://react-travel-gis.netlify.app/. Teman-teman bisa custom nama domain apapun, misalnya dengan .com, .net, .xyz dan lain-lain.