Developer Software

Integrasi ReactJS dengan Golang menggunakan GIN

Haloo semuaaa, lanjut bahas golang lagi nih

Pada kali ini kita akan belajar untuk integrasi aplikasi reactjs dengan http web framework dari golang yaitu gin-gonic, panduan ini berasumsi kalian sudah menyiapkan golang environtment dan kamu punya dasar penggunaan perintah craete-react-app untuk membuat aplikasi reactjs ya.

pertama kita siapin project directorynya dulu di dalam GOPATH, kalo yg gatau GOPATH, GOPATH itu sebuah variabel sistem operasi yang digunakan oleh golang sebagai rujukan lokasi dimana semua folder project disimpan, kecuali project yg di setup dengan Go Modules itu lain lagi ceritanya hehe.

cara cek GOPATH di terminal :

go env GOPATH

hasilnya kurang lebih akan seperti ini tergantung dari settingan GOPATH kalian, disini saya setting GOPATH pada directory GO-PROJECT

/home/sevud/GO-PROJECT

lanjut kita buat projectnya di dalam folder src

mkdir -p $GOPATH/src/reactgo
cd $GOPATH/src/reactgo
code .

syntax “code .” berfungsi untuk buka text editor visual code secara langsung dan merujuk ke folder yg tadi kita buat, kalo kalian pake text editor lain abaikan saja perintah yg ketiga ya.

lanjut masih di terminal dan lokasi folder yg sama tadi kita buat aplikasi reactjs nya di dalam folder yang kita beri nama “client”

mkdir client
cd client
npx create-react-app .

atau bisa juga dengan satu baris perintah seperti ini

npx create-react-app client

setelah tunggu beberapa menit proses instalasi, akan terlihat struktur folder project yang kita buat seperti ini di vscode

setelah struktur aplikasi reactjs kita telah di buat, kita edit sedikit di “package.json” dan tambahkan field “homepage” dengan nilainya “/landing” :

setelah itu kita buat server golangnya, kita buat folder dengan nama “server” di dalam folder root porject kita “reactgo” dan buat juga file main.go, buat aja langsung di vscode biar gampang ya.

sebelum lanjut ke penulisan server golangnya kita build aplikasi reactjs kita dulu, pindah ke folder client dan ketik perintah berikut :

npm run build

setelah selesai akan menghasilkan folder “build” di dalam aplikasi reactjs kita.

lanjut tulis script go berikut di main.go

package main

import "github.com/gin-gonic/gin"

func main() {
    router := gin.Default()
    router.Static("/landing", "../client/build")
    router.Run(":80")
}

script tersebut kita membuat router dengan framework gin dan membuat endpoint “/landing” yang nantinya ketika diakses user, user akan dapat mengakses aplikasi reactjs kita, setting endpoint ini menyesuaikan dengan yang sebelumnya kita udh edit di package.json ya, dan baris terakhir kita set server go kita untuk dpt berjalan di port 80.

setelah itu lanjut masuk ke folder server lagi, kita akan menjalankan servernya dengan perintah berikut

go run main.go

kalo pas dijalanin ada permission denied coba kalian login terminalnya sebagai root dulu. setelah berhasil ngejalanin servernya coba buka browser dan akses http://localhost:80/landing

sekian tutorial kali ini dari saya, semoga bermanfaat !!

Related posts

React Native 101 – #2 Cara Kerja

Rochman Ramadhani

Apa itu AI ?

Novi Andriyani

5 Skill Penting bagi Front-End Developer

Rochman Ramadhani

Leave a Comment