How do you handle two versions of an application?

I'm working on the UI of an opensource backup software using among other things tanstack router, react and vite. We want to create a commercial version of the UI which has 1/ the same routes with different contents and 2/ more routes, only available for the commercial release.

For 1/, I can simply rely on a feature flag and on dead code elimination to have a different build between the commercial and the OSS versions.

However, what's the best way for 2/?

My first attempt is to put all my commercial views in a

src/routes/_commercial

src/routes/_commercial

src/routes/_commercial

src/routes/_commercial, configure tanstack router with:

      TanStackRouterVite({
        generatedRouteTree: isCommercial
          ? "./src/routeTree.commercial.gen.ts"
          : "./src/routeTree.gen.ts",
        routeFileIgnorePattern: isCommercial ? undefined : "_commercial",
      }),

      TanStackRouterVite({
        generatedRouteTree: isCommercial
          ? "./src/routeTree.commercial.gen.ts"
          : "./src/routeTree.gen.ts",
        routeFileIgnorePattern: isCommercial ? undefined : "_commercial",
      }),

      TanStackRouterVite({
        generatedRouteTree: isCommercial
          ? "./src/routeTree.commercial.gen.ts"
          : "./src/routeTree.gen.ts",
        routeFileIgnorePattern: isCommercial ? undefined : "_commercial",
      }),

      TanStackRouterVite({
        generatedRouteTree: isCommercial
          ? "./src/routeTree.commercial.gen.ts"
          : "./src/routeTree.gen.ts",
        routeFileIgnorePattern: isCommercial ? undefined : "_commercial",
      }),

and initialize the router with:

const router = createRouter({
  routeTree: parseBoolString(import.meta.env.VITE_COMMERCIAL)
    ? routeTreeCommercial
    : routeTree,
   ...
})

const router = createRouter({
  routeTree: parseBoolString(import.meta.env.VITE_COMMERCIAL)
    ? routeTreeCommercial
    : routeTree,
   ...
})

const router = createRouter({
  routeTree: parseBoolString(import.meta.env.VITE_COMMERCIAL)
    ? routeTreeCommercial
    : routeTree,
   ...
})

const router = createRouter({
  routeTree: parseBoolString(import.meta.env.VITE_COMMERCIAL)
    ? routeTreeCommercial
    : routeTree,
   ...
})

Is it the way to go, or are there alternatives to consider?

How do you handle two versions of an application?

Similar Threads

Similar Threads

Similar Threads