Mengemas aplikasi web menggunakan react-create-app + echo golang
Karena yang simpel itu ga bikin pusing

Jika Anda pernah menggunakan aplikasi tunneling ngrok, pasti Anda familiar dengan interface web yang disajikan.

Singkat cerita, ngrok adalah aplikasi tunneling yang memungkinkan Anda untuk mengekspos aplikasi web di komputer lokal anda agar dapat diakses oleh orang jaringan publik.
Aplikasi ini menggunakan bahasa golang sebagai source code nya, dan yang menariknya adalah Anda hanya perlu membutuhkan satu file binary saja untuk menjalankan aplikasi ini. Jadi semua asset web Anda dikemas menjadi satu.
Sebelum itu mari kita cari tahu apa arti dari mengemas.

Nah target yang akan kita capai adalah membuat aplikasi yang sebisa mungkin ringkas dan mudah untuk di eksekusi secara multiplatform. Dalam kasus ini adalah kita mencoba untuk meng-gimmick (bener ga tu tulisan nya :/ ) aplikasi native semacam electron (̶y̶a̶ ̶s̶e̶b̶e̶n̶e̶r̶n̶y̶a̶ ̶g̶a̶ ̶e̶l̶e̶c̶t̶r̶o̶n̶ ̶a̶m̶a̶t̶ ̶s̶i̶h̶)̶.
Yang berbeda adalah electron menggunakan full NodeJS sebagai bahasa backend nya dengan native frame yang disajikan dengan chromium render engine.
Sedangkan kita akan mencoba approach lain dengan menggunakan golang sebagai backend dan react sebagai antarmuka web aplikasinya, tanpa harus memisahkan kedua stack tersebut, atau di eksekusi satu-satu, selain itu kita tetap menggunakan browser pada umumnya seperti chrome, firefox, dll.
Selain itu semu asset frontend akan di embed kedalam file binary golang itu sendiri.
Apa yang musti disiapkan?
Pastikan kamu sudah menginstall golang dan nodejs, jika belum kamu bisa googling gimana cara nginstal golang dan nodejs, pastikan golang nya versi versi 1.12 ke atas ya, karena kita akan menggunakan go.mod untuk depedency management nya. Dan juga pastikan nodejs yang terinstall versi 8 ke atas juga (rekomendasi saya sih versi 10.13.0 LTS).
Inisalisas Golang (server side)
Inisialisasi project golang menggunakan go.mod
# Membuat Folder Project baru
$ mkdir project-isengs
$ go mod init pedox/isengs # <~ isi sesuai dengan nama project anda.Penamaan project golang biasanya menggunakan format.
git-vendor/username/nama-project
# Contoh
github.com/pedox/isengsMenginstall dependency yang kita butuhkan, kita menggunakan echo dan go.rice
go get github.com/GeertJohan/go.rice
go get github.com/GeertJohan/go.rice/rice
go get github.com/labstack/echosetelah itu file go.mod akan terisi sebagai berikut.

Inisialisasi React (client side)
Setelah itu, kita inisialisasi juga dibagian client side nya menggunakan react, tetap pada root project, kita jalankan perintah berikut.
npx create-react-app client --typescriptflag typescript opsional jika anda ingin menggunakan typescript, jika tidak hilangkan.
maka folder client akan terbentuk dengan inisialisasi project create-react-app
Jika anda ingin menggunakan
gitpastikan untuk menghapus folder.gitdi dalam folderclientagar tidak terbentuk repository git didalam repository git. Setelah itu lakukangit initdi root project anda untuk menginisialisasi project git anda.
Melakukan build React untuk pertama kali
Lakukan build project react Anda untuk pertama kali, dengan perintah berikut di dalam folder client
npm run buildmaka akan terbentuk folder build

Dan isi folder build tersebut yang akan kita kemas dalam satu file binary pada saat dicompile.
Menyajikan Static File disisi echo framework.
Agar aplikasi react (client side) dapat diakses melalui route echo, kita harus me-register route tersebut disisi echo framework nya.
Di dalam dokumentasi echo kita dapat melakukan registrasi static file dengan metode seperti berikut
e.Use(middleware.Static("/static"))Tapi karena kita menggunakan go.rice kita harus me-generate asset disisi client side terlebih dahulu agar dapat kita kemas.
Buat folder src di root project Anda dan isi file main.go tersebut.
Lalu, lakukan perintah berikut di root project anda.
rice embed-go -i ./srcMaka file rice-box.go akan terbentuk, isi file tersebut adalah hasil kompilasi dari asset client/build .
Perintah rice embed-go -i ./src akan mencari method
rice.FindBox()di setiap file .go yang ditelusuri.
Jika anda melakukan eksekusi tanpa menemukan method tersebut, akan muncul error.
no calls to rice.FindBox() foundAnda harus selalu melakukan perintah
rice embed-gosetiap ada perubahan file yang terjadi.
Menjalankan untuk pertama kali
Setelah dirasa sudah, kita dapat menjalankan server tersebut dengan perintah.
go run pedox/isengs/src*Sesuaikan dengan nama project Anda

Lalu buka http://localhost:8081

Pastikan Anda berhasil merender aplikasi react anda tanpa ada file js atau asset yang tidak muncul.
Melakukan build Binary
Nah mari kita ke bagian yang paling keren nya, kita akan membuild aplikasi dengan perintah.
go build -o server pedox/isengs/srcparameter
-oadalah output dari file binary anda. Karena saya menggunakan MacOS saya hanya menggunakan namaserver(sebenernya bebas) jika anda menggunakan file system windows anda harus menggunakan ekstensi.exesehingga menjadiserver.exe
Jalankan aplikasi dengan perintah
./serverJika berhasil hasil akan sama dengan di atas.

File binary yang terbentuk sebesar 8.9MB
Jika Anda ingin berencana untuk membuild aplikasi dalam format binary lain misalnya linux, Anda dapat mendefinisikan architecture dan os dengan menambahkan variable
env GOOS=linux GOARCH=amd64 go build -o server-linux pedox/isengs/srcBagaimana dengan mode development ?
Karena repot juga kalau setiap ada perubahan kita harus melakukan perintah rice go-embed ber-ulang-ulang bagaimana kalau kita melakukan proxy di sisi echo framework.
Umumnya create-react-app dapat melakukan proxy request dengan menambahkan property proxy di package.json hal ini untuk mencegah Cross-Origin Resource Sharing (CORS)
Tetapi jika kamu ingin melakukan proxy melalui echo framework, kamu dapat menambahkan sedikit baris kode sehingga menjadi seperti berikut.
Sehingga untuk menjalankan mode development kita harus menjalankan perintah go run dengan tambahan variabel env seperti berikut
ENV=development go run pedox/isengs/srcMaka routing akan diahlikan ke proxy dimana url react development berada http://localhost:3000
Untuk menjalankan react di dalam dev mode, anda juga harus menjalankan perintah berikut di dalam folder client
npm run startAnda dapat mengakses aplikasi dalam dev mode di port 8081 melalui proxy yang echo framework sediakan.
Membuat API sederhana
Untuk memastikan sisi backend dan frontend dapat berkomunikasi, kita dapat membuat api sederhana, tambahkan kode berikut di dalam file main.go

Dan pada file App.tsx pada sisi client side

Fungsi diatas untuk melakukan ajax request dan memunculkan pesan yang berhasil dimuat.

Jalankan aplikasi kembali dalam dev mode
ENV=development go run pedox/isengs/srcdan di folder client
npm run start
Maka akan muncul hasil di atas jika berhasil.
