Remix Payload

screenshot of Remix Payload

Monorepo - Remix and PayloadCMS

Overview

This article provides a guide on how to set up Payload CMS with Remix in a monorepo structure. It explains how to divide each application into its own package, including the express server app. The article also discusses how to inject the Payload instance into Remix loaders and actions through the request context, allowing the use of the Payload Local API for data, user, and authentication management without bundling Payload together with the Remix server build.

Features

  • Monorepo structure using pnpm for package management
  • Separate packages for Payload CMS backend and admin interface, Remix frontend, and ExpressJS server
  • Shared package for dependencies used by all apps to reduce bundle sizes
  • Utilizes TypeScript for static type checking
  • Uses ESLint for code linting
  • Implements Prettier for code formatting
  • Utilizes Turborepo for running monorepo builds and scripts in a parallel and developer-friendly manner
  • Supports Nodemon for running the express server while listening to file changes in the Payload CMS package

Summary

This article provides a detailed guide on setting up Payload CMS with Remix in a monorepo structure. It emphasizes the division of applications into separate packages and the use of context injection for integrating Payload with Remix. The article also highlights the use of pnpm for package management, TypeScript for static type checking, and Turborepo for running builds and scripts. Additionally, it suggests using Nodemon for running the express server during development with automatic reloading.