phildl / epic-stack-monorepo

Epic Stack Monorepo (pnpm)

The Epic Stack Monorepo 🚀

Ditch analysis paralysis and start shipping Epic Web apps.

This is an opinionated project starter and reference that allows teams to ship their ideas to production faster and on a more stable foundation based on the experience of Kent C. Dodds and contributors.

Epic Stack Monorepo Example

This monorepo was created with pnpm for space efficiency and more convienence in monorepos than npm. On top of that package manager the monorepo pipeline tool of choice is turborepo (feel free to switch it for NX).

• apps Folder containing the applications

  • epic-app: the Remix.run Epic Stack app.

• packages Folder containing examples

  • ui: this UI package contains the shadcn/ui Component previously in the Epic Stack App. It also exposes a Tailwind config "epic-stack" preset, that you consume from the Remix app.
  • client-hints: is an example package that takes the original functions and hooks handling client-hints in the utils folder of the original app, and put that into their own package. The hooks: were refactored to take "loader" as generics (typically the root loader).
  • Some config packages:
    • eslint containing some common eslint configs.
    • tsconfig presets.

Follow the commit history

• 1. init monorepo setup with pnpm: takes you through a working local monorepo developpement environment with PNPM.
• 2. Adapt Dockerfile, fix CI and deploy the epic-stack app: takes CI to green, add turborepo, pipelines, fix deployment and Dockerfile.
• 3. Extract logic to monorepo packages: UI package, "client-hints" package, and config (tsconfig, eslint) packages: package creation examples.

Local development

Warning All the following commands should be launched from the monorepo root directory

Install dependencies

pnpm i

Given the name of our app in package.json is @epic-stack-monorepo/epic-app:

Turborepo is used here to have pipeline between packages. The setup here is basic, and you can see turbo as just a way to run the same pnpm command in all packages, for example:

Build all packages

pnpm build

Dev all packages

pnpm dev

All turborepo // pnpm commands can be filtered to a specific package with the --filter flag. For example:

To Work on the Remix Epic Stack app

pnpm dev --filter=@epic-stack-monorepo/epic-app

You could also use ... to run dev also on all the workspace packages deps:

pnpm dev --filter=@epic-stack-monorepo/epic-app...

(This will also run the dev command on @epic-stack-monorepo/client-hints and @epic-stack-monorepo/ui).

Install package in a specific package

pnpm add -D chokidar --filter=@epic-stack-monorepo/ui

This will install chokidar in the @epic-stack-monorepo/ui package.

Original documentation

npx create-remix@latest --install --init --git-init --template epicweb-dev/epic-stack

The Epic Stack

---

Watch Kent's Introduction to The Epic Stack

"The Epic Stack" by Kent C. Dodds at #RemixConf 2023 💿

Docs

Read the docs (please 🙏).

Support

• 🆘 Join the discussion on GitHub and the KCD Community on Discord.
• 💡 Create an idea discussion for suggestions.
• 🐛 Open a GitHub issue to report a bug.

Branding

Want to talk about the Epic Stack in a blog post or talk? Great! Here are some assets you can use in your material: EpicWeb.dev/brand

Thanks

You rock 🪨

epic-stack-monorepo's Issues

Document use cases?

Hi!

Thanks for creating and sharing this! This looks quite interesting! I found it while searching for an epic-web boilerplate that used ppm instead of npm.

It's not clear what the goals behind the monorepo are, though. Is the (main) use case to have multiple (different) apps in the same repo while sharing common bits and libraries between them? Why would someone use this instead of a regular epic-stack boilerplate? I think it'd be worth clarifying it in the README (e.g what are the production advantages? Why would someone use this in production instead of a regular boilerplate? Pros/Cons etc).

Thanks!