🏠 Home

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 StacksDescription
Blues Stacklong-running Node.js server + PostgreSQL
Indie Stacklong-running Node.js server + SQLite database
Grunge Stackserverless 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
models/models for resources in db
models/file based routes
db.server.tsconfigure db connection
entry.client.tsxEntry point for loading client. Static HTML hydrated on server & injected into DOM. This file runs on client side only
entry.server.tsxEntry point to server.
root.tsxRoot component of app.
prismaMigration, schema & seed script using prisma
public/Public static assets
remix.config.jsConfig file for remix app
server.tsExpress app