Wrangler - Cloudflare Pages Local Development - Returns Not Found when using Remix and Turborepo

[superjose]

Hi everyone 🤗

I'm migrating an app from a Remix + Cloudflare single app to a Remix monorepo using Turborepo and Cloudflare.

But Wrangler isn't picking up the built remix app. It's returning me 404 on all of my routes.

Note that this exact configuration was working in the single repo configuration.

My journey so far

1. I've double-checked the configuration in my package.json
2. I've changed the build paths from relative to absolute.
3. I've checked tsconfig.json
4. I've checked vite.config.json
5. I've copied the output from my build folder (monorepo) to the existing single app's build folder and vice versa. Both run on the single app but not on the monorepo.
6. I've removed node_modules from the app folder.

Strange thing
Remix and Vite don't create an index.html file when they finish the build process. If I create an empty index.html, the wrangler picks it up and returns it to me.

Here are the support files:

(apps/alertdown/package.json)

{
  "name": "@alertdown/app",
  "private": true,
  "sideEffects": false,
  "type": "module",
  "scripts": {
    "build": "remix vite:build",
    "dev": "remix vite:dev",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
    "start": "dotenv wrangler pages dev ./build/client",
    "tsc": "tsc --noEmit",
    "extract": "lingui extract --clean",
    "compile": "lingui compile",
    "w:deploy": "npm run build && wrangler pages deploy ./build/client --project-name=alertdown",
    "w:deploy:prod": "npm run build && wrangler pages deploy ./build/client --project-name=alertdown --branch=production",
    "preview": "npm run build && wrangler pages dev ./build/client",
    "build-cf-types": "wrangler types",
    "icons": "npx @svgr/cli --ext=jsx  --out-dir  app/assets/generated/icons -- app/assets/icons",
    "icons:watch": "npm-watch icons",
    "stripe:webhook": "stripe listen --forward-to http://localhost:5173/api/webhooks/stripe",
    "analyze": "vite-bundle-visualizer"
  },
  "dependencies": {
    "@alertdown/auth": "workspace:*",
    "@alertdown/configs": "workspace:*",
    "@alertdown/core": "workspace:*",
    "@alertdown/db": "workspace:*",
    "@alertdown/email": "workspace:*",
    "@alertdown/storage": "workspace:*",
    "@alertdown/stripe": "workspace:*",
    "@remix-run/node": "^2.11.1",
    "@remix-run/react": "^2.11.1",
    "@remix-run/serve": "^2.11.1",
    "isbot": "^5.1.14",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "vite-plugin-commonjs": "^0.10.1",
    "vite-tsconfig-paths": "^5.0.1"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.11.1",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "@vitest/coverage-v8": "^2.0.5",
    "@vitest/ui": "^2.0.5",
    "eslint": "^9.9.0",
    "fluid-tailwind": "^1.0.3",
    "prettier": "^3.3.3",
    "typescript": "~5.5.4",
    "vite": "^5.4.0",
    "vite-plugin-babel-macros": "^1.0.6",
    "vite-plugin-dts": "~4.0.2",
    "vitest": "^2.0.5",
    "wrangler": "^3.71.0"
  },
  "engines": {
    "node": "20"
  }
}

{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    },
    "dev": {
      "cache": false
    },
    "preview": {}
  }
}

wrangler.toml

name = "alertdown"
compatibility_date = "2024-04-05"
compatibility_flags = ["nodejs_compat"]

Vite config:

import {
  vitePlugin as remix,
  cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,
} from '@remix-run/dev'
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'
import { lingui } from '@lingui/vite-plugin'
import macrosPlugin from 'vite-plugin-babel-macros'
import tailwindcss from 'tailwindcss'
import { getLoadContext } from './load-context'

export default defineConfig({
  plugins: [
    remixCloudflareDevProxy({
      getLoadContext,
    }),
    remix(),
    tsconfigPaths(),
    lingui(),
    macrosPlugin(),
  ],
  css: {
    postcss: {
      plugins: [tailwindcss()],
    },
  },
})

tsconfig.json

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "**/.server/**/*.ts",
    "**/.server/**/*.tsx",
    "**/.client/**/*.ts",
    "**/.client/**/*.tsx"
  ],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "target": "ES2022",
    "strict": true,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    // Remix takes care of building everything in `remix build`.
    "noEmit": true,
    "types": ["@remix-run/cloudflare", "vite/client"],
    "skipLibCheck": true
  }
}

Any ideas?

[superjose]

Alright! I found the problem!
I didn't have the functions folder passed!

All solved!