Tanstack Router in LikeC4 codebase.

In this article, we review Tanstack Router configuration in LikeC4 codebase. We will look at:

1. What is LikeC4?

2. Tanstack Router configuration.

What is LikeC4?

LikeC4 serves as an Architecture as a code tool. Visualize, collaborate on, and evolve your software architecture with always up-to-date, live diagrams generated from your code.

Check out this playground.

What is LikeC4? Why “like”?

LikeC4 is a modeling language for describing software architecture and tools to generate diagrams from the model.

LikeC4 is inspired by C4 Model and Structurizr DSL, but provides some flexibility. You customize or define your own notation, element types, and any number of nested levels in architecture model.
Perfectly tailored to your needs.

For more info, refer to the LikeC4 README.

Tanstack Router configuration.

So I was trying to figure out how the LikeC4 playground is built and I found this folder, apps/playground.

This playground is deployed at https://playground.likec4.dev/w/tutorial/saas/

I checked what framework this project has and found that this uses @tanstack/react-router 

I saw the vite.config.ts file and checked for the related documentation and I found this Installation with Vite guide.

In the documentation, you will find the below section:

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { tanstackRouter } from '@tanstack/router-plugin/vite'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // Please make sure that '@tanstack/router-plugin' is passed before '@vitejs/plugin-react'
    tanstackRouter({
      target: 'react',
      autoCodeSplitting: true,
    }),
    react(),
    // ...
  ],
})

However, in the LikeC4 file, it looks like this:

 
import tanStackRouterViteCfg from './tsr.config.json' with { type: 'json' }
...
export default defineConfig(({ command }) => ({
...
  plugins: [
    tsconfigpaths({
      projects: [
        './tsconfig.frontend.json',
        './tsconfig.worker.json',
      ],
    }),
    TanStackRouterVite(tanStackRouterViteCfg),
    react(),
    cloudflare({
      persistState: true,
    }),
  ],
}))

Tanstack Router configuration is defined in a separate file named tsr.config.json.

{
  "semicolons": false,
  "routeFileIgnorePattern": ".css.ts",
  "generatedRouteTree": "src/routeTree.gen.ts",
  "routesDirectory": "src/routes"
}

I copied this above code from apps/playground/tsr.config.json. So far, I only wrote about the config files, but obviously there is more to Tanstack router.

To understand these file names notion, you may want to read the File-based routing.

About me:

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

I spent 200+ hours analyzing Supabase, shadcn/ui, LobeChat. Found the patterns that separate AI slop from production code. Stop refactoring AI slop. Start with proven patterns. Check out production-grade projects at thinkthroo.com

References:

1. tanstack.com/router/…/react/installation/with-vite

2. github.com/likec4/likec4/…apps/playground/src/main.tsx

3. playground.likec4.dev/w/tutorial/saas/

4. likec4/likec4/tree/main/apps/playground

5. tanstack.com/router/…/react/routing/file-based-routing