TanStackT
TanStack•7mo ago•
14 replies
dual-salmon

Monorepo + Cloudflare workers

Hey all!

Looking to bounce some ideas and possibly guidence on how to make the setup in title work.

We run and NX monorepo and want to host on cloudflare workers. Running into some config issues. We could not find any documentation about the config options for the tanstackStart vite plugin and all previous examples refer to an app.config.ts file, which seems irrelevant?
(https://developers.cloudflare.com/workers/framework-guides/web-apps/tanstack/)
(https://tanstack.com/start/latest/docs/framework/react/hosting#cloudflare-pages)

We have this 
vite.config.ts
:
import { defineConfig } from 'vite'
import tsConfigPaths from 'vite-tsconfig-paths'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { workspaceRoot } from '@nx/devkit'
import { join } from 'path'

export default defineConfig({
  root: __dirname,
  cacheDir: '../../node_modules/.vite/apps/insights',

  server: {
    port: 4204,
    host: 'localhost',
    fs: {
      allow: [workspaceRoot],
    },
  },

  preview: {
    port: 4301,
    host: 'localhost',
  },

  plugins: [
    tsConfigPaths({
      root: workspaceRoot,
    }),
    tanstackStart({
      tsr: {
        srcDirectory: join(__dirname, 'src')
      },
    }),
  ],

  build: {
    outDir: './dist/apps/insights',
    emptyOutDir: true,
    reportCompressedSize: true,
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },
})


Keep in mind that the node cwd is located in repo root, while this config is in /apps/insights/.
The app seems to build fine, locally everything is running, except that the outDir of the build config is not respected and the files are placed in a .tanstack folder in root. Any idea how that could be changed?

Besides the dist location, is there any working examples or pointers on how to make it work with cloudflare workers using the vite approach? (Assuming the app.config.ts approach is outdated)
Was this page helpful?