Mengemas aplikasi web menggunakan react-create-app + echo golang

Karena yang simpel itu ga bikin pusing

Naupaw
Naupaw
Nov 8 · 6 min read
https://www.instagram.com/p/B3D_QnXnS62/

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

Antarmuka aplikasi web ngrok

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/isengs

Menginstall 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/echo

setelah itu file go.mod akan terisi sebagai berikut.

Contoh isi file go.mod

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 --typescript

flag 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 git pastikan untuk menghapus folder .git di dalam folder client agar tidak terbentuk repository git didalam repository git. Setelah itu lakukan git init di 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 build

maka akan terbentuk folder build

Contoh output isi 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.

main.go

Lalu, lakukan perintah berikut di root project anda.

rice embed-go -i ./src

Maka 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() found

Anda harus selalu melakukan perintah rice embed-go setiap 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

Server berhasil dijalankan.

Lalu buka http://localhost:8081

Horray !!!

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/src

parameter -o adalah output dari file binary anda. Karena saya menggunakan MacOS saya hanya menggunakan nama server (sebenernya bebas) jika anda menggunakan file system windows anda harus menggunakan ekstensi .exe sehingga menjadi server.exe

Jalankan aplikasi dengan perintah

./server

Jika 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/src

Bagaimana 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/src

Maka 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 start

Anda 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

Ngetik sendiri ya, biar ga malezz…

Dan pada file App.tsx pada sisi client side

App.tsx

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

Ngetik Teroz biar ga malezz…

Jalankan aplikasi kembali dalam dev mode

ENV=development go run pedox/isengs/src

dan di folder client

npm run start

Maka akan muncul hasil di atas jika berhasil.

Naupaw

Written by

Naupaw

Shy Frontend dev

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade