Not beign able to deploy my monorepo app on vercel

[Milan-960]

Summary

I am trying to deploy my full front-end backend app with Monorepo on Vercel using turbo repo.

and every time I push it shows me an error called dist folder not found and now once I setup everything correctly it just does not show anything in there just shows white blank screen.

I am using vitejs module in react.

This is my vite.config.js looke like

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    emptyOutDir: true,
    rollupOptions: {
      input: './index.html', // Ensure relative paths are used
    }
  },
  base: './', // Ensure relative paths are used
  server: {
    port: 3000
  },
  // Ensure fallback to index.html for SPAs
  resolve: {
    alias: {
      '@': '/src'
    }
  },
  esbuild: {
    jsxInject: `import React from 'react'`
  }
})

and this is my vercel.json looks like

{
  "version": 2,
  "builds": [
    {
      "src": "apps/fe-service/package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "apps/fe-service/dist"
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/apps/fe-service/dist/index.html"
    }
  ]
}

and inside my root folder I also have turbo.json and vercel.json

that looks like this

turbo.json

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "init": {
      "cache": false,
      "persistent": false
    },
    "clean": {
      "cache": false,
      "persistent": false
    },
    "build": {
      "dependsOn": ["^build"],
      "outputs": [
        "dist/**",
        ".vercel/**"
      ],
      "cache": true
    },
    "lint": {
      "persistent": false
    },
    "typecheck": {
      "persistent": false
    },
    "format": {
      "persistent": false
    },
    "seed": {
      "persistent": false
    },
    "env": {
      "cache": false,
      "persistent": true
    },
    "dev": {
      "cache": false,
      "dependsOn": ["^build"],
      "persistent": true,
    },
    "test": {
      "persistent": false
    },
    "pre-commit": {
      "dependsOn": ["format", "typecheck", "lint"]
    },
    "pre-push": {
      "dependsOn": ["test"]
    }
  }
}

vercel.json

{
  "version": 2,
  "builds": [
    {
      "src": "apps/be-service/dist/index.js",
      "use": "@vercel/node"
    },
    {
      "src": "apps/fe-service/dist/index.html",
      "use": "@vercel/node"
    },
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "apps/be-service/dist/index.js",
      "methods": ["GET", "POST", "PUT", "PATCH", "DELETE"],
      "headers": {
        "Access-Control-Allow-Origin": "*"
      },
      "status": 200
    }
  ]
}

and this is what my Build & Development Settings are set to on vercel project setting

Note: I have tried various of ways to do it but still nothing so far :(

Build Command: cd apps/fe-service && pnpm install && cd ../.. && npx turbo run build --filter=fe-service
Output Directory : apps/fe-service/dist

Root Directory: is set to empty since I am doing cd and all so.

and that's what I get from vercel

and empty white screen.

PS: on my local everything is working it does build correctly serve the frontend correctly but it just does not build correctly on vercel. please help me if you have any idea. Thank you!

Additional information

No response

Example

No response