Applification Blog

Source code for applification.net.

Architecture

  flowchart LR
  A(Turborepo) --> B(Packages)
  B(Packages) --> C(UI Library)
  B(Packages) --> D(Config)
  C(UI Library) --> E(Apps)
  D(Config) --> E(Apps)
  E(Apps) --> F(Remix)
  F(Remix) <--> G(Prisma Client)
  F(Remix) <--> L(Tailwind CSS)
  I(Prisma) <--> H(Node JS)
  H(Node JS) <--> F(Remix)
  I(Prisma) <--> J(PostgreSQL)
  H(Node JS) <--> K(Fly.io)
  J(PostgresSQL) <--> K(Fly.io)

What's inside?

The primary technologies used in this site are:

React: for the UI
Tailwind CSS: Utility classes for consistent/maintainable styling
Remix.run: Framework for the Client/Server/Routing
TypeScript: Typed JavaScript
Prisma: ORM with migrations and TypeScript client support
Postgres: Battle tested SQL database
Turborepo: High performance build system for TypeScript monorepos

The services this site uses:

Fly.io: Edge hosting platform
GitHub Actions: Hosted CI pipeline services
Cloudinary: Image hosting and transformation services
Sentry: Error reporting services
Metronome: Remix metrics service

Architure choices

Read about the choices behind this stack at https://applification.net/posts/remixing-this-blog

Apps and Packages

blog: a Remix app
ui: a React component library that can be shared by other applications in the monorepo
config: eslint configurations (includes eslint-config-next and eslint-config-prettier)
tsconfig: tsconfig.jsons used throughout the monorepo

Each package/app is 100% TypeScript.

Utilities

TypeScript for static type checking
ESLint for code linting
Prettier for code formatting

Build

To build all apps and packages, run the following command:

npm run build

Develop

To develop all apps and packages, run the following command:

Provisioning a PostgreSQL database:

docker compose up

To sync Prisma schema with PostgresSQL database:

npx prisma db push

To seed the database with some dummy data:

npx prisma db seed

Run the app in development mode:

npm run dev

When changes to prisma/schema.prisma are made migrations need to be run with:

npx prisma migrate dev --name ${name_the_migration}

C.I Deployment

Testing Docker Builds

# Run the app
docker compose up

# Inspect files in image
docker build -f Dockerfile.dev . -t blog-dev
docker run -it blog-dev sh

The app is configured with GitHub Actions and Fly. Any push to the main branch will deploy to Fly.io.

Database migrations are automatically applied on deployment via the start_with_migrations.sh script triggered from the fly.toml config.

mtrontz/turbo-prisma-remix-template