remix.config.js is only relevant when using the Classic Remix Compiler. When using Remix Vite, this file should not be present in your project. Instead, Remix configuration should be provided to the Remix plugin in your Vite config.
This file has a few build and development configuration options, but does not actually run on your server.
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
appDirectory: "app",
assetsBuildDirectory: "public/build",
future: {
/* any enabled future flags */
},
ignoredRouteFiles: ["**/*.css"],
publicPath: "/build/",
routes(defineRoutes) {
return defineRoutes((route) => {
route("/somewhere/cool/*", "catchall.tsx");
});
},
serverBuildPath: "build/index.js",
};
The path to the app directory, relative to remix.config.js. Defaults to
"app".
// default
exports.appDirectory = "./app";
// custom
exports.appDirectory = "./elsewhere";
The path to the browser build, relative to remix.config.js. Defaults to "public/build". Should be deployed to static hosting.
The Node.js polyfills to include in the browser build. Polyfills are provided by JSPM and configured via esbuild-plugins-node-modules-polyfill.
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
browserNodeBuiltinsPolyfill: {
modules: {
buffer: true, // Provide a JSPM polyfill
fs: "empty", // Provide an empty polyfill
},
globals: {
Buffer: true,
},
},
};
When using this option and targeting non-Node.js server platforms, you may also want to configure Node.js polyfills for the server via serverNodeBuiltinsPolyfill.
The path to a directory Remix can use for caching things in development,
relative to remix.config.js. Defaults to ".cache".
The future config lets you opt-into future breaking changes via Future Flags. Please see the Current Future Flags section for a list of all available Future Flags.
This is an array of globs (via minimatch) that Remix will match to
files while reading your app/routes directory. If a file matches, it will be
ignored rather than treated like a route module. This is useful for ignoring
CSS/test files you wish to colocate.
The URL prefix of the browser build with a trailing slash. Defaults to
"/build/". This is the path the browser will use to find assets.
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
publicPath: "/assets/",
};
If you wish to serve static assets from a separate domain you may also specify an absolute path:
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
publicPath: "https://static.example.com/assets/",
};
Whether to process CSS using PostCSS if a PostCSS config file is present. Defaults to true.
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
postcss: false,
};
A function for defining custom routes, in addition to those already defined
using the filesystem convention in app/routes. Both sets of routes will be merged.
exports.routes = async (defineRoutes) => {
// If you need to do async work, do it before calling `defineRoutes`, we use
// the call stack of `route` inside to set nesting.
return defineRoutes((route) => {
// A common use for this is catchall routes.
// - The first argument is the React Router path to match against
// - The second is the relative filename of the route handler
route("/some/path/*", "catchall.tsx");
// if you want to nest routes, use the optional callback argument
route("some/:path", "some/route/file.js", () => {
// - path is relative to parent path
// - filenames are still relative to the app directory
route("relative/path", "some/other/file");
});
});
};
A server entrypoint, relative to the root directory that becomes your server's
main module. If specified, Remix will compile this file along with your
application into a single file to be deployed to your server. This file can use
either a .js or .ts file extension.
The path to the server build file, relative to remix.config.js. This file
should end in a .js extension and should be deployed to your server. Defaults
to "build/index.js".
The order of conditions to use when resolving server dependencies' exports
field in package.json.
A list of regex patterns that determines if a module is transpiled and included in the server bundle. This can be useful when consuming ESM only packages in a CJS build, or when consuming packages with CSS side effect imports.
For example, the unified ecosystem is all ESM-only. Let's also say we're using
a @sindresorhus/slugify which is ESM-only as well. Here's how you would be
able to consume those packages in a CJS app without having to use dynamic
imports:
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
appDirectory: "app",
assetsBuildDirectory: "public/build",
publicPath: "/build/",
serverBuildPath: "build/index.js",
ignoredRouteFiles: ["**/*.css"],
serverDependenciesToBundle: [
/^rehype.*/,
/^remark.*/,
/^unified.*/,
"@sindresorhus/slugify",
],
};
If you want to bundle all server dependencies, you can set
serverDependenciesToBundle to "all".
The order of main fields to use when resolving server dependencies. Defaults to
["main", "module"] when serverModuleFormat is set to "cjs". Defaults to
["module", "main"] when serverModuleFormat is set to "esm".
Whether to minify the server build in production or not. Defaults to false.
The output format of the server build, which can either be "cjs" or "esm".
Defaults to "esm".
The Node.js polyfills to include in the server build when targeting non-Node.js server platforms. Polyfills are provided by JSPM and configured via esbuild-plugins-node-modules-polyfill.
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
serverNodeBuiltinsPolyfill: {
modules: {
buffer: true, // Provide a JSPM polyfill
fs: "empty", // Provide an empty polyfill
},
globals: {
Buffer: true,
},
},
};
When using this option, you may also want to configure Node.js polyfills for the browser via browserNodeBuiltinsPolyfill.
The platform the server build is targeting, which can either be "neutral" or
"node". Defaults to "node".
Whether to support Tailwind functions and directives in CSS files if tailwindcss is installed. Defaults to true.
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
tailwind: false,
};
An array, string, or async function that defines custom directories, relative to the project root, to watch while running remix dev. These directories are in addition to appDirectory.
exports.watchPaths = async () => {
return ["./some/path/*"];
};
// also valid
exports.watchPaths = ["./some/path/*"];
There are a few conventions that Remix uses you should be aware of.
