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

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

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,
    },
  },
})

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/

/apps/insights/

.
The app seems to build fine, locally everything is running, except that the

outDir

outDir

of the build config is not respected and the files are placed in a

.tanstack

.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

app.config.ts

approach is outdated)

TanStack•9mo ago•

14 replies

dual-salmon

Monorepo + Cloudflare workers

app.config.ts

app.config.ts

vite.config.ts

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,
    },
  },
})

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/

/apps/insights/

.
The app seems to build fine, locally everything is running, except that the

outDir

outDir

of the build config is not respected and the files are placed in a

.tanstack

.tanstack

app.config.ts

app.config.ts

approach is outdated)

Monorepo + Cloudflare workers

Similar Threads

Monorepo + Cloudflare workers

Similar Threads

Similar Threads

Similar Threads