Tanstack Start x Hosting 20ribuan: Panduan Hosting Pakai Git

Bismillahirrohmaanirrohiim. Alhamdulillahi Robbil 'Alamiin. Allahumma Sholli 'Alaa Sayyidinaa Muhammad. 

Kita akan praktik men-deploy/meng-hosting aplikasi berbasis Tanstack Start ke shared hosting dua puluh ribuan menggunakan bantuan Git. Pada kasus kali ini, saya menggunakan GitLab.

Tanstack Start merupakan fullstack framework yang menggunakan Nitro sebagai backend. 

Nitro sendiri adalah plugin untuk Vite yang membuat aplikasi Vite kita menjadi fullstack dan dengan mudah bisa men-deploy-nya di berbagai macam platform, termasuk ke shared hosting murah.

Shared hosting yang kita gunakan adalah Hostdata.id dengan paket Developer (Rp20.000/bulan) dengan Direct Admin panel. Kita memerlukan akses terminal untuk tutorial kali ini. Jadi, ini tidak akan bisa kita lakukan di paket Starter (Rp10.000/bulan). Fitur ini tersedia minimal di paket Developer (Rp20.000/bulan).

Persiapan

Untuk itu, kita pastikan sudah melakukan beberapa hal berikut.

1. Sudah mem-push aplikasi kita ke remote repository (misal GitHub atau GitLab). Pada contoh kali ini, kita menggunakan GitLab di branch main. Kita juga tidak menggunakan database apa pun di sini agar mudah.
2. Memiliki akun Hostdata.id dan memiliki paket aktif, setidaknya paket Developer.
3. Sudah menambahkan SSH Key shared hosting ke remote repository. Untuk contoh di GitLab, bisa cek di sini.
4. Sudah membuat subdomain dengan SSL aktif serta men-Setup Node.js App di domain tersebut. Pada contoh kali ini, kita menggunakan subdomain hellotanstack.muslimaswaja.my.id dan menempatkannya di direktori app/tanstack/hello. Startup file yang kita gunakan di sini adalah server.js.

Untuk contoh konfigurasi di Setup Node.js App-nya, kita bisa menggunakan contoh seperti berikut.

Langkah-langkah 

Jika sudah, silakan ikuti langkah-langkah berikut ini.

Pertama, build project Tanstack Start Anda di local.

Untuk melakukan ini, Anda tinggal jalankan saja npm run build di terminal dalam direktori proyek Tanstack Start Anda dan tunggu prosesnya hingga selesai. 

Kedua, commit direktori .output. Ini adalah direktori hasil build proyek Tanstack Start (dan proyek berbasis Nitro lainnya).

Secara default, direktori tersebut tidak akan di-commit karena disebutkan dalam file .gitignore. Memang seharusnya seperti itu.

Namun dalam kasus kali ini, kita harus menambahkannya secara paksa. Anda bisa menggunakan perintah berikut.

git add -f .output

Kemudian commit seperti biasa. Misalnya menggunakan perintah berikut.

git commit -m "Build for production" 

Ketiga, push isi dari direktori .output ke branch production menggunakan subtree.

Kita bisa menggunakan perintah berikut untuk mem-push isi dari direktori .output ke branch production di remote repository.

git subtree push --prefix .output origin production

Dengan menggunakan subtree, kita bisa mem-push hanya isi dari direktori yang kita tentukan setelah parameter --prefix ke branch yang kita tentukan setelah git remote (origin). Dalam perintah di atas, kita hanya mem-push isi dari direktori .output saja ke branch production. 

Keempat, pull branch production di terminal shared hosting.

Pastikan Anda sudah membuka Terminal di shared hosting (sekali lagi, ini baru tersedia mulai dari paket Developer). Arahkan direktori ke application root yang telah kita tentukan saat Setup Node.js App. Misal direktorinya adalah app/tanstack/hello, kita bisa menggunakan perintah berikut.

cd app/tanstack/hello

Saat sudah masuk, kita clone isi dari branch production saja ke sini. Pada kasus kali ini, saya akan meng-clone-nya ke dalam direktori prod. Kita bisa melakukannya dengan menggunakan perintah berikut.

git clone -b production <remote-url> prod

Tentu Anda harus mengubah bagian <remote-url> dengan URL remote repository Anda masing-masing. Karena ini pakai SSH, pastikan yang Anda gunakan adalah yang formatnya git@xxx:xxx/xxx.git.

Kelima, ubah isi dari file server.js menjadi seperti berikut.

Ini dia snippet yang bisa kita copy-paste.

process.env.TEST = 'true';

import('./prod/server/index.mjs').catch(err => {
    console.error('Failed to load Nitro:', err);
});

Kita bisa melakukannya dengan menggunakan nano di terminal. Ketikkan perintah berikut, kemudian tekan enter.

nano server.js

Kemudian, ganti isinya dengan snippet kode di atas.

Setelah selesai, tekan Ctrl + X untuk keluar, tekan Y untuk mengonfirmasi dialog penyimpanan, kemudian tekan Enter untuk mengonfirmasi nama file.

Sekarang, web Tanstack Start kita seharusnya sudah bisa diakses. 

Ujicoba 

Mari kita coba akses di browser.

Anda juga bisa mencoba contoh-contoh lainnya jika mengklik menu di pojok kiri atas. Ini contoh untuk server function.

Ini contoh untuk full server side rendering.

Selamat! Aplikasi berbasis Tanstack Start Anda berhasil di-deploy.

Bonus

Saya merasa langkah-langkah di atas cukup panjang untuk deployment. Jadi, saya kasih bonus bocoran script yang bisa Anda tambahkan ke package.json agar lebih mudah.

Buka package.json di local Anda. Kemudian, tambahkan potongan kode berikut ke dalam bagian script.

"deploy": "npm run build && git add -f .output && git commit -m \"Update build\" && git subtree push --prefix .output origin production"

Mari kita langsung coba praktik gunakan saja. Kita ubah dulu bagian src/routes/index.tsx seperti ini.

 

Setelah itu, mari kita jalankan npm run deploy dan tunggu prosesnya hingga selesai.

Setelah selesai, kita bisa kembali ke terminal di shared hosting untuk melakukan pull. Jangan lupa masuk dulu ke direktori prod karena kita tadi meng-clone-nya ke direktori tersebut.

Jalankan ini dulu.

cd prod 

Kemudian ini. 

git pull origin production

Mari kita refresh halaman web kita.

Berhasil! Sekarang kita bisa melakukan deploy dengan lebih mudah. 

Penutup 

Jika Anda merasa ada bagian yang kurang jelas atau ada yang perlu ditanyakan, silakan tinggalkan pertanyaan di kolom komentar.

Semoga bermanfaat. 

Wallahul muwaafiq ilaa aqwaamith thooriq.