How to build a binary with embedded frontend?

[wancheng]

I want to build a binary with the latest source by myself.

[webdevpraveen]

If you want to build a binary with the frontend embedded, here’s the usual approach:

1. Build the frontend first

   • Run the frontend build command (usually npm run build or yarn build inside the web or frontend folder).
   • This generates static assets (HTML, CSS, JS) in a dist or build directory.

2. Embed those assets into the Go binary

   • Use Go’s built-in go:embed (available since Go 1.16) to include the frontend files directly:

     import "embed"
     
     //go:embed dist/*
     var frontendFS embed.FS

   • Then serve these files via your HTTP server in Go.

3. Update your build script

   • Make sure your build pipeline runs the frontend build first, then compiles the Go backend:

     cd web && npm run build
     cd .. && go build -o memos

4. Result

   • The final binary (memos) will contain both backend logic and the frontend assets.
   • You can run it standalone, without needing a separate frontend server.

---

If you’re using Docker, you can add a multi-stage build where the first stage builds the frontend, and the second stage compiles Go and embeds the assets. This keeps the image clean and portable.

[webdevpraveen]

You can achieve this by first building the frontend (npm run build in the web folder), then using Go’s go:embed to include the generated dist files directly in your binary. Finally, adjust your build script so the frontend build runs before go build. This way the final binary will serve both backend and frontend without needing a separate server.

[wancheng]

I want a real working script, not this kind of AI-generated stuff.

[wancheng]

I got it by :

cd web
pnpm install
pnpm build

cd ../
cp -r web/dist/* server/router/frontend/dist/
go build -o memos ./cmd/memos

[webdevpraveen]

Haha fair enough - glad you got it working!
Thanks for sharing the steps - this will definitely help others who run into the same issue.