Add Vercel deploy config and platform specific tweaks

app/i18next.server.ts

@@ -4,6 +4,7 @@ import i18n from '~/i18n'; // your i18n configuration file
 import HttpBackend from 'i18next-http-backend';
 import {
   IS_CF_PAGES,
+  IS_VERCEL,
   safeRequireNodeDependency,
 } from '~/utils/platform-adapter';
 import { RemixI18NextOption } from 'remix-i18next/build/server';
@@ -13,6 +14,8 @@ import { findLanguageJSON } from '~/languages.server';
 export async function getPlatformBackend() {
   if (IS_CF_PAGES) {
     return HttpBackend;
+  } else if (IS_VERCEL) {
+    return await import('i18next-fs-backend').then((module) => module.default);
   } else {
     return await safeRequireNodeDependency('i18next-fs-backend').then(
       (module) => module.default,

app/utils/platform-adapter.ts

@@ -1,5 +1,7 @@
 export const IS_CF_PAGES = typeof process === 'undefined';
 
+export const IS_VERCEL = typeof process !== 'undefined' && process.env.VERCEL;
+
 // This hack is to prevent `node` modules/packages being bundled in the
 // Cloudflare Pages context, which causes an error.
 export async function safeRequireNodeDependency(module: string) {

package.json

@@ -7,6 +7,7 @@
   "scripts": {
     "build:cf": "cross-env CF_PAGES=1 remix build",
     "build:nf": "cross-env NETLIFY=1 remix build",
+    "build:vl": "cross-env VERCEL=1 remix build",
     "build": "remix build",
     "dev:wrangler": "cross-env CF_PAGES=1 wrangler pages dev ./public",
     "dev": "remix dev",

remix.config.js

@@ -3,20 +3,27 @@ import { createRoutesFromFolders } from '@remix-run/v1-route-convention';
 /**
  * @type {import('@remix-run/dev').AppConfig}
  */
-const commonConfig = {
-  appDirectory: 'app',
-  serverModuleFormat: 'esm',
+const bareConfig = {
   serverDependenciesToBundle: [
     'remix-i18next',
     '@remix-validated-form/with-zod',
   ],
-  tailwind: true,
   routes(defineRoutes) {
     // uses the v1 convention, works in v1.15+ and v2
     return createRoutesFromFolders(defineRoutes);
   },
 };
 
+/**
+ * @type {import('@remix-run/dev').AppConfig}
+ */
+const commonConfig = {
+  appDirectory: 'app',
+  serverModuleFormat: 'esm',
+  tailwind: true,
+  ...bareConfig,
+};
+
 /**
  * @type {import('@remix-run/dev').AppConfig}
  */
@@ -28,6 +35,13 @@ const cloudflarePagesConfig = {
   serverMinify: true,
   ...commonConfig,
 };
+/**
+ * @type {import('@remix-run/dev').AppConfig}
+ */
+const vercelConfig = {
+  ignoredRouteFiles: ['**/.*'],
+  ...bareConfig,
+};
 /**
  * @type {import('@remix-run/dev').AppConfig}
  */
@@ -61,11 +75,13 @@ const buildConfig = {
 };
 
 function selectConfig() {
-  if (!['development', 'production'].includes(process.env.NODE_ENV))
-    throw new Error(`Unknown NODE_ENV: ${process.env.NODE_ENV}`);
+  const ENV = process.env?.NODE_ENV || process.env?.VERCEL_ENV;
+  if (!['preview', 'development', 'production'].includes(ENV))
+    throw new Error(`Unknown ENV: ${ENV}`);
   if (process.env.CF_PAGES) return cloudflarePagesConfig;
   if (process.env.NETLIFY) return netlifyConfig;
-  if (process.env.NODE_ENV === 'development') return devConfig;
+  if (process.env.VERCEL) return vercelConfig;
+  if (ENV === 'development') return devConfig;
   if (!process.env.CF_PAGES && !process.env.NETLIFY) return buildConfig;
   throw new Error(`Cannot select config`);
 }