Treat the content of folder.server as if all files inside were filename.server.ts

[ivosabev]

It gets tedious to add .server to all files. It would have been nice to be able to that on a folder level where all files inside are treated as server only files.

Before

/auth/login.server.ts
/auth/logout.server.ts
/auth/verifyUser.server.ts

After

/auth.server/login.ts
/auth.server/logout.ts
/auth.server/verifyUser.ts

[kiliman]

I created a patch (probably stale), but it's pretty easy to implement.

https://github.com/kiliman/remix-server-folders

[akomm]

Wanted to create just the same proposal but found it here.

Maybe (also) as remix config option. Directory has advantage of being able to see it directly, but config has the benefit of shorter path's and imports.

[akomm]

Funny. With vite its quite simple to create a plugin for that, not even depending on remix plugin itself:

import {unstable_vitePlugin as remix} from "@remix-run/dev"
import path from "path"
import {defineConfig, type Plugin} from "vite"

export default defineConfig({
  plugins: [
    remixServerFolders([
      "app/server", // all files in this folder are considered server
      // this will work too 
      // "./app/server",
      // "/home/user/project/app/server"
    ]),
    remix({
      ignoredRouteFiles: ["**/.*"],
    }),
  ],
})

function remixServerFolders(folders: string[]): Plugin {
  const cwd = process.cwd()
  const foldersNormalized = folders.map(folder => path.resolve(cwd, folder))
  return {
    name: "remix-server-folders",
    transform(_src, id, options) {
      if (
        !options?.ssr &&
        foldersNormalized.some(folder => id.startsWith(folder))
      ) {
        return {
          code: "export default {}",
          map: null,
        }
      }
    },
  }
}

[akomm]

Quick & Dirty. Probably possible even to fully remove the code and the import directly when looking deeper into the vite plugin API. While named the plugin "remix*" it does not even really have anything to do with it. Could have named it "ssrOnlyFolders".

[akomm]

building with vite I had some issues with libraries containing "use client" for nextjs compatibility, raising a lot of errors. Plugin to fix:

function fixUseClient(): Plugin {
  return {
    name: "fix-use-client",
    transform: src => {
      if (src.startsWith('"use client"')) {
        return {
          code: src.replace('"use client"', ""),
        }
      }
    },
  }
}