Remix uses Vite to compile your application. You'll need to provide a Vite config file with the Remix Vite plugin. Here's the minimum configuration you'll need:
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [remix()],
});
.js
file for your config, but we recommend using TypeScript to help ensure your configuration is valid.
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [
remix({
basename: "/",
buildDirectory: "build",
future: {
/* any enabled future flags */
},
ignoredRouteFiles: ["**/*.css"],
routes(defineRoutes) {
return defineRoutes((route) => {
route("/somewhere/cool/*", "catchall.tsx");
});
},
serverBuildFile: "index.js",
}),
],
});
The path to the app
directory, relative to the project root. Defaults to
"app"
.
The future
config lets you opt-into future breaking changes via 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.
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.
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [
remix({
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");
});
});
},
}),
],
});
The output format of the server build, which can either be "cjs"
or "esm"
.
Defaults to "esm"
.
The path to the build directory, relative to the project root. Defaults to
"build"
.
An optional basename for your route paths, passed through to the React Router "basename" option. Please note that this is different from your asset paths. You can can configure the base public path for your assets via the Vite "base" option.
A function that is called after the full Remix build is complete.
Whether to write a .remix/manifest.json
file to the build directory. Defaults
to false
.
An array of presets to ease integration with other tools and hosting providers.
The name of the server file generated in the server build directory. Defaults to "index.js"
.
A function for assigning addressable routes to server bundles.
You may also want to enable the manifest
option since, when server bundles are enabled, it contains mappings between routes and server bundles.