Distributing Your React Apps as Binaries

Sung
Monomax Software
https://monomax.sh

How to distribute your React app + backend in a single binary

What can it do for you?

  • Allow users to self-host
  • Easier to sell your software
  • Simplify deployment process
  • No disk I/O

Dnote

https://github.com/dnote/dnote

Go Web API server + React frontend

Basic idea

  1. Write backend in a language that can produce a binary
  2. Embed static files inside the binary

How to embed static files?

  • script
  • libraries (e.g. packr)
func startCmd() {
	c := database.Config{
		Host:     os.Getenv("DBHost"),
		Port:     os.Getenv("DBPort"),
		Name:     os.Getenv("DBName"),
		User:     os.Getenv("DBUser"),
		Password: os.Getenv("DBPassword"),
	}
	database.Open(c)
	database.InitSchema()
	defer database.Close()

	mailer.InitTemplates(nil)

	// Perform database migration
	database.Migrate()

	// Run job in the background
	go job.Run()

	srv := initServer()

	log.Printf("Dnote version %s is running on port %s", versionTag, *port)
	addr := fmt.Sprintf(":%s", *port)
	log.Println(http.ListenAndServe(addr, srv))
}
func initServer() *mux.Router {
	srv := mux.NewRouter()

	apiRouter := handlers.NewRouter()

	srv.PathPrefix("/api").Handler(http.StripPrefix("/api", apiRouter))
	srv.PathPrefix("/").HandlerFunc(getAppHandler())

	return srv
} 
func getAppHandler() http.HandlerFunc {
	box := packr.New("web", "../../web/public")

	fs := http.FileServer(box)
	appShell := box.Find("index.html")

	return func(w http.ResponseWriter, r *http.Request) {
		parts := strings.Split(r.URL.Path, "/")
		if len(parts) >= 2 && parts[1] == "dist" {
			fs.ServeHTTP(w, r)
			return
		}

		// All other requests should serve the index.html file
		w.Write(appShell)
	}
} 

Benefit

  • Portability (e.g. self-host)
  • Easy to upgrade software

How to distribute your React app + backend in a single binary

Links

Thanks

Sung
Monomax Software
sung@monomax.sh
https://monomax.sh