Resolid Remix extension package, mainly some plug-ins to enhance Remix and needs to be used with Vite
pnpm add -D @resolid/remix-plugins
Remix uses flat file routing by default, using .
to split URLs. This method is fine for small projects, but it is not comfortable once it encounters large projects, so I developed a routing system that mixes directories and files.
Edit vite.config.ts
file
import { vitePlugin as remix } from "@remix-run/dev";
import remixFlexRoutes from "@resolid/remix-plugins/flex-routes";
export default {
plugins: [
remix({
ignoredRouteFiles: ["**/*"],
routes: async () => {
return await remixFlexRoutes({
ignoredRouteFiles: ["**/.*"],
});
},
}),
],
};
- Routes are defined and nested using folders, very similar to how HTML files are laid out on the nginx server
- The
_layout
file wraps all downstream routes, which require an<Outlet />
to render sub-routes - The
_index
file is the default file for the folder, for example:/users/_index.tsx
will match/users
- Variables are represented by
$
in the file path, for example:/users/$id/edit.tsx
will match/users/123/edit
- Enclosing a route segment in parentheses will make the segment optional, for example:
/($lang)/categories.tsx
will match/categories
,/zh/categories
- You can use
[]
to escape special characters in routing conventions, for example:/make-[$$$]-fast-online.tsx
will match/make-$$$-fast-online
- Files and folders prefixed with
_
become invisible, allowing folder organization without affecting routing paths, for example:/_legal-pages/privacy-policy.tsx
will match/ privacy-policy
$.tsx
splash route will match the rest of the URL, including slashes, e.g./files/$.tsx
will match/files
,/files/one
,/files/one/two
Most of the routing rules are compatible with Remix's routing, but the folder structure is added
The adapter of version 2.0 plug-in uses the Preset function of Remix, so it is only compatible with Remix version 2.8.0 or above.
Adapters are all run based on hono middleware. The default remixHandler is:
import { createRequestHandler } from "@remix-run/node";
export default function remixHandler(build, c) {
const requestHandler = createRequestHandler(build, "production");
return requestHandler(c.req.raw);
}
You can create a new remix.handler.ts
or remix.handler.js
file in the Remix App directory to change the default handler behavior, such as adding an IP address to the Remix loadContext
import { createRequestHandler, type ServerBuild } from "@remix-run/node";
import type { Context } from "hono";
export default function remixHandler(build: ServerBuild, c: Context) {
const requestHandler = createRequestHandler(build, "production");
const remoteAddress = c.req.header("x-vercel-deployment-url")
? c.req.header("x-forwarded-for")
: c.env.incoming.socket.remoteAddress;
return requestHandler(c.req.raw, {
remoteAddress: remoteAddress,
});
}
Package the Remix application into a single server file running on hono, which can be run autonomously on VPS using pm2
pnpm add hono @hono/node-server
Modify the vite.config.ts
file
import { nodeHonoPreset } from "@resolid/remix-plugins/node-hono";
export default {
remix: {
presets: [nodeHonoPreset()]
},
};
This adapter supports the SERVE_PORT
and SERVE_PATH
environment variables. The SERVE_PATH
environment variable is for Remix's serverBundles feature.
After running build,
server.mjs
andpackage.json
files will be automatically generated in thebuild/server
directory. Thepackage.json
file defines thessr.external
set by Vite in the server directory. Runnpm install
to install dependencies excluded during build
You can use https://github.com/huijiewei/remix-vite-vercel-template to quick start deploy to vercel.
pnpm add hono @hono/node-server
Edit the vite.config.ts
file
import { vercelServerlessPreset } from "@resolid/remix-plugins/vercel-serverless";
export default {
remix: {
presets: [vercelServerlessPreset({
// Deployment area
regions: "sin1",
// Some packages will introduce binary packages according to different platforms. The binary packages are not in the same directory during installation, such as @node-rs/bcrypt
copyParentModules: ["@node-rs/bcrypt"]
})]
}
};
Vercel project Framework Preset needs to be set to Vite, Node.js Version needs to be set to 20.x
If you are using a monorepo structure, please set the Root Directory to the project directory that needs to be deployed, and then customize the relevant commands. The configuration of Resolid is as shown below