What's the main differences between blue-stack and the indie-stack of remix.run

May 2024 ยท 2 minute read

I see that the blue stack is PostgreSQL-focused, but I don't really understand the decision behind choosing this stack instead of the indie stack.

Why does the blue stack include @remix-run/server-runtime while the indie stack includes the @remix-run/serve package? Furthermore, why do the docs only mention the @remix-run/serve package?

The Remix framework is primarily focused on providing a routing system. Therefore, why does the blue stack include the Express dependency?

Additionally, why does the blue stack have the file server.ts while the indie stack doesn't? And so on...

1 Answer

Remix is not just a routing system. It uses React Router under the hood but provides support for server-side rendering.

Remix allows you to host your app in many environments: Node.js, AWS, Vercel, Cloudflare, etc.

Remix uses adapters to take your host-specific request and convert it to the native Request and hands it off to Remix runtime. Remix then returns a Response object that is returned back to your host adapter which processes it.

Browser <=> Web Server <=> Adapter <=> Remix <=> App

For Node.js environments, Remix includes Remix App Server and an Express adapter. RAS is simply an internal Express app that's minimally configured. RAS uses the @remix-run/serve package.

The Express template will generate the server.js file that gives you full control of your Express entry. If you notice in package.json, you'll see that you will launch your Express server via node server.js.

The Indie and Blues stacks were meant to showcase how to build the same app using different backends. Indie uses RAS and SQLite, whereas Blues uses Express and Postgres. The Grunge stack even uses AWS and Dynamo DB.

This will provide more technical information of how it all works. https://remix.run/docs/en/1.17.1/pages/technical-explanation

1

ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJobm9saWt%2FdH2OsJ%2BarKNiwamxjKaYoqZdmbanssSrnKeblah6o7HTsJyepl2XubaxjKyrmpubYq6vsIytn55lmaOxqrGMrKuam5tivKd50Z6korBdp8Kv