Today we're going to attempt to embed a React Application into a Go binary. Please watch the youtube video down below for more mind blowing stuff. We're going to create a Golang REST API with Echo and a React application with Vite. From there, we're going to produce a single binary/executable containing both the API & the Web application.
Pre-requisites
- Go version
1.18.3
- Yarn version
1.22.18
- Node version
v16.15.1
Creating our Go project
First we're going to create our Go Project
mkdir go-react-demo
cd go-react-demo
touch main.go
Then, we'd like to install Echo which is a web framework (similar to Gin, Fiber, etc.)
go get github.com/labstack/echo/v4
Creating a basic API route endpoint with echo
In your main.go file, please write:
package main
import (
"net/http"
"github.com/labstack/echo/v4"
)
func main() {
e := echo.New()
e.GET("/api", func(c echo.Context) error {
return c.String(http.StatusOK, "Hello, World!")
})
e.Logger.Fatal(e.Start(":8080"))
}
This will create a basic API endpoint that returns Hello, World! once a GET request is sent to http://localhost:8080/api we may also test this by running:
curl http:localhost:8080/api
If everything works fine, next we'll create our React application with Vite
Creating our React App w/ Vite
Ensure you're in the root project directory then run:
yarn create vite
After Vite has finished bootstrapping our project, let's make sure all of the dependencies are installed
cd web
yarn install
Modifying the package.json file
We're going to modify the package.json file slightly, specifically the dev command. We don't want to serve the react application with the default vite server. We want to serve the static files ourselves with Go. We only want vite to rebuild the static files after a changes has been made (live-reload)
"scripts": {
"dev": "tsc && vite build --watch", <-- Change dev script to this
"build": "tsc && vite build",
"preview": "vite preview"
},
Changing the dev command to tsc && vite build --watch tells vite to rebuild the static files after changes have been made to it.
Try to run yarn dev in the web directory to generate the static files located in the dist directory
yarn run dev
At this point our folder structure would look like this:
go-react-demo/
├─ web/
│ ├─ dist/
│ ├─ public/
│ ├─ src/
| ├─ ...
├─ main.go
├─ go.sum
├─ go.mod
Serving our Static files with Echo
We're going to create a web.go file in the web directory
package web
import (
"embed"
"github.com/labstack/echo/v4"
)
var (
dist embed.FS
indexHTML embed.FS
distDirFS = echo.MustSubFS(dist, "dist")
distIndexHtml = echo.MustSubFS(indexHTML, "dist")
)
func RegisterHandlers(e *echo.Echo) {
e.FileFS("/", "index.html", distIndexHtml)
e.StaticFS("/", distDirFS)
}
What we're doing here, is creating a route / and serving the static files built by Vite including the web/index.html and the static assets that accompanies it.
Importing our web RegisterHandlers function to our main.go file
Going back to our main.go file. Lets import the RegisterHandlers function we exposed in the web package
package main
import (
"net/http"
"go-react-demo/web" # <--- INCLUDE THIS
"github.com/labstack/echo/v4"
)
func main() {
e := echo.New()
web.RegisterHandlers(e) # <-- INCLUDE THIS
e.GET("/api", func(c echo.Context) error {
return c.String(http.StatusOK, "Hello world!")
})
e.Logger.Fatal(e.Start(":8080"))
}
Now let's test the go server to see if it's serving the static assets of our react application correctly. Go to the root directory of the project & run:
go run main.go
Now if you visit http://localhost:8080 in the browser you should see the default vite React application.
Making a request to the Go API server from within React
Now let's try to make a GET request to the Go API server from within our React app that is also served by the Go server... Sounds like some inception stuff happening here. Please add the following:
import { useState, useEffect } from "react";
import "./App.css";
function App() {
const [data, setData] = useState("");
useEffect(() => {
const fetchData = async () => {
const response = await fetch("http://localhost:8080/api");
const data = await response.text();
setData(data);
};
fetchData().catch((err) => console.log(err));
}, []);
return (
<div className="App">
<h1>{data}</h1>
</div>
);
}
export default App;
Now we need to regenerate the React static files since we've made changes.
cd web && yarn run dev
Then we need to run the go server to serve the files
cd .. && go run main.go
If we visit http://localhost:8080, you should be greeted with "Hello world" which comes from the Go API server
A really bad development experience
I'm sure you noticed that always running 2 terminals both with different processes is a really bad dev experience, fear not for I have a solution!
We're going to install air. air which is sorta like nodemon but for go. air allows us to have hot reload with go so we don't have to manually run the go run main.go command every time we make changes.
To install air
go install github.com/cosmtrek/air@latest
Then, you'd want to create a configuration file for air that's simply done via running:
air init
Now, the final step in making a better development experience. If you're using wsl Create a dev.sh file in the root directory of your project
touch dev.sh
Modify the dev.sh script to contain
#!/bin/sh
cd web && yarn dev & air && fg
This will run both the go api server & the vite build server in parallel in one terminal
Compiling the binaries
Now, the moment of truth: to compile the binaries containing the React application simply run
go build main.go
If you're trying to build windows binaries from WSL:
env GOOS=windows GOARCH=amd64 go build main.go
Congratulatiions! you've created a single go binary that contains both your API & your React App!
