Using Rust Back End to Serve an SPA

Summary

In web development and deployment, most software engineers are familiar with either: Separating the built SPA and the backend (Client-Side Rendering), or Return HTML directly from the backend (Server-Side Rendering) I recently (re)discovered that there is a third way: embedding the built SPA into the backend’s binary file, and serving it directly. I think this is an elegant approach, as the pros are: Simpler deployment as we only have one binary file in the end Simpler code where we don’t have to take into account CORS and the backend endpoint since the frontend and backend are served from the same origin The cons are quite clear: No matter how good is it, it’s still an unconventional approach; expect lots of push back from people Increased binary size and memory usage because of the static file embedding Slightly reduced DX due to no frontend hot reloading In more details, the steps are: Build the frontend Copy the frontend built artifact to backend’s static folder serving Run the backend binary (for production environment) Try to embed the built frontend to the backend’s binary before deploying Let’s get into how are we doing it with Rust/Axum and Svelte/SvelteKit . While the code that I’m going to show you is in that specific stack, I think it’s not challenging to adopt the mindset to other languages and frameworks and libraries . Project Structure For simplicity, I’d start with a monorepo setup, where the backend and the frontend are in separate folders in the same Git repository. I’m sure the same end result is achievable with a polyrepo setup, given enough effort. . ├── ... ├── packages │ ├── frontend │ └── backend └── README.md I’m using monorepo tool called Moon [^moonrepo]. By the developers’ terms, it sits: Above task runners like Make or Just Below full-blown tools like Bazel It has both build cache and task dependency built-in, adding “just enough” structure to the tasks around a monorepo. # packages/frontend/moon.yml tasks: install: command: 'npx pnpm i...