{"library":"remix-middleware","title":"Remix Middleware","description":"remix-middleware provides an Express-like middleware stack for Remix's `loader` and `action` functions, allowing developers to centralize cross-cutting concerns such as authentication, logging, and response manipulation. Currently at version `0.1.1`, this library is still considered experimental, indicating that its API may evolve rapidly. It differentiates itself by deeply integrating with Remix's server-side data functions and offering specialized middleware for common Remix patterns, including streamlined integration with `remix-auth`. While there isn't a fixed release cadence, development appears active, with several minor releases building out core features and addressing early architectural concerns, particularly around preventing server-only code from being bundled for the browser.","language":"javascript","status":"active","last_verified":"Thu Apr 23","install":{"commands":["npm install remix-middleware"],"cli":null},"imports":["import { createMiddleware } from 'remix-middleware';","import { isAuthenticated } from 'remix-middleware';","import type { AuthCtx } from 'remix-middleware';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { createMiddleware, isAuthenticated } from 'remix-middleware';\nimport type { ActionFunction, LoaderFunction } from '@remix-run/node'; // Or '@remix-run/react' depending on Remix version\n\n// For remix-auth integration (optional)\n// import { Authenticator } from 'remix-auth';\n// import { sessionStorage } from './session';\n// interface User { id: string; email: string; }\n// export const authenticator = new Authenticator<User>(sessionStorage);\n\n// ./app/middleware.ts\nexport const mdw = createMiddleware();\n\nmdw.use(async (ctx, next) => {\n  console.log('middleware activated for', ctx.request.url);\n  // ctx.request and ctx.response are available here\n  await next();\n  console.log('middleware completed for', ctx.request.url);\n});\n\n// Example using remix-auth middleware (uncomment if using remix-auth)\n// export const authed = createMiddleware<AuthCtx<User>>();\n// authed.use(isAuthenticated(authenticator, { failureRedirect: '/login' }));\n// authed.use(authed.routes());\n\nmdw.use(mdw.routes()); // Important: This must be called at the end of the middleware stack\n\n// ./app/routes/posts/index.tsx\n// Assuming you have a file at `~/middleware.ts`\n// import { mdw } from '~/middleware';\n// import { Form, useLoaderData } from '@remix-run/react';\n\ninterface Post { id: string; title: string; }\n\nexport const loader: LoaderFunction = (props) =>\n  mdw.run(props, (ctx) => {\n    // Simulate fetching data\n    ctx.response = [\n      { id: '1', title: 'My First Post' },\n      { id: '2', title: 'A Mixtape I Made Just For You' }\n    ];\n  });\n\nexport const action: ActionFunction = (props) =>\n  mdw.run(props, async (ctx) => {\n    const body = await ctx.request.formData();\n    const post = { id: '3', title: String(body.get('title')) };\n    ctx.response = post;\n  });\n\n// export default function Posts() {\n//   const posts = useLoaderData<Post[]>();\n//   return (\n//     <div>\n//       <h1>Posts</h1>\n//       <div>{posts.map((post) => (<div key={post.id}>{post.title}</div>))}\n//       </div>\n//       <Form method=\"post\"><p><label>Title: <input name=\"title\" type=\"text\" /></label></p><p><button type=\"submit\">Create</button></p></Form>\n//     </div>\n//   );\n// }","lang":"typescript","description":"This example demonstrates how to set up `remix-middleware` with a global logger and then apply it to a Remix `loader` and `action` to process requests and set responses, including basic form handling. It also outlines the optional setup for `remix-auth` integration.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}