Framework

Date: 2024-03-13

Status: accepted

Context

React is the most commonly-used and sought after framework at the moment for FE developers in the job market
There are other options for web frameworks (such as Solid, HTMX, Svelte, Vue and others), but since most developers have experience with React, it makes more sense to stay in the React ecosystem.
React themselves suggest you use a “meta-framework” instead of the simple “create react app”. Two of those meta-frameworks are Remix and NextJS.
At this moment, NextJS is a lot more popular and has support for RSC (still WIP in Remix), however has a lot more overhead and a learning curve, while Remix has great abstractions for common usages, a much simpler learning curve, and a promising future - recently adapting vite and working on a completely backwards-compatible RFC for implementing RSCs.
Much research has been done by @Nitzan, which is also documented in this article, to choose the setup that is most right for us in this specific moment and that could also last for the future.
In the past few weeks, the integration between Remix and Vite became officially stable, becoming the recommended approach for running Remix (as in future Remix versions, Vite will be the only official way to build remix app). This decision document from the Remix Epic Stack on why they adopted vite is also a great reference.
We’re using vite with express as we’re going to use the remix server as a BFF (Backend for frontend) and deploying it as a node-based docker container

Build our FE with Remix and use remix as a Vite plugin
- Project created by running npx create-remix@latest --template remix-run/remix/templates/vite-express

Use typescript (its the default with Remix for good reason)
Use NPM as package manager (the most widely used, maintained by node foundation, recently introduced “workspaces” module like yarn if we ever need them)

replace the default server.js of remix template with typescript version (services/remix/server/index.ts)
Use remix-flat-routes to enhance routing conventions (deprecated) (read more from epic stack)
define schema for env variables with zod and make sure specific env vars are available to client as well
Configure a tight CSP with helmet library and usage of nonce (see epic stack’s decisions doc on CSP and their implementation)

Remix’s easy-to-follow abstractions will help us kickstart the development much faster, and by using it with Vite we get the added values of the Vite ecosystem.
There’s some chance we will decide in the future to migrate to Next because its more mature and has a larger community, however that should be relatively easy as Remix does not have many abstractions.

Testing

Polyfills