Understanding Remix framework

Remix is just another full stack web framework.

Getting started

It’s as simple as the following command but it’ll prompt you a set of questions.

npx create-remix@latest

One of the key things is to decide what “Remix Stacks” to use.

Remix Stacks	Description
Blues Stack	long-running Node.js server + PostgreSQL
Indie Stack	long-running Node.js server + SQLite database
Grunge Stack	serverless Node.js server + DynamoDB

Start the app with this npm script.

npm run dev

Folder structure

Here is the folder structure:

> app/
  > models/
  > routes/
  - db.server.ts
  - entry.client.tsx
  - entry.server.tsx
  - root.tsx
> prisma/
> public/
- remix.config.js
- server.ts

Folder/File	Description
models/	models for resources in db
models/	file based routes
db.server.ts	configure db connection
entry.client.tsx	Entry point for loading client. Static HTML hydrated on server & injected into DOM. This file runs on client side only
entry.server.tsx	Entry point to server.
root.tsx	Root component of app.
prisma	Migration, schema & seed script using prisma
public/	Public static assets
remix.config.js	Config file for remix app
server.ts	Express app