Newbie - React client on Golang backend

#1

I’m still wet behind the ears, but I’m trying to stack the resclient book-collection-react example’s client on the go-res book-collection-badgerdb example’s backend. I thought they would bolt together without any modifications, but I obviously missed something. I separated the 2 examples into server and client folders, removed the go-res example’s index.html and the resclient example’s server.js, but the best I can get is a 404 by changing the http.Dir to ../client. I learn best by doing, so I was hoping to set this example up to play around with so I can become more proficient in what I consider to be an optimal development stack.

#2

Hi and welcome to the forum! :partying_face:

Always nice to wake up to some questions to answer :grin: .
You should be able to do this without any code alterations to the examples. The client(s) doesn’t care which service serves the API. They just get it from Resgate.

Try this:

  • In one console, run book-collection-badgerdb:
    cd go-res/examples/book-collection-badgerdb
    go run main.go
    
  • In another console, run only the client part of book-collection-react:
    cd resclient/examples/book-collection-react
    npm install
    npm run start-client
    
  • Open the react client at: http://localhost:3000. Or port 8081? It might depend. You can see it in the console output, saying something like:

    i 「wds」: Project is running at http://localhost:8081/

In real use cases, it is seldom that the API services also serve the client. Especially when the API consists of multiple micro-services. So, running it separately like this is more close to reality.

A last note: the badgerdb example also serves a client on port 8083. If you want to remove that, just open main.go and delete the following lines:

// Run a simple webserver to serve the client.
// This is only for the purpose of making the example easier to run.
go func() { log.Fatal(http.ListenAndServe(":8083", http.FileServer(http.Dir("./")))) }()
fmt.Println("Client at: http://localhost:8083/")

Did you get that to work?

Best regards,
Samuel

#3

Yeah, it was almost too easy. Resclient popped itself open in the browser on port 8081 and the BadgerDB data had persisted, letting me know I was connecting to the go-res backend. Hopefully, I can get to a point where I can contribute something to the Resgate ecosystem. Thank you so much!

1 Like
#4

That would be awesome! :grin: And just by asking questions, trying it out, etc. you are already contributing.

1 Like