Serving a React app with GoLang using Gin

A High Level Walkthrough Connecting React and Go

This is meant to be a very simple walkthrough for serving a react app from a Go server using Gin. The walkthrough assumes you already have your Go environment setup, and you have a basic understanding of using create react app to scaffold react projects.

Go imposes a specific folder structure on projects so that you can easily create and share packages across projects. Pretty cool idea. You can run the following to see where your GOPATH is located

go env GOPATH

You should see something like this:

/Users/blakedanson/go

Just for additional clarity, you should create your project nested in your go directory. It should look something like this, but with your usernames instead:

/Users/blakedanson/go/src/github.com/synapticsynergy/multifamilyAnalysis

Create a New Project

First we are going to create a very simple folder structure for the project. Using your terminal CD into your root directory.

mkdir -p $GOPATH/src/github.com/user/myProject
cd $GOPATH/src/github.com/user/myProject
touch main.go

React App

Next use create react app. If I’m not using a git submodule, I’ll just name the project client so it is in a client directory in my Github repo that contains both client and server code. If you use a git submodule, you can easily just keep separate repos for client and server if you have separate teams.

npx create-react-app client
cd client
npm start

Here is a high level of what the folder structure should look like at this point:

my project is called multifamilyAnalysis instead of myProject. It just saves me time to use my existing project for an example.

You won’t see the build or node_modules folders until after you run yarn and yarn build commands. So go ahead and cd into the client directory and run those commands:

$ cd client
$ yarn
$ yarn build

Yarn build will create a production build that you can serve from your Go server.

Create your Go Server

Now here is some very basic scaffolding for your main.go file to serve these static files that were built by Webpack using yarn build.

Go Packages

go get your dependancies for Gin:

go get -u github.com/gin-gonic/gin
go get -u github.com/gin-gonic/contrib/static

Edit your main.go file

Once that is complete, start the server from the root directory.

go run main.go

You should see something like this in the terminal if it worked:

Now navigate in your browser to localhost:5000 and you should see the typical create react app start screen there.

Why not use port 3000?

Webpack is configured out of the box with create react app to use port 3000 for transpiling changes while in development. However, you will want your api to point to a different port just for development. That means technically you will have two servers running in development, but only one server with the static files built running in production. Then you will add a proxy in your package.json file to connect to your api for ajax calls from the front end to proxy your go server. This is a super common pattern when working with full stack react projects. This is what you would add to your package.json when you are ready to build out some apis on your Go server:

"proxy": "http://localhost:5000",

This proxy doesn’t matter when you are in production since the static files will be served from your go server instead of from a node development server. That means that ajax calls will call to the correct port.

Conclusion

That concludes my walkthrough, I hope it was useful. When I have a bit more time, I will show some examples of writing api endpoints on the go server and calling them from react.