
## Pendahuluan

Pernah ngga sih kalian ngalamin kehilangan konfigurasi terminal atau aplikasi favorit setelah install ulang?
Gw pernah, dan itu ngga enak banget! Harus setting ulang satu-satu, browsing ulang lagi cara settingnnya gimana.
Kadang malah ilang aja udah tanpa jejak, hadehhhh~

Sampai pada akhirnya gw ketemu [GNU Stow](https://www.gnu.org/software/stow/)! Dan mulai saat itu gw udah ngga takut lagi kehilangan dotfiles gw 😎.
GNU Stow bantu gw untuk manage semua dotfiles gw dengan rapih dan mudah di berbagai perangkat. Yuk gw bahas gimana cara pakainya!

## Apa itu GNU Stow?

Berdasarkan sumbernya [GNU Stow](https://www.gnu.org/software/stow/) adalah tools berbasis **symlink** yang
digunakan untuk mengelola file config berupa dotfiles, terletak di direktori berbeda dalam satu folder terpusat
dan seperti menginstall di tempat yang sama menggunakan metode **symlink**. Sebagai contoh, directory `/Users/ihsan/.config/`
bisa bersumber dari `/Users/ihsan/dotfiles` dan `/Users/ihsan/documents/dotfiles`, dan bisa secara recursive untuk sub directory didalamnya secara otomatis.

Banyak keuntungan yang bisa diambil dari GNU Stow, salah satunya:

- **Mudah digunakan**: Cukup satu perintah untuk mengelola dotfiles.
- **Bersih & terorganisir**: Nggak ada lagi copy-paste manual.
- **Portabel**: Bisa digunakan di berbagai perangkat dengan cepat.

### Apa itu Dotfiles?

Dotfiles adalah file konfigurasi yang biasa digunakan oleh berbagai aplikasi atau sistem operasi seperti Linux untuk menyimpan preferensi pengguna.
Nama `dotfiles` sendiri berasal dari sebuah fakta bahwa file ini biasanya diawali dengan titik (`.`) yang membuatnya tersembunyi secara default
di sistem berbasis UNIX/LINUX.

Contoh dotfiles yang umum digunakan:

- `.bashrc` atau `.zshrc` untuk konfigurasi shell
- `.vimrc` atau `.config/nvim/init.vim` untuk konfigurasi editor Vim/Neovim
- `.tmux.conf` untuk konfigurasi Tmux
- `.gitconfig` untuk pengaturan Git

### Apa itu Symlink?

Sekarang mari kita bahas symlink. **Symlink** adalah file khusus yang bertindak sebagai shortcut atau referensi ke file atau folder lain.
Dengan symlink, kita bisa membuat file atau folder di satu lokasi tapi tetap bisa diakses dari lokasi lain seolah-olah berada di sana secara fisik.

Misalnya, jika kita punya file `config.txt` di `/home/user/dotfiles/config.txt`, kita bisa membuat symlink di `~/.config/config.txt` yang merujuk ke file asli dengan perintah berikut:

```bash
ln -s /home/user/dotfiles/config.txt ~/.config/config.txt
```

Dengan cara ini, saat kita mengedit `~/.config/config.txt`, sebenarnya kita mengedit file asli di `/home/user/dotfiles/config.txt`.
Kalo kalian biasa menggunakan `nginx` kalian akan sadar kalau config pada `/etc/nginx/sites-enabled` itu symlink dengan `/etc/nginx/sites-available`.

<MdxImage
  alt='Example description'
  src='/images/blog/stow/symlink-nginx.png'
  width={600}
  height={300}
  useSkeleton
/>

## Struktur direktori dotfiles

Sebelum menggunakan Stow ada yang perlu kita lakukan terlebih dahulu, yaitu membuat struktur direktori dengan baik.

Pertama membuat direktori untuk menyimpan dotfiles yang ingin kita manage. Untuk lokasi, kalian bebas meletakannya dimana saja.
Sebagai contoh gw meletakannya di home (`~`) direktori.

```bash title="~"
mkdir dotfiles
```

Kemudian susun struktur yang kita butuhkan. Sebagai contoh saya ingin menyimpan dotfile untuk `nvim`, konfigurasi shell `zsh`, dan juga setup teminal `ghostty`.

```plaintext
~/dotfiles/
  ├── nvim/
  │   ├── .config/nvim/
  │   │   ├── init.lua
  │   │   ├── plugin/
  ├── starship/
  │   ├── .config/starship.toml
  ├── ghostty/
  │   ├── .config/ghostty/config
  ├── zsh/
  │   ├── .zshrc
```

Setiap subfolder berisi konfigurasi aplikasi yang bersangkutan. Struktur ini memudahkan kita untuk mengelola setiap konfigurasi secara modular.

## Cara install GNU Stow

GNU Stow bisa kita install pada berbagai sistem operasi. Berikut caranya:

- **Ubuntu/Debian**:

```bash
sudo apt install stow
```

- **macOS (Homebrew)**:

```bash
brew install stow
```

Setelah menginstallnya kita dapat langsung menggunakannya. 🚀

## Cara Menggunakan GNU Stow

Misalnya, kita ingin menerapkan konfigurasi **Nvim** ke sistem kita, cukup jalankan perintah berikut dari dalam folder `dotfiles/`:

```bash
stow ~ nvim
```

Perintah ini akan membuat symlink dari `dotfiles/nvim/.config/nvim/` ke `~/.config/nvim/`.
Sebagai ada tonton video dibawah ini.

Jika ingin menghapus symlink yang dibuat oleh Stow:

```bash
stow -D ~ nvim
```

Sebagai contoh implementasi ada di video ini.

<LiteYouTubeEmbed
  id='-4ka3JJ_JII'
  poster='maxresdefault'
  title='Try stow for nvim folder'
  noCookie={true}
  aspectHeight={9}
  aspectWidth={16}
  muted={true}
/>

## Kesimpulan

GNU Stow benar-benar mempermudah hidup gue dalam mengelola dotfiles. Beberapa manfaat utama:

- Tidak perlu lagi copy-paste manual.
- Dotfiles lebih terorganisir.
- Mudah diterapkan di perangkat lain.

Kalau lo sering mengatur ulang sistem atau suka bereksperimen dengan konfigurasi,
gue sangat merekomendasikan untuk mulai pakai GNU Stow. Cobain deh, dan rasakan sendiri manfaatnya!

Udah siap pakai GNU Stow? Jangan lupa backup dotfiles ke **GitHub** atau **GitLab** ya biar makin aman! 🚀


Kelola dotfiles dengan mudah dan rapi menggunakan GNU Stow! Tidak perlu setting ulang dari nol setelah reinstall sistem.

Tidak Takut Kehilangan Dotfiles Lagi dengan GNU Stow!


Galau dalam berkarier mungkin menjadi hal wajar ya bagi setiap orang yang masuk ke umur 20an tahun, atau dalam bahasa anak sekarang adalah `Quarter Life Crisis` yaitu masa dimana
mulai merasa tidak memiliki arah, khawatir, bingung dan galau karena ketidakpastian kehidupan di masa mendatang. Bukan hanya di karier aja si tapi ke masalah relasi, percintaan dan kehidupan sosial juga.

## Background

Gw adalah seorang Sarjana Teknik Pertanian yang lulus dari salah satu perguruan tinggi pertanian terbaik di Indonesia, yaitu [**Institut Pertanian Bogor**](https://ipb.ac.id/). Kampus mungkin memang terbaik, tapi apakah mungkin jalan karier gw akan mudah dengan baik?

Menurut gw memang awalnya `Brand Kampus` adalah salah satu `'key'` gerbang dimana kita bisa melalang buana di dunia karier dimana saja, dan akan mudah masuk di berbagai Instansi pekerjaan. Yes, di satu sisi memang benar adanya, tapi yang terpenting adalah ada di diri pribadi masing-masing setiap orang.
Bagaimana value yang bisa kita berikan ke orang lain atau instansi yang akan kita tuju. Benar, hal seperti ini yang seharusnya dulu ada di pikiran gw sebagai seorang Fresh Graduate, namun memang nyatanya pikiran ini terbentuk ketika gw sudah menjalani pekerjaan selama 2 tahun setelah lulus dari kuliah.
Yap, selama itu gw baru bisa belajar dan memahami, apa yang sebenarnya harus dipersiapkan untuk menjawab langkah apa yang akan gw ambil di jalan karier gw nanti.

<MdxImage
  alt='Example description'
  src='/images/blog/galau-karir.jpg'
  width={500}
  height={300}
  useSkeleton
/>

## First Journey

Setelah daftar dan test sana-sini sesuai dengan jurusan gw sebagai Teknik Pertanian, gw belum menemukan tempat sesuai dengan apa yang jadi keingin gw untuk bekerja, ada si tempat yang gw pengen jadi bagian di sana, tapi ngga sedikit juga gw gagal, gw hanya sampai ke bagian tes awal ajah
dan gugur karena banyak orang-orang yang sudah lebih prepare dibanding gw saat daftar pekerjaan. Dari sini gw belajar kalau `Segala sesuatu itu harus dipersiapkan walaupun tidak banyak`.
Sampai ada salah satu lowongan di web career kampus yang gw tertarik untuk daftar disana sebagai MT `Management Trainee` di salah satu UMKM di Bogor.

Memang tujuan diawal ya namanya seorang Fresh Graduate, jadi gw berpikir untuk cari pengalaman sebanyak mungkin diawal kerja, tanpa mementingkan gaji terlebih dahulu.
Dalam seleksi masuk MT tersebut prosesnya seru. Mulai dari gw buat video profile kalo kalian mau tau ini [linknya](https://www.youtube.com/watch?v=Hs0PZvHN3nE&t=11s), terus lolos tes IQ, terus tes presentasi produk, cari harga pokok produk dan segalanya yang notabennya gw ga tau cara ngitungnya gimana wkwkw, tapi karena latar belakang gw teknik jadi ada dasar-dasar
hitungan yang bisa dilogikakan deh.

<MdxImage
  alt='Example description'
  src='/images/blog/align-items.webp'
  width={300}
  height={200}
  useSkeleton
/>

### Bekerja

Dari sini mulai gw mulai belajar memahami, bahwa bekerja tidak semudah apa yang di bayangkan sebelumnya, banyak yang harus disesuaikan saat itu, semua tanggung jawab ada di diri kita langsung. Oh iya, role pertama kali yang gw pegang adalah sebagai `Sales Officer`.
Gw pikir disini lah titik yang menjadi banyak perubahan untuk gw, mulai dari sesuatu yang baru untuk gw kerjakan sebelumnya, apalagi ini adalah role yang berbeda dibandingakn background gw sebagai Teknik Pertanian.

Bulan demi bulan berlalu, ternyata gw harus dipindahkan di berbagai role lainnya. Dalam satu tahun pertama gw sudah 3 kali pindah role, pertama sales, kemudian pindah ke procurement, dan menjadi lead project penjualan tas. Dari seringnya perpindahan role tersebut gw sadar, kalau gw `belum bisa beradaptasi dengan baik dan cepat`, dan juga gw menyadari kalau ternyata gw `butuh seorang mentor` yang bisa jadi tuntunan dalam bekerja.
Dari sana gw coba terus belajar, dan sadar kalau masih banyak kekurang yang harus gw perbaiki.

### Belajar

Di tahun kedua, gw dipindahkan lagi kebagian digital marketing, sangat berbakat sekali saya untuk pindah-pindah tempat haha. Tapi dari sini lah proses dimana gw banyak berkembang, mulai dari proses belajar dan menemukan cara bagaimana gw bisa menikmati apa yang menjadi pekerjaan gw. Senang sekali bisa belajar hal baru dan punya mentor enak untuk mengajarkan digital marketing.
Waktu demi waktu berlalu banyak belajar digital marketing dan mengenal cara buat website untuk iklan marketing. Saat itu gw merasakan nikmatnya buat website, walaupun menggunakan wordpress yang membuatnya tidak ngecode langsung, namun dari sini gw menemukan sesuatu yang `seru` dan membuat gw `senang`. Dari sanalah gw mengenal `Landing page` kemudian `SEO` dan dan istilah marketing marketing lainnya.

Yap dari sana gw sudah mendapatkan dunia yang mulai gw suka, salah duanya yaitu digital marketing dan juga web developing. Digital marketing lamban laun terus dipelajarin dan website juga, sampai saat itu penasaran untuk ikutan [**Digitalent**](https://digitalent.kominfo.go.id/) dari Kominfo yaitu pelatihan `HTML & ccs` dan ikutlah untuk pelatihan tersebut di Juli 2020 kemarin.
Pelatihannya seru kita diminta belajar mandiri melalui pihak ke tiga yaitu [Progate](https://progate.com/) untuk mempelajari materi yang ada disana secara teratur. dan seru membuat web calculator pertama kali walaupun tidak di deploy hehe. Karena hal tersebut gw makin penasaran dengan dunia dev dan makin banyak cari tau tentang hal tersebut.

## Problem

Tahun 2020 adalah tahun yang berat bagi gw dan mungkin bagi setiap orang merasakann hal yang sama. Saat itu gw merasa bimbang memutuskan untuk pindah kerjaan atau tidak, karena banyak sekali perubahan yang terjadi akibat COVID-19.
Mulai dari pekerjaan yang berubah, kondisi kantor yang mulai goyang, sampai revenue yang mulai tidak menentu, akibat pendapatan yang berkurang.
Semua berdampak dan tidak memandang siapa aja, sampai hal terburuk seperti `Layoff` karyawan jadi pilihan yang diambil oleh perusahaan.

Memang saat itu gw merasakan galau yang cukup tinggi, dan di sisi lain gw merasa bersyukur juga, kenapa? karena gw masih bisa bekerja dan menghasilkan uang yang cukup untuk kehidupan setiap bulannya, ya walaupun lebih irit dari yang biasanya si dan merelakan untuk sedikit menabung.
Kalau dipikir, dibandingkan temen-temen yang masih harus berjuang untuk mencari pekerjaan atau bahkan terkena keputusan `layoff` karyawan, seharusnya memang gw harus lebih mensyukuri keadaan saat itu karena masih diberikan kesempatan untuk bekerja.

Akibat adanya pengurangan setengah pegawai, gw jadi menerima tupoksi kerja atau load kerja lebih dari yang biasa gw kerjakan, apalagi saat itu masih belum banyak menguasai ilmu digital marketing, pekerjaan yang seharunya dikerjakan 3-4 orang saat itu gw menghandlenya sendiri.
Karena gw merasa kurangnya peningkatan skill dengan baik dan gw juga merasa tidak berkembang saat itu disana, dan ada beberapa problem internal yang tidak bisa dibicarakan, sehingga gw memutuskan untuk resign di akhir tahun 2020 kemarin.

## New Jurney

Keputusan untuk resign memang keputusan yang sangat sulit dipilih pada saat itu. Galau dan bingung habis resign mau kemana dan bagaimana. Memang niat awalnya si udah ga mau jauh bekerja di luar kota, mau di deket rumah dan dekat dengan orang tua.
Kalau dipikir keputusan yang gw ambil pada saat itu adalah sesuatu yang benar dan salah haha. Salahnya adalah gw `terlalu cepat mengambil keputusan untuk resign tanpa benar-benar clear langkah yang gw ambil selanjutnya apa`.
Benarnya gw berusaha `keluar dari confort zone` gw saat masih di Bogor. Setiap keputusan pasti ada hal baik dan buruknya. Mau bagaimana lagi kalau sudah memutuskan, harus bertanggung jawab dengan pilihannya itu.

Sebelum keluar sebenernya gw sudah ikut tes untuk bootcamp `Fullstack Developer` di salah satu bootcamp di Jakarta. Alhamdulillahnya gw lolos bootcamp tersebut, Januari sudah resmi resign dan Februari start pertama gw mulai belajar.
Gw sangat menikmati proses belajar, apalagi ini adalah sesuatu yang memang membuat gw penasaran sebelumnya. Kesulitan demi kesulitan pasti gw temui saat belajar. Gw dengan background non IT tapi sudah memutuskan untuk terjun ke dunia tersebut, gw pikir ya `kalau sudah nyebur, ya harus nyebur sekalian` kerena sudah banyak yang dikorbankan,
mulai dari waktu selamat 4 bulan untuk belajar, bahkan kalo dihitung dengan persiapan sekitar 5 bulan, kemudian tidak ada pemasukan selama 4 bulan, yang ada malah setiap bulannya fix cost untuk hidup tetap jalan. Memang ini adalah keputusan yang paling besar yang gw pilih dalam hidup gw, karena gw sudah mengorbankan banyak hal, dan gw percaya bahwa `ketika niat kita baik dan bersungguh-sungguh, pasti akan ada banyak kemudahan yang menemani`.

### 1. Fase 0 (Preparation)

Proses belajar dimulai pada bulan pertama adalah Fase 0 (preparation). Gw awalnya masih merasa bingung karena baru belajar logic, pseudocode dan dasar pemrograman. Walaupun di kuliah sebenernya ada matakuliah dasar tentang pemrograman, tapi saat itu gw masih belum bisa dan malah nilai gw pas banget batas lulus matakuliah tersebut.
Di lain hal pada fase ini langsung diperkenalkan dengan `Javascript`, pada saat itu seru banget karena code yang kita ketik langsung memunculkan hasil yang diinginkan. Di fase ini sangat menikmati prosesnya dan alhamdulillah lulus dengan nilai yang KKM lebih dikit, untuk lanjut ke fase 1. Dalam fase ini menjadi gerbang pembuka untuk memiliki pola pikir sebagai developer.

### 2. Fase 1

Masuk di fase 1 disini mulai terasa menjadi seorang developer apa lagi fokus utama dalam fase ini adalah Beckend Developer. Dalam tahap ini pola pikir developer itu dipertebal dan dituntut untuk siap menguasain fundamental Fullstack Javascript. Gw mengakui bahwa dalam tahap ini cukup 'menjelimet' karena tiap harinya selalu materi berubah dari yang sebelumnya.
Jujur disini kekhawatiran gw cukup tinggi karena, bagaimana kita bisa menguasai materi sebelumnya, sedangkan materi yang diberikan selalu baru, dan untuk gw sangat membutuhkan waktu untuk mengulangnya. masalah lain muncul di diri gw adalah `belum bisa belajar dengan cepat`.

Perbaikan memang bukan sesuatu yag mudah bagi gw, rasa cemas, takut jika di fase ini tidak lulus atau mengulang sangat tinggi. Namun saat itu ge berpikir kalau keputusan untuk menyerah saat itu adalah hal yang buruk, karena sudah banyak waktu dan tenaga yang dikorbankan sampai ketitik itu, dan lupa dengan `gw sudah berjuang sampai dititik itu` yang artinya
gw itu mampu loh sampai titik itu. Kita harus percaya bahwa `dibalik kesulitan pasti Allah selalu memberikan kemudahan`. dan Alhamdulillah gw lulus dalam fase ini tanpa mengulang.

### 3. Fase 2

Masuk di fase kedua. Dalam fase 2 disini belajar tentang dasar dari client-server architecture untuk membuat struktur database yang lebih fleksibel di backend, sudah mulai belajar salah satu framework yaitu Vue untuk membuat UI menarik sebagai portofolio.
mungkin dalam fase ini bagi murid yang lain adalah fase yang paling ditunggu kali yaa, karena apa yang kita koding langsung tervisualisasikan. yap belajarnya seru dan bikin degdegan juga hahaha. Tantangannya pada tahap ini banyak sekali tugas yang harus dikerjakan,
ya walaupun memang pada akhirnya semua itu akan menjadi portofolio gw. Ohh iyaa ada momen dimana gw terancam tidak lolos dalam tahap ini, dikarenakan dalam tahap nilai gw kurang untuk memenuhi syarat lulus ke fase selanjutnya, tapi ada 1 kesempatan lagi di tugas akhir dalam fase ini yaitu membuat Personal portofolio.

Yaudah ini jadi tiket gw terakhri untuk bisa lanjut ke fase selanjutnya. Coba deh banyangin nilai gw itu kurang `6 point` untuk lolos, dan bobot tadi tugas akhir itu adalah `10 point`, mau ngga mau harus dong dimaksimalkan untuk tugas yang ini. Yap gw serius untuk membuatnya sampai selesai,
lucunya di hari H pengumpulan atau presentasi itu, masih ada fitur dari web yang gw buat belum selesai wkwkw, dan kabar baiknya seharusnya gw presentasi ke urutan 10 jadi ditunda karena waktunya ngga cukup saat presentasi. Yasudah gw mulah mengerjakan menyelesaikan dan tidak tidur malan itu.
Pengumuman di infokan saat acara farewell fase 2, dan Alhamdulillah memang ya kalo udah bersungguh-sungguh dan percaya sama diri sendiri hasilnya maksimal. Gw dapet reward 3 Portofolio terbaik saar itu, dan ternyata point yang diberikan adalah `12 point` dan itu lebih dari point yang gw butuhkan untuk lolos MasyaAllah.
Web site apa yang gw buat coba cek ini ya [**Qurantara**](https://qurantara-30c57.web.app/). Qurantara adalah web untuk Muslim untuk meningkatkan iman dan amalnya disana, kenapa? karena dalam website itu kita dapat membaca Al-Quran beserta audio dan ayatnya, kemudian Al-Hadist dan juga mengetahui jadwal solat seluruh wilayah di Indonesia.
Sederhana si tapi buat gw itu adalah sesuatu yang sangat luar biasa yang sudah gw buat dalam hidup gw.

### 4. Fase 3

Masuk ke fase yang paling ditunggu-tunggu oleh seluruh siswa yaitu fase terakhir bootcamp. Dalam fase ini gw belajar microservice dan React & React Native untuk membuat mobile apps. Di akhir fase, semua siswa akan mengerjakan final project yang akan dipresentasikan di depan hiring partner.
Yups di fase ini gw belajar framework baru lagi yaitu React. Sama seperti di fase dua di fase ini lebih sering membuat portofolio yang berhubungan dengan Front End. Gw juga belajar membuat aplikasi mobile juga di Android menggunakan React Native. Seru bersyukur akhirnya gw bisa sampai di fase akhir bootcamp ini dan bisa berjuang tanpa sama sekali mengulang fase.
Dan project akhir pun tiba 2 minggu sebelum kelulusan, diberikan waktu untuk membuat web atau aplikasi yang memiliki manfaat untuk orang lain. Gw berkelompok dengan 5 orang, Dengan Reza, Billy, Rama dan Taufiq. Project pertama yang dikerjakan secara bekelompok dan sebelumnya gw belum bisa membayangkan gimana rasannya bekerja dengan rekan dalam mendevelop sebuah website.
Perlu banyak belajar juga di proses ini, bagaimana kita mengatur pembagian tugas, kemudian mendevelop website. Waktu demi waktu bejalan. Ada momen dimana salah satu dari kami kurang berkontribusi, akibatnya project yang kami buat tidak maksimal. 3 hari kami tidur dengan waktu yang sedikit untuk mengerjakan project ini.
Walaupun banyak kendala dalam proses pembuatan pada akhirnya alhamdulillah kami lulus sama-sama.

## My Wish

Dalam proses tersebut gw banyak belajar, tentang menemukan `passion` yang ada dalam diri gw dan bagaimana kita bisa menumbuhkan dan mengembangkan hal tersebut. Yang pertama bisa gw pelajari adalah perihal `Niat`, iya hal pertama yang harus ditumbuhkan adalah niat, karena dengan niat yang penuh kita bisa menjalani hal yang sudah kita pilih secara bersungguh-sungguh.
kedua adalah `strategi`. Strategi menjadi penting saat kita menghadapi sesuatu, karena dengan strategi kita bisa dengan mudah untuk menyelesaikan halangan yang ada didepan kita. Nekat tanpa strategi adalah hal yang buruk, dan dengan strategi kita bisa menggambarkan dan memudahkan kita dalam menjalini segala proses yang ada.
dan hal yang ketiga adalah `syukur`. Iya terakhir ini adalah hal yang paling membuat gw lebih terbuka melihat kegagalan demi kegagalan, dengan syukur kita bisa menghormati segala usaha yang kita berikan sebelumnya walaupun hasil yang didapatkan tidak sesuai dengan apa yang kita harapkan. Ada sesuatu yang kita bisa dapat dengan syukur yaitu ketenangan hati dan kebesaran jiwa menerima seluruh hal yang datang ke diri kita.

Dan dari sana gw sudah memutuskan jalan yang gw ambil dalam karir gw adalah menjadi Developer. Developer yang bermanfaat dan mau terus belajar, tidak menyerah kalau menemukan kegagalan demi kegagal, bersyukur atas seluruh pencapaian yang telah dibuat dalam hidupnya. InsyaAllah terus dan akan terus belajar, berusaha menjadi bermanfaat sampai akhir. Aamiin


Blog ini menceritakan tentang perjalanan gw dalam menemukan passion dan karier setelah lulus kuliah

Baruu ini Article Ada Foto


Galau dalam berkarier mungkin menjadi hal wajar ya bagi setiap orang yang masuk ke umur 20an tahun, atau dalam bahasa anak sekarang adalah `Quarter Life Crisis` yaitu masa dimana
mulai merasa tidak memiliki arah, khawatir, bingung dan galau karena ketidakpastian kehidupan di masa mendatang. Bukan hanya di karier aja si tapi ke masalah relasi, percintaan dan kehidupan sosial juga.

## Background

Gw adalah seorang Sarjana Teknik Pertanian yang lulus dari salah satu perguruan tinggi pertanian terbaik di Indonesia, yaitu [**Institut Pertanian Bogor**](https://ipb.ac.id/). Kampus mungkin memang terbaik, tapi apakah mungkin jalan karier gw akan mudah dengan baik?

Menurut gw memang awalnya `Brand Kampus` adalah salah satu `'key'` gerbang dimana kita bisa melalang buana di dunia karier dimana saja, dan akan mudah masuk di berbagai Instansi pekerjaan. Yes, di satu sisi memang benar adanya, tapi yang terpenting adalah ada di diri pribadi masing-masing setiap orang.
Bagaimana value yang bisa kita berikan ke orang lain atau instansi yang akan kita tuju. Benar, hal seperti ini yang seharusnya dulu ada di pikiran gw sebagai seorang Fresh Graduate, namun memang nyatanya pikiran ini terbentuk ketika gw sudah menjalani pekerjaan selama 2 tahun setelah lulus dari kuliah.
Yap, selama itu gw baru bisa belajar dan memahami, apa yang sebenarnya harus dipersiapkan untuk menjawab langkah apa yang akan gw ambil di jalan karier gw nanti.

## First Journey

Setelah daftar dan test sana-sini sesuai dengan jurusan gw sebagai Teknik Pertanian, gw belum menemukan tempat sesuai dengan apa yang jadi keingin gw untuk bekerja, ada si tempat yang gw pengen jadi bagian di sana, tapi ngga sedikit juga gw gagal, gw hanya sampai ke bagian tes awal ajah
dan gugur karena banyak orang-orang yang sudah lebih prepare dibanding gw saat daftar pekerjaan. Dari sini gw belajar kalau `Segala sesuatu itu harus dipersiapkan walaupun tidak banyak`.
Sampai ada salah satu lowongan di web career kampus yang gw tertarik untuk daftar disana sebagai MT `Management Trainee` di salah satu UMKM di Bogor.

Memang tujuan diawal ya namanya seorang Fresh Graduate, jadi gw berpikir untuk cari pengalaman sebanyak mungkin diawal kerja, tanpa mementingkan gaji terlebih dahulu.
Dalam seleksi masuk MT tersebut prosesnya seru. Mulai dari gw buat video profile kalo kalian mau tau ini [linknya](https://www.youtube.com/watch?v=Hs0PZvHN3nE&t=11s), terus lolos tes IQ, terus tes presentasi produk, cari harga pokok produk dan segalanya yang notabennya gw ga tau cara ngitungnya gimana wkwkw, tapi karena latar belakang gw teknik jadi ada dasar-dasar
hitungan yang bisa dilogikakan deh.

### Bekerja

Dari sini mulai gw mulai belajar memahami, bahwa bekerja tidak semudah apa yang di bayangkan sebelumnya, banyak yang harus disesuaikan saat itu, semua tanggung jawab ada di diri kita langsung. Oh iya, role pertama kali yang gw pegang adalah sebagai `Sales Officer`.
Gw pikir disini lah titik yang menjadi banyak perubahan untuk gw, mulai dari sesuatu yang baru untuk gw kerjakan sebelumnya, apalagi ini adalah role yang berbeda dibandingakn background gw sebagai Teknik Pertanian.

Bulan demi bulan berlalu, ternyata gw harus dipindahkan di berbagai role lainnya. Dalam satu tahun pertama gw sudah 3 kali pindah role, pertama sales, kemudian pindah ke procurement, dan menjadi lead project penjualan tas. Dari seringnya perpindahan role tersebut gw sadar, kalau gw `belum bisa beradaptasi dengan baik dan cepat`, dan juga gw menyadari kalau ternyata gw `butuh seorang mentor` yang bisa jadi tuntunan dalam bekerja.
Dari sana gw coba terus belajar, dan sadar kalau masih banyak kekurang yang harus gw perbaiki.

### Belajar

Di tahun kedua, gw dipindahkan lagi kebagian digital marketing, sangat berbakat sekali saya untuk pindah-pindah tempat haha. Tapi dari sini lah proses dimana gw banyak berkembang, mulai dari proses belajar dan menemukan cara bagaimana gw bisa menikmati apa yang menjadi pekerjaan gw. Senang sekali bisa belajar hal baru dan punya mentor enak untuk mengajarkan digital marketing.
Waktu demi waktu berlalu banyak belajar digital marketing dan mengenal cara buat website untuk iklan marketing. Saat itu gw merasakan nikmatnya buat website, walaupun menggunakan wordpress yang membuatnya tidak ngecode langsung, namun dari sini gw menemukan sesuatu yang `seru` dan membuat gw `senang`. Dari sanalah gw mengenal `Landing page` kemudian `SEO` dan dan istilah marketing marketing lainnya.

Yap dari sana gw sudah mendapatkan dunia yang mulai gw suka, salah duanya yaitu digital marketing dan juga web developing. Digital marketing lamban laun terus dipelajarin dan website juga, sampai saat itu penasaran untuk ikutan [**Digitalent**](https://digitalent.kominfo.go.id/) dari Kominfo yaitu pelatihan `HTML & ccs` dan ikutlah untuk pelatihan tersebut di Juli 2020 kemarin.
Pelatihannya seru kita diminta belajar mandiri melalui pihak ke tiga yaitu [Progate](https://progate.com/) untuk mempelajari materi yang ada disana secara teratur. dan seru membuat web calculator pertama kali walaupun tidak di deploy hehe. Karena hal tersebut gw makin penasaran dengan dunia dev dan makin banyak cari tau tentang hal tersebut.

## Problem

Tahun 2020 adalah tahun yang berat bagi gw dan mungkin bagi setiap orang merasakann hal yang sama. Saat itu gw merasa bimbang memutuskan untuk pindah kerjaan atau tidak, karena banyak sekali perubahan yang terjadi akibat COVID-19.
Mulai dari pekerjaan yang berubah, kondisi kantor yang mulai goyang, sampai revenue yang mulai tidak menentu, akibat pendapatan yang berkurang.
Semua berdampak dan tidak memandang siapa aja, sampai hal terburuk seperti `Layoff` karyawan jadi pilihan yang diambil oleh perusahaan.

Memang saat itu gw merasakan galau yang cukup tinggi, dan di sisi lain gw merasa bersyukur juga, kenapa? karena gw masih bisa bekerja dan menghasilkan uang yang cukup untuk kehidupan setiap bulannya, ya walaupun lebih irit dari yang biasanya si dan merelakan untuk sedikit menabung.
Kalau dipikir, dibandingkan temen-temen yang masih harus berjuang untuk mencari pekerjaan atau bahkan terkena keputusan `layoff` karyawan, seharusnya memang gw harus lebih mensyukuri keadaan saat itu karena masih diberikan kesempatan untuk bekerja.

Akibat adanya pengurangan setengah pegawai, gw jadi menerima tupoksi kerja atau load kerja lebih dari yang biasa gw kerjakan, apalagi saat itu masih belum banyak menguasai ilmu digital marketing, pekerjaan yang seharunya dikerjakan 3-4 orang saat itu gw menghandlenya sendiri.
Karena gw merasa kurangnya peningkatan skill dengan baik dan gw juga merasa tidak berkembang saat itu disana, dan ada beberapa problem internal yang tidak bisa dibicarakan, sehingga gw memutuskan untuk resign di akhir tahun 2020 kemarin.

## New Jurney

Keputusan untuk resign memang keputusan yang sangat sulit dipilih pada saat itu. Galau dan bingung habis resign mau kemana dan bagaimana. Memang niat awalnya si udah ga mau jauh bekerja di luar kota, mau di deket rumah dan dekat dengan orang tua.
Kalau dipikir keputusan yang gw ambil pada saat itu adalah sesuatu yang benar dan salah haha. Salahnya adalah gw `terlalu cepat mengambil keputusan untuk resign tanpa benar-benar clear langkah yang gw ambil selanjutnya apa`.
Benarnya gw berusaha `keluar dari confort zone` gw saat masih di Bogor. Setiap keputusan pasti ada hal baik dan buruknya. Mau bagaimana lagi kalau sudah memutuskan, harus bertanggung jawab dengan pilihannya itu.

Sebelum keluar sebenernya gw sudah ikut tes untuk bootcamp `Fullstack Developer` di salah satu bootcamp di Jakarta. Alhamdulillahnya gw lolos bootcamp tersebut, Januari sudah resmi resign dan Februari start pertama gw mulai belajar.
Gw sangat menikmati proses belajar, apalagi ini adalah sesuatu yang memang membuat gw penasaran sebelumnya. Kesulitan demi kesulitan pasti gw temui saat belajar. Gw dengan background non IT tapi sudah memutuskan untuk terjun ke dunia tersebut, gw pikir ya `kalau sudah nyebur, ya harus nyebur sekalian` kerena sudah banyak yang dikorbankan,
mulai dari waktu selamat 4 bulan untuk belajar, bahkan kalo dihitung dengan persiapan sekitar 5 bulan, kemudian tidak ada pemasukan selama 4 bulan, yang ada malah setiap bulannya fix cost untuk hidup tetap jalan. Memang ini adalah keputusan yang paling besar yang gw pilih dalam hidup gw, karena gw sudah mengorbankan banyak hal, dan gw percaya bahwa `ketika niat kita baik dan bersungguh-sungguh, pasti akan ada banyak kemudahan yang menemani`.

### 1. Fase 0 (Preparation)

Proses belajar dimulai pada bulan pertama adalah Fase 0 (preparation). Gw awalnya masih merasa bingung karena baru belajar logic, pseudocode dan dasar pemrograman. Walaupun di kuliah sebenernya ada matakuliah dasar tentang pemrograman, tapi saat itu gw masih belum bisa dan malah nilai gw pas banget batas lulus matakuliah tersebut.
Di lain hal pada fase ini langsung diperkenalkan dengan `Javascript`, pada saat itu seru banget karena code yang kita ketik langsung memunculkan hasil yang diinginkan. Di fase ini sangat menikmati prosesnya dan alhamdulillah lulus dengan nilai yang KKM lebih dikit, untuk lanjut ke fase 1. Dalam fase ini menjadi gerbang pembuka untuk memiliki pola pikir sebagai developer.

### 2. Fase 1

Masuk di fase 1 disini mulai terasa menjadi seorang developer apa lagi fokus utama dalam fase ini adalah Beckend Developer. Dalam tahap ini pola pikir developer itu dipertebal dan dituntut untuk siap menguasain fundamental Fullstack Javascript. Gw mengakui bahwa dalam tahap ini cukup 'menjelimet' karena tiap harinya selalu materi berubah dari yang sebelumnya.
Jujur disini kekhawatiran gw cukup tinggi karena, bagaimana kita bisa menguasai materi sebelumnya, sedangkan materi yang diberikan selalu baru, dan untuk gw sangat membutuhkan waktu untuk mengulangnya. masalah lain muncul di diri gw adalah `belum bisa belajar dengan cepat`.

Perbaikan memang bukan sesuatu yag mudah bagi gw, rasa cemas, takut jika di fase ini tidak lulus atau mengulang sangat tinggi. Namun saat itu ge berpikir kalau keputusan untuk menyerah saat itu adalah hal yang buruk, karena sudah banyak waktu dan tenaga yang dikorbankan sampai ketitik itu, dan lupa dengan `gw sudah berjuang sampai dititik itu` yang artinya
gw itu mampu loh sampai titik itu. Kita harus percaya bahwa `dibalik kesulitan pasti Allah selalu memberikan kemudahan`. dan Alhamdulillah gw lulus dalam fase ini tanpa mengulang.

### 3. Fase 2

Masuk di fase kedua. Dalam fase 2 disini belajar tentang dasar dari client-server architecture untuk membuat struktur database yang lebih fleksibel di backend, sudah mulai belajar salah satu framework yaitu Vue untuk membuat UI menarik sebagai portofolio.
mungkin dalam fase ini bagi murid yang lain adalah fase yang paling ditunggu kali yaa, karena apa yang kita koding langsung tervisualisasikan. yap belajarnya seru dan bikin degdegan juga hahaha. Tantangannya pada tahap ini banyak sekali tugas yang harus dikerjakan,
ya walaupun memang pada akhirnya semua itu akan menjadi portofolio gw. Ohh iyaa ada momen dimana gw terancam tidak lolos dalam tahap ini, dikarenakan dalam tahap nilai gw kurang untuk memenuhi syarat lulus ke fase selanjutnya, tapi ada 1 kesempatan lagi di tugas akhir dalam fase ini yaitu membuat Personal portofolio.

Yaudah ini jadi tiket gw terakhri untuk bisa lanjut ke fase selanjutnya. Coba deh banyangin nilai gw itu kurang `6 point` untuk lolos, dan bobot tadi tugas akhir itu adalah `10 point`, mau ngga mau harus dong dimaksimalkan untuk tugas yang ini. Yap gw serius untuk membuatnya sampai selesai,
lucunya di hari H pengumpulan atau presentasi itu, masih ada fitur dari web yang gw buat belum selesai wkwkw, dan kabar baiknya seharusnya gw presentasi ke urutan 10 jadi ditunda karena waktunya ngga cukup saat presentasi. Yasudah gw mulah mengerjakan menyelesaikan dan tidak tidur malan itu.
Pengumuman di infokan saat acara farewell fase 2, dan Alhamdulillah memang ya kalo udah bersungguh-sungguh dan percaya sama diri sendiri hasilnya maksimal. Gw dapet reward 3 Portofolio terbaik saar itu, dan ternyata point yang diberikan adalah `12 point` dan itu lebih dari point yang gw butuhkan untuk lolos MasyaAllah.
Web site apa yang gw buat coba cek ini ya [**Qurantara**](https://qurantara-30c57.web.app/). Qurantara adalah web untuk Muslim untuk meningkatkan iman dan amalnya disana, kenapa? karena dalam website itu kita dapat membaca Al-Quran beserta audio dan ayatnya, kemudian Al-Hadist dan juga mengetahui jadwal solat seluruh wilayah di Indonesia.
Sederhana si tapi buat gw itu adalah sesuatu yang sangat luar biasa yang sudah gw buat dalam hidup gw.

### 4. Fase 3

Masuk ke fase yang paling ditunggu-tunggu oleh seluruh siswa yaitu fase terakhir bootcamp. Dalam fase ini gw belajar microservice dan React & React Native untuk membuat mobile apps. Di akhir fase, semua siswa akan mengerjakan final project yang akan dipresentasikan di depan hiring partner.
Yups di fase ini gw belajar framework baru lagi yaitu React. Sama seperti di fase dua di fase ini lebih sering membuat portofolio yang berhubungan dengan Front End. Gw juga belajar membuat aplikasi mobile juga di Android menggunakan React Native. Seru bersyukur akhirnya gw bisa sampai di fase akhir bootcamp ini dan bisa berjuang tanpa sama sekali mengulang fase.
Dan project akhir pun tiba 2 minggu sebelum kelulusan, diberikan waktu untuk membuat web atau aplikasi yang memiliki manfaat untuk orang lain. Gw berkelompok dengan 5 orang, Dengan Reza, Billy, Rama dan Taufiq. Project pertama yang dikerjakan secara bekelompok dan sebelumnya gw belum bisa membayangkan gimana rasannya bekerja dengan rekan dalam mendevelop sebuah website.
Perlu banyak belajar juga di proses ini, bagaimana kita mengatur pembagian tugas, kemudian mendevelop website. Waktu demi waktu bejalan. Ada momen dimana salah satu dari kami kurang berkontribusi, akibatnya project yang kami buat tidak maksimal. 3 hari kami tidur dengan waktu yang sedikit untuk mengerjakan project ini.
Walaupun banyak kendala dalam proses pembuatan pada akhirnya alhamdulillah kami lulus sama-sama.

## My Wish

Dalam proses tersebut gw banyak belajar, tentang menemukan `passion` yang ada dalam diri gw dan bagaimana kita bisa menumbuhkan dan mengembangkan hal tersebut. Yang pertama bisa gw pelajari adalah perihal `Niat`, iya hal pertama yang harus ditumbuhkan adalah niat, karena dengan niat yang penuh kita bisa menjalani hal yang sudah kita pilih secara bersungguh-sungguh.
kedua adalah `strategi`. Strategi menjadi penting saat kita menghadapi sesuatu, karena dengan strategi kita bisa dengan mudah untuk menyelesaikan halangan yang ada didepan kita. Nekat tanpa strategi adalah hal yang buruk, dan dengan strategi kita bisa menggambarkan dan memudahkan kita dalam menjalini segala proses yang ada.
dan hal yang ketiga adalah `syukur`. Iya terakhir ini adalah hal yang paling membuat gw lebih terbuka melihat kegagalan demi kegagalan, dengan syukur kita bisa menghormati segala usaha yang kita berikan sebelumnya walaupun hasil yang didapatkan tidak sesuai dengan apa yang kita harapkan. Ada sesuatu yang kita bisa dapat dengan syukur yaitu ketenangan hati dan kebesaran jiwa menerima seluruh hal yang datang ke diri kita.

Dan dari sana gw sudah memutuskan jalan yang gw ambil dalam karir gw adalah menjadi Developer. Developer yang bermanfaat dan mau terus belajar, tidak menyerah kalau menemukan kegagalan demi kegagal, bersyukur atas seluruh pencapaian yang telah dibuat dalam hidupnya. InsyaAllah terus dan akan terus belajar, berusaha menjadi bermanfaat sampai akhir. Aamiin


Reach ahayydududu 


## Introduction

Zaman sekarang sebagai seorang developer, memiliki personal website bukan lagi sekadar hobi, tetapi juga menjadi kebutuhan untuk menunjukkan identitas, portofolio, atau bahkan usaha untuk menjalankan bisnis.
Namun setelah membuat sebuah website, tahapan berikutnya supaya orang lain bisa melihat hasil karya yang telah kita buat adalah
kita perlu membuat website kita bisa diakses secara online. Caranya dengan menggunakan **Virtual Private Server (VPS)**.

Nah kali ini gw akan coba membahas bagaimana langkah-langkah mudah untuk deploy personal website ke VPS.

## Why deploy on VPS ?

1. **Stable**: Kenapa lebih stabil, karena kita bisa menentukan alokasi sumber daya (CPU, RAM, dan storage) yang dedicate, sehingga kinerja server tidak dipengaruhi oleh orang lain.
2. **Full Control**: Kita memiliki akses full root atau admin, sehingga dapat menginstal software, dan konfigurasi sesuai dengan kebutuhan kita.
3. **Scalability**: VPS memungkinkan kita untuk meningkatkan sumberdaya dengan mudah seiring dengan berkembangnya website atau aplikasi yang kita punya.
4. **Security**: VPS lebih aman dibandingkan dengan shared hosting karena lingkungan server kita terisolasi, dan kita juga bisa mengatur firewall dan keamanan khusus.
5. **Low Cost**: Karena kemudahannya untuk memilih alokasi sumber daya, biaya yang dibutuhkan untuk VPS bisa jauh lebih murah.

## Memilih VPS

VPS yang gw pilih adalah [bisnetgio](https://www.biznetgio.com/), karena setelah gw banding dengan penyedia jasa VPS lain, bisnetgio ini yang paling murah menurut gw.
dengan modal `Rp.100.000` aja gw bisa dapetin vps dengan spec yang lumayan, yaitu `2vCPU`, `RAM 2GB`, dan storage `60GB SSD`. Tapi balik lagi ya ke preferensi masing-masing mau pilih yang mana.

<MdxImage
  alt='Example description'
  src='/images/blog/neolite/neolite-ss-feature.png'
  width={600}
  height={300}
  useSkeleton
/>

Setelah kalian memilih service yang kalian inginkan, kalian diminta untuk setup `Operating system`, `SSH key` yang mau digunakan, dan `Setup Username dan password` untuk mengakses VM melalui SSH atau console langsung.
Setelah berhasil setup, tunggu beberapa saat, dan server akan aktif serta muncul IP Address yang kalian bisa akses.

<MdxImage
  alt='Example description'
  src='/images/blog/neolite/neolite-ss-active.png'
  width={600}
  height={300}
  useSkeleton
/>

## Setup SSH

Kemudian kita coba setup ssh agar kita bisa mengakses VPS tersebut, caranya:

```shell
# -i ~/.ssh/id_rsa adalah id rsa atau ssh key yang sudah kalian daftarkan

ssh -i ~/.ssh/id_rsa [username]@[public server IP]
# example => ssh -i ~/.ssh/id_rsa ihsan@123.123.123
```

atau kalian juga bisa setup SSH config langsung pada file `~/.ssh/config` kalian seperti di bawah ini, atau bisa lihat artikel ini => [SSH Config](https://www.digitalocean.com/community/tutorials/how-to-configure-custom-connection-options-for-your-ssh-client)

```shell title="~/.ssh/config"
Host ihsanmuh
    HostName 123.123.123
    User ihsanmuh
    IdentityFile ~/.ssh/id_rsa
```

dan kalian bisa mengakses server hanya dengan `ssh ihsanmuh` pada terminal kalian tanpa perlu menuliskannya dengan panjang.

<MdxImage
  alt='Example description'
  src='/images/blog/neolite/neolite-ss-ssh-access.png'
  width={500}
  height={300}
  useSkeleton
/>

## Setting Server

Sebelumnya kita sudah berhasil masuk kedalam VPS kita melalui SSH, sebagai mana sebuah pc, server yang kita miliki ini pun mirip layaknya ubuntu di pc kita,
jadi hal pertama yang bisa kita lakukan terlebih dahulu adalah melakukan **update** dan **upgrade**.

```shell
sudo apt update
sudo apt upgrade
```

### 1. Install NGIX

Secara singkat **NGIX** adalah sebuah web server. Tidak hanya web server, NGINX digunakan untuk `load balancing`, `content caching`, `reverse proxying`, dan `web streaming server`.
Intinya, software ini bersifat multifungsi dan membuat website makin canggih serta lebih cepat diakses. Cara menginstallnya dengan:

```shell
sudo apt install ngix
```

Setelah terinstall kemudian kita cek dengan `sudo systemctl status nginx`. NGIX dipastikan berjalan normal diserver kita.

<MdxImage
  alt='Example description'
  src='/images/blog/neolite/check-nginx.png'
  width={500}
  height={300}
  useSkeleton
/>

### 2. Install Node Manager

Karena aplikasi atau website yang akan kita deploy berbasis node js maka dari itu kita harus menginstall node manager.
Dan kali ini gw menggunakan [Fast Node Manager](https://github.com/Schniz/fnm).

```shell
curl -fsSL https://fnm.vercel.app/install | bash
```

setelah menginstall kita diminta mengubah source dari fnm dan kita bisa menginstall node yang kita inginkan

```shell
# change resource target
source /home/yourname/.bashrc

# install node v18
fnm install v18
```

setelah melakukan itu semua, node berhasil diinstall, kalian bisa cek dengan `node --version`. Karena gw menggunakan `yarn` jadi gw langsung install dengan `npm i -g yarn`,
tapi kalo kalian prefer tetap menggunakan `npm` tidak masalah.

### 3. Testing Clone Web

Disini gw mencoba untuk pull project dari github gw, tapi sebelum itu karena kita menggunakan ngix jadi gw mengikuti pathnya si ngix di `/var/www/`. Kemudian gw buat folder baru `fe-app` dengan command `mkdir fe-app`

```shell title="~/var/www/fe-app/"
# clone project
git clone https://github.com/ihsnmuh/ihsanmuh.git

# move to directory /var/www/fe-app/ihsanmuh
cd /ihsanmuh

# install dependancies
yarn

# build app
yarn build

# start app
yarn start
```

pada app gw ini sebenernya cuma app starter dari Next js, kemudian langsung menginstall dependancies menggunakan `yarn`, setelah itu kita tes build `yarn build` dan `yarn start`.

Taraaaa~ webnya sudah bisa diakses secara **online sementara** sesuai dengan portnya. Tapi masih belum aman karena http dan masih menggunakan IP server yang nantinya akan kita ganti menjadi domain.

<MdxImage
  alt='Example description'
  src='/images/blog/neolite/web-deploy.png'
  width={800}
  height={300}
  useSkeleton
/>

### 4. Handle Domain

Karena masih menggunakan IP public dan port, tentu itu akan membahayakan server kita. Maka dari itu kita akan ganti menggunaan domain yang sudah kita miliki
dengan cara **pointing** domain kita ke IP public server seperti di bawah ini.

<MdxImage
  alt='Example description'
  src='/images/blog/neolite/setup-domain.png'
  width={800}
  height={300}
  useSkeleton
/>

setelah itu kita pergi ke configurasi nginx `cd /etc/nginx/site-available` dan ada 1 file configurasi bawaan dengan nama `default` yang akan kita gunakan sebagai panduan untuk **reverse proxy** web kita.
Caranya:

- Buat satu file config ngix dengan nama bebas, dan gw buat `ihsnmuh.prod.config`

```config {4,7} title="/etc/nginx/sites-available/ihsnmuh.prod.config"
server {
    listen 80;

    server_name ihsanmuh.my.id;

    location / {
        proxy_pass http://localhost:3000;
    }
}
```

- Check error config nginx dengan cara menjalankan command ini

```shell
sudo ngix -t

# Jika success muncul seperti ini
# nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
# nginx: configuration file /etc/nginx/nginx.conf test is successful
```

- Buat symlink nginx dengan command ini

```shell
sudo ln -s /etc/nginx/sites-available/ihsnmuh.prod.config /etc/nginx/sites-enabled/ihsnmuh.prod.config
```

- Restart nginx dengan command ini

```shell
sudo systemctl restart nginx
```

Setelah itu, ketika kita coba akses website kita akan menemukan error **Bad Gateway**. Ini menandakan sudah terhubung dengan domain yang kita sudah setup, dikarenakan aplikasi kita belum dijalankan, maka dari itu nginx menghandle dengan mengarahkannya ke `502 Bad Gateway`.
Jika kita jalankan app kita dengan `yarn start`, maka web bisa di akses.

<MdxImage
  alt='Example description'
  src='/images/blog/neolite/temporary-online.png'
  width={800}
  height={300}
  useSkeleton
/>

> **Perhatian:** dengan cara tersebut web kita bisa diakses ketika kita masih berada didalam server, jika kita keluar dari server web akan kembali mati. Maka dari itu kita perlu menjalankan website di background

### 5. Menggunakan PM2

Agar website kita bisa berjalan di background server dan tidak mati saat kita keluar server, kita bisa menggunakan [PM2](https://pm2.keymetrics.io/) untuk memanage aplikasi kita.
Caranya dengan install terlebih dahulu `npm i -g pm2`. Dan kita bisa langsung menjalankan aplikasi kita dengan command. Info detail bisa akses [disini](https://pm2.keymetrics.io/docs/usage/quick-start/)

```shell
pm2 start yarn --name ihsan-prod -- start
```

Maka website sudah berjalan di background

<MdxImage
  alt='Example description'
  src='/images/blog/neolite/pm2-start.png'
  width={500}
  height={300}
  useSkeleton
/>

## Setup Tambahan

Sejauh ini kita sudah berhasil melakukan deployment aplikasi. Walaupun website kita sudah bebas diakses, ada yang perlu kita setup terlebih dahulu demi keamanan, diantaranya:

### Setup SSL dengan Certbot

Secara umum Sertifikat SSL/TLS bertindak sebagai **kartu identitas digital** untuk **mengamankan** komunikasi jaringan, **menetapkan identitas** situs web melalui Internet serta sumber daya di jaringan privat.
Kali ini kita menambahkan ssl certificate secara gratis menggunakan [cerbot](https://certbot.eff.org/) dengan cara:

- Install certbot melalui snap

```shell
sudo snap install --classic certbot
```

- Prepare certbot command

```shell
sudo ln -s /snap/bin/certbot /usr/bin/certbot
```

- Run create certbot

```shell /ihsanmuh.my.id/
# ubah domain ke domain yang mau diinject
sudo certbot --nginx -d ihsanmuh.my.id
```

Setelah sudah maka certbot akan menambahkan konfigurasi pada config nginx kita

```config {9-13, 17-27} title="/etc/nginx/sites-available/ihsnmuh.prod.config"
server {

    server_name ihsanmuh.my.id;

    location / {
        proxy_pass http://localhost:3000;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/ihsanmuh.my.id/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/ihsanmuh.my.id/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
    if ($host = ihsanmuh.my.id) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    listen 80;

    server_name ihsanmuh.my.id;
    return 404; # managed by Certbot

}
```

### Mengaktifkan Firewall

Firewall digunakan untuk mengatur lalu litas sehingga secara explisit kita bisa mengatur koneksi apa saja yang bisa mengakses server kita keluar atau pun masuk.
Sebelumnya jika kita coba akses melalui port web akan jalan normal, dan ini yang akan kita block. Firewall untuk ubuntu yang kita gunakan ini adalah ufw. Langkah-langkahnya sebagai berikut:

- Cek status ufw

```shell
# Default ufw Status inactive
sudo ufw status
```

- Atur role default terlebih dahulu agar semua koneksi ditolak

```shell
# Semua koneksi di server akan ditolak
sudo ufw default deny incoming
```

- Mengizinkan segala koneksi keluar itu bisa mendapatkan akses

```shell
sudo ufw default allow outgoing
```

- Setup apa saja yang bisa mengakses server, secara default gw hanya menambahkan 2 ini saja

```shell

# Mengizinkan akses dari OpenSSH
sudo ufw allow OpenSSH

# Mengizinkan seluruh akses dari Nginx
sudo ufw allow 'Nginx Full'

```

- Mengaktifkan ufw

```shell
sudo ufw enable
```

- Melihat list yang dapat mengakses server kita

```shell
sudo ufw status numbered

# akan muncul seperti ini, sesuai apa yang kita allow sebelumnya

# Status: active

#      To                         Action      From
#      --                         ------      ----
# [ 1] OpenSSH                    ALLOW IN    Anywhere
# [ 2] Nginx Full                 ALLOW IN    Anywhere
# [ 3] OpenSSH (v6)               ALLOW IN    Anywhere (v6)
# [ 4] Nginx Full (v6)            ALLOW IN    Anywhere (v6)
```

## Penutup

Kita telah berhasil melakukan deployment Next.js ke VPS dari nol, mulai dari menghubungkan ke server,
menginstall dependency, mengkonfigurasi Nginx dan domain, hingga mengamankan server dengan SSL dan firewall.
Meskipun tampak teknis, jika kita terbiasa, proses ini akan menjadi lebih mudah dan cepat. Semoga panduan ini bermanfaat!


Panduan lengkap langkah demi langkah untuk mendeploy aplikasi Next.js ke VPS, mulai dari pemilihan VPS, konfigurasi server, hingga pengaturan domain dan keamanan.

Deploy Personal Web NextJs ke VPS Dengan Mudah


## Introduction

Creating a React component is fairly easy, just a function like this.

```tsx title="text hahay"
export default function Card() {
  return <div>card</div>;
}
```

Then you can call them using JSX like `<Card />`, and it’s done.

However, **to do them correctly** is the reason that I write this blog. I’ve been wanting to write this for quite some time.

Doing them correctly may come naturally to developers who have been writing React for quite a while, but not for beginners. This is something that I learned the hard way over experience, nobody really taught me this. I want you who are currently reading to get them quickly.

## The Common Flaw

If you look at the Card component that I created above, it has one **crucial** flaw: **it’s not fully reusable.**

> But wait, it is reusable?! I can use them multiple times in different files. But wait, it is reusable?! I can use them multiple times in different files. But wait, it is reusable?! I can use them multiple times in different files

Well yes, you can.

```tsx
// order page
<Card />;

// product list page
<div>
  {products.map((product) => (
    <Card />
  ))}
</div>;
```

But they are not **fully reusable**.

A fully reusable component is what I call a component that is enjoyable to use. While the flawed ones frustrate you every time you need to customize them. It’s something that actually helps you code quickly by being fully reusable.

First, let's see how the flawed component looks like.

## Flawed Component in Action

Let’s say we have a layout like this

<Image
  mdx
  publicId='theodorusclarence/blogs/fully-reusable-component/normal-layout-three'
  alt='normal-layout-three'
  width={600}
  height={396}
/>

We can easily achieve them using this code:

_I use Tailwind CSS for this demo, but the concept applies to all solutions._

```tsx /grid-cols-3/
export default function ProductListPage() {
  return (
    <div className='grid-cols-3'>
      {products.map((product) => (
        <Card key={product.id} product={product} />
      ))}
    </div>
  );
}

function Card({ product }: { product: Product }) {
  return <div className='border p-1'>{product.title}</div>;
}
```

So we have a three-column grid, and we map all of the cards inside that grid. Inside the card we have a product props that renders the title. Pretty simple right?

Here’s how it went haywire.

## Customization in Flawed Components

<Image
  mdx
  publicId='theodorusclarence/blogs/fully-reusable-component/layout-with-featured'
  alt='layout-with-featured'
  width={600}
  height={400}
/>

One day your lovely designer has requests:

- Make the first card span over 2 columns (it’s for featured products)
- When we click a product with a title containing ‘yay’, I want them to shoot out confetti by calling `confetti()`.

Well, you could create two brand new components called `FeatureCard` and `ConfettiCard`, but it’s **counter-productive.** Everything inside is totally the same, except one uses two columns, and one shoots confetti.

Usually, when have this kind of situation, we rely upon custom props for each condition. But it goes downhill pretty quickly as the requirements grow.

```tsx {3-4,6-7,17-19,22}
interface CardProps {
  product: Product;
  isFeatured?: boolean;
  shootsConfetti?: boolean;

  isFeaturedThreeColumns?: boolean;
  isFeaturedButMakeItPop?: boolean;
  // 20 other props that your designer needs
}

function Card({ product, ...props }: CardProps) {
  return (
    <div
      // clsx is a simple library to combine string together
      className={clsx([
        'border p-1',
        props.isFeatured && 'col-span-2',
        props.isFeaturedThreeColumns && 'col-span-3',
        props.isFeaturedButMakeItPop && 'bg-pink-500',
      ])}
      onClick={() => {
        if (props.shootsConfetti) {
          confetti();
        }
      }}
    >
      {product.title}
    </div>
  );
}
```

I agree that using custom props sometimes is the best solution, but we can totally solve this problem if we can directly pass `className` and `onClick` directly into the component.

## Fully Reusable Component as A Solution

So what we basically need is to have all props that are in a div, that concludes `className`, `onClick`, `onHover`, `title`, `aria-label`, `style`, `about`, `id`, `onMouseEnter`, `onMouseLeave`—yeah, you got my point.

It’s A LOT.

Don’t worry. We have a type for that, may I introduce `React.ComponentPropsWithoutRef<'div'>`. So instead of adding each and every component props, we can use this helpful type.

`React.ComponentPropsWithoutRef` also applies to any element you’re using: `<'input'>`, `<'button'>`, anything!

```tsx showLineNumbers /React.ComponentPropsWithoutRef<'div'>/ /...rest/
interface CardProps extends React.ComponentPropsWithoutRef<'div'> {
  product: Product;
}

// first we grab the rest of the props using rest parameter,
function Card({ product, ...rest }: CardProps) {
  // then spread them back to our div
  return <div {...rest}>{product.title}</div>;
}
```

For those of you who are not familiar with `...`, it actually represents 2 distinct operators: Rest Parameters & Spread Operators

1. [Rest Parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) (line 6) is used to get all of the properties from objects when [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
2. [Spread Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) (line 8) is used to spread all of the properties back to the object.

The best thing is we now get autocomplete! Woohoo!

<Image
  mdx
  publicId='theodorusclarence/blogs/fully-reusable-component/autocomplete'
  alt='autocomplete'
  width={400}
  height={360}
/>

With the updated component, we can finally make our designer happy with this implementation

```tsx {8,9-11}
export default function ProductListPage() {
  return (
    <div className='grid-cols-3'>
      {products.map((product, i) => (
        <Card
          key={product.id}
          product={product}
          className={clsx([i === 0 && 'col-span-2'])}
          onClick={() => {
            if (product.title.contains('yay')) confetti();
          }}
        />
      ))}
    </div>
  );
}
```

We can add the two-columns feature by adding a custom `className`, and the confetti feature by adding an `onClick` directly in the `Card` component.

### Important Note about Fully Reusable Component

While it is a good practice to spread all of the props, do note that **not all component needs to be fully reusable**.

For example, a `ProductList` component that renders a list of products, probably only needs to be customizable in the `className` props. You can use `Pick` for that, and take only the `className` props.

```tsx /Pick/
interface ProductListProps
  extends Pick<React.ComponentPropsWithoutRef<'div'>, 'className'> {
  product: Product;
}

// No need to spread since we only need className
export default function ProductList({ className, products }: ProductListProps) {
  return (
    <div className={cn(['grid-cols-3', className])}>
      {products.map((product, i) => (
        <Card key={product.id} product={product} />
      ))}
    </div>
  );
}
```

We can just pick what we need from `React.ComponentPropsWithoutRef<'div'>` and use them in our component.

Some components that might need to be fully reusable are:

- Reusable basic components like `Button`, `Input`, `Select`, `Textarea`, etc.
- Reusable UI components like `Modal`, `Popover`, `Tooltip`, etc.

Do emphasize on the word **reusable** here. Make sure you're using this '_fully reusable component_' concept to a reusable component.

### Using Interface vs Type

Based on [Matt Pocock's blog](https://www.totaltypescript.com/react-apps-ts-performance?ref=theodorusclarence.com), `interface Props extends .. {}{:ts}` is slightly faster than `type Props = .. & {}{:ts}`.

Use `interface extends{:ts}`.

## Common Pitfalls & Solutions

By using fully reusable components, there are some pitfalls that you might encounter. I compiled some of them along with the solutions that I came up with.

### Class Name Conflict

If you’re using Tailwind CSS, sometimes merging classes will cause a conflict.

```tsx /clsx(['mt-4', className])/
function Card({
  product,
  // Don't forget to take className out of the rest parameter
  className,
  ...rest
}: CardProps) {
  return (
    <div className={clsx(['mt-4', className])} {...rest}>
      {product.title}
    </div>
  );
}

<Card className='mt-12' />;
```

We merge the `className` using `clsx` function, so any class that we pass outside of the component will be reflected in the final code.

However, in the rendered code we will have two different margin-top classes.

```tsx
<div class='mt-12 mt-4'>...</div>
```

Which is not good. We can use [tailwind-merge](https://www.npmjs.com/package/tailwind-merge) library to solve that.

tailwind-merge's function will return the latest value in the parameter. So it will prioritize our `mt-12` over the `mt-4`. Basically what we need.

```tsx
import { twMerge } from 'tailwind-merge';

twMerge('mt-4 bg-red hover:bg-dark-red', 'mt-12 bg-[#B91C1C]');
// → 'mt-12 bg-[#B91C1C] hover:bg-dark-red'
```

I usually create a wrapper with `clsx` like this

```tsx title="/src/lib/utils.ts"
import clsx, { ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

/** Merge classes with tailwind-merge with clsx full feature */
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
```

So we now can merge conflicts and compose classes neatly.

You can safely customize your component now!

```tsx /cn/
interface CardProps extends React.ComponentPropsWithoutRef<'div'> {
  product: Product;
}

function Card({ product, className, ...rest }: CardProps) {
  return (
    <div className={cn(['mt-4', className])} {...rest}>
      {product.title}
    </div>
  );
}
```

### Multiple Class Names

When you start to have more items inside the component, it can be quite confusing as to how to pass a `className` to a specific element.

Let’s say our `Card` component has a title, description, and image. We already use `className` props for the wrapper div. How can we customize the title class?

```tsx
interface CardProps extends React.ComponentPropsWithoutRef<'div'> {
  product: Product;
}
function Card({ product, className, ...rest }: CardProps) {
  return (
    <div className={cn('mt-4', className)} {...rest}>
      <h1>{product.title}</h1>
      <p>{product.description}</p>
      <img src={product.image} />
    </div>
  );
}

// How to access h1, p, and img?
<Card className='' />;
```

In my experience, I always use the normal `className` for the outermost element (wrapper). The solution is to create another object for a specific element that I might need.

```tsx {3-7}
interface CardProps extends React.ComponentPropsWithoutRef<'div'> {
  product: Product;
  classNames?: {
    title?: string;
    description?: string;
    image?: string;
  };
}
function Card({ product, className, classNames, ...rest }: CardProps) {
  return (
    <div className={clsx('mt-4', className)} {...rest}>
      <h1 className={cn(classNames?.title)}>{product.title}</h1>
      <p className={cn(classNames?.description)}>{product.description}</p>
      <img className={cn(classNames?.image)} src={product.image} />
    </div>
  );
}

<Card classNames={{ title: 'text-red-500', image: 'aspect-square' }} />;
```

Here I created a `classNames` object with `title`, `description`, and `image` property. Then we can use them to merge the class in the respective element.

If you're using [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss), another pro tip is to add this to your VSCode settings.

```json title=".vscode/settings.json"
{ "tailwindCSS.classAttributes": ["class", "className", "classNames"] }
```

Adding this will enable Tailwind CSS IntelliSense to autocomplete in the `classNames` object.

### Components With Ref

You might notice that the type name is `ComponentProps_Without_Ref`, yes there is another type called `ComponentProps_With_Ref`.

This is a needed case if you’re also forwarding ref to your component. I won’t explain in detail about ref forwarding, maybe in the next post (comment if you’d like me to write about it).

Simply, ref forwarding is needed when you want to access the ref value of your component. Usually external library like [Radix](https://www.radix-ui.com/primitives) does.

You can add the type like this.

```tsx /React.ComponentPropsWithRef/ /React.forwardRef/
type ButtonProps = React.ComponentPropsWithRef<'button'>;

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, children, ...rest }, ref) => {
    return (
      <button ref={ref} className={cn(className)} {...rest}>
        {children}
      </button>
    );
  },
);

export default Button;
```

Only then you can access the ref.

```tsx /ref={buttonRef}/ {5}
function Page() {
  const buttonRef = React.useRef<HTMLButtonElement>(null);

  React.useEffect(() => {
    buttonRef.current?.focus();
  }, []);

  return (
    <div>
      <Button type='submit' disabled ref={buttonRef}>
        Submit
      </Button>
    </div>
  );
}
```

_See how I easily add type and disabled props because we’re using a fully reusable component? \*chef’s kiss\*_

## Conclusion

Please use fully reusable components. Your teammates and your future-self will thank you.

# GFM

## Autolink literals

www.example.com, https://example.com, and contact@example.com.

## Footnote

A note[^1]

[^1]: Big note.

## Strikethrough

~one~ or ~~two~~ tildes.

## Table

| a   | b   |   c |  d  |
| --- | :-- | --: | :-: |

## Tasklist

- [ ] to do
- [x] done


Creating a component is fairly easy, but doing them correctly is a different story.

How to Create Fully Reusable React Components

Artikel ini menceritakan tentang perjalanan gw dalam menemukan passion dan karier setelah lulus kuliah

Muhammad Ihsan

Short Story

Portofolio

Latest Articles