Extend the .server convention to the app/server directory

[philipp-spiess]

I've naturally started to colocate my server-only files in the app/server directory which is now looking like this:

α server (main) tree .
.
├── __snapshots__
│   └── markdown.server.test.ts.snap
├── authentication.server.ts
├── db.server.ts
├── github.server.ts
├── gitlab.server.ts
├── highlighter.server.ts
├── markdown.server.test.ts
├── markdown.server.ts
├── supportedLanguages.ts
├── tracing.server.ts
└── user.ts

I’m sure it's not necessary to mark all of these files as server-only modules but it gives me a certain peace of mind that I know this will never accidently bundle into the client.

One feature I like about SvelteKit is that they, in addition to the .server and .client filename pattern, also have a dedicated server folder that also can't be imported by client code by accident. Is there interesting in also doing that for Remix?

[machour]

+1 for the ability to define one or multiple paths in remix.config.js to have all their contents excluded from the client build

[buzinas]

Being able to define a path could potentially solve #5548 as well.

[kiliman]

I created a patch that lets you have an anything.server folder, and all the files were treated as if they had the .server suffix.

[machour]

Gist? 👀

[kiliman]

This isn't a patch-package patch, as it is against the source. Remix changes are happening so quickly it's difficult to keep maintaining patches, so I have a repo where I cherry-pick these commits into new versions as needed.

diff --git a/packages/remix-dev/compiler/compileBrowser.ts b/packages/remix-dev/compiler/compileBrowser.ts
index 39c65ef..7564d9c 100644
--- a/packages/remix-dev/compiler/compileBrowser.ts
+++ b/packages/remix-dev/compiler/compileBrowser.ts

 export type BrowserCompiler = {
   // produce ./public/build/
@@ -119,7 +119,7 @@ const createEsbuildConfig = (
     urlImportsPlugin(),
     mdxPlugin(config),
     browserRouteModulesPlugin(config, /\?browser$/),
-    emptyModulesPlugin(config, /\.server(\.[jt]sx?)?$/),
+    emptyModulesPlugin(config, /(\.server(\.[jt]sx?)?$)|(\.server[/\\].*$)/),
     NodeModulesPolyfillPlugin(),
   ].filter(isNotNull);

[andremalan]

+1! Another version of this could be to just expose the values of that emptyModulesPlugin call in RemixConfig, that way we could define any pattern we need to ensure is excluded from the browser build.

[WesleyYue]

This is a duplicate of #4093. People interested in this should upvote that proposal as well since it currently has more traction.