KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #typescript #claude-code #codex #dsh #dsh-plugin #ai-agent #ai-agents #deepseek-harness #agent-skills #macos #cli

remix-spa-frontend-elysia-backend

★ 14 Open GitHub ↗

Remix SPA frontend + Elysia backend

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Remix SPA frontend + Elysia backend

Demonstration of a web project with:

- **Monorepo with Turborepo.** This lets a developer work on both the frontend and backend by simply running `pnpm dev`.

- **Separated frontend and backend.** The frontend can be deployed to any static site host, and the backend can be deployed to any environment that supports Node.js (example deployment configuration with Vercel is provided, and being Elysia and Remix, with some changes it can be configured to deploy to other runtimes as well, e.g. Cloudflare Workers, Bun, etc).

- **Frontend: Remix (SPA mode).** A single-page app with client-side routing, built with Remix. Since Remix has a built-in solution for client-side queries (via [clientLoader](https://remix.run/docs/en/main/route/client-loader)) and mutations (via [clientAction](https://remix.run/docs/en/main/route/client-action)), there is no need for `useEffect` or data fetching libraries like React Query ([unless really needed](https://remix.run/docs/en/main/discussion/state-management#understanding-state-management-in-react)). By going 100% client-side, we can avoid all the headaches associated with server-side rendering (SSR) and we can use any React UI toolkit without worrying about integrating with server-side rendering frameworks. No more hydration mismatches!

- **Backend: Elysia on Remix.** Server-side code is built with Elysia, which comes with built-in type validation and end-to-end type safety. An Elysia app is mounted on a server-side Remix app (which provides hot module reloading during development and bundling for production).

- **Testing: Playwright.** [Black-box testing](https://www.youtube.com/watch?v=vbIWSwz8NxQ) lets us ensure that the application works as expected while being agnostic to the implementation details. This lets us refactor the code without breaking the tests.

> [!WARNING]
>
> This project uses several stuff that, as of writing in 2024-02-09, are still in beta or unstable:
>
> - [Elysia 1.0 beta](https://github.com/elysiajs/elysia/pull/465)
> - [Remix Vite](https://remix.run/docs/en/main/future/vite) ([coming very soon!](https://twitter.com/markdalgleish/status/1755708592827891910))
> - [Remix SPA mode](https://remix.run/docs/en/main/future/spa-mode)
>
> I have a bit of hunch that this could potentially be one of my preferred stacks[^prefer] once they are stable, but for now, this is just a proof of concept. We'll see how it goes.

[^prefer]: I’m only talking about the cases where I want to build a web application where its frontend and backend are completely separated, in which the frontend is completely static and rendered on the client-side, and the backend is written in the same language as the frontend (which gives us the possibility of having E2E type safety without code generation). In other cases, I would likely opt for different stacks.

remix-spa-frontend-elysia-backend

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README