Vercel middleware / rewrites

[scarlet field]

Hi @hushed lantern. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Sure, I can guide you through the process of setting up a middleware function for Vercel in your Astro application. Here are the steps:

1. First, you need to add a middleware.js file to the root of your project. This file will contain your middleware function. Here's an example of how you can structure it:

export const config = {
 // Only run the middleware on the admin route
 matcher: '/admin',
};

export default function middleware(request) {
 const url = new URL(request.url);
 // You can retrieve IP location or cookies here.
 if (url.pathname === '/admin') {
 url.pathname = '/';
 }
 return Response.redirect(url);
}

This function intercepts a request and redirects before sending a response. It's important to note that currently, rewriting a request with middleware only works for static files.

2. While developing locally, you can run vercel dev to run middleware. In production, Vercel will handle this for you.

If you want to use the Vercel Edge middleware with Astro middleware, you can use the @astrojs/vercel/serverless adapter. This adapter can automatically create the Vercel Edge middleware from an Astro middleware in your code base. This is an opt-in feature, and the build.excludeMiddleware option needs to be set to true in your astro.config.mjs file.

Here's an example of how you can configure it:

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';
export default defineConfig({
 output: 'server',
 adapter: vercel(),
 build: {
 excludeMiddleware: true,
 },
});

You can create a file recognized by the adapter named vercel-edge-middleware.(js|ts) in the srcDir folder to create Astro.locals.

Here's an example of how you can structure it:

/**
 *
 * @param options.request {Request}
 * @param options.context {import("@vercel/edge").RequestContext}
 * @returns {object}
 */
export default function ({ request, context }) {
 // do something with request and context
 return {
 title: "Spider-man's blog",
 };
}

Please note that when you opt in to this feature, there are few constraints to note:

• The Vercel Edge middleware will always be the first function to receive the Request and the last function to receive Response.
• Only request and context may be used to produce an Astro.locals object. Operations like redirects, etc. should be delegated to Astro middleware.
• Astro.locals must be serializable. Failing to do so will result in a runtime error. This means that you cannot store complex types like Map, function, Set, etc.

For more detailed information, you can refer to the Astro documentation (https://docs.astro.build/en/guides/integrations-guide/vercel).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@hushed lantern kapa.ai is still learning and improving, please let us know how it did by reacting below

[hushed lantern]

@scarlet field should the middleware file be in /src or one directory up?

[scarlet field]

Let me check the knowledge base for you. One moment! :books:

---

The location of the middleware file depends on its purpose in your Astro project.

1. For Astro's middleware, you should create a src/middleware.js|ts file in the src directory of your project. This is where you define your middleware functions that can intercept requests and responses, and inject behaviors dynamically. Here's an example from the Astro documentation (https://docs.astro.build/en/guides/middleware):

export function onRequest ({ locals, request }, next) {
 // intercept response data from a request
 // optionally, transform the response by modifying `locals`
 locals.title = "New title";
 // return a Response or the result of calling `next()`
 return next();
};

2. For Vercel Edge middleware, you should add a middleware.js file to the root of your project. This is where you define your middleware function that can intercept a request and redirect before sending a response. Here's an example from the Astro documentation (https://docs.astro.build/en/guides/integrations-guide/vercel):

export const config = {
 // Only run the middleware on the admin route
 matcher: '/admin',
};

export default function middleware(request) {
 const url = new URL(request.url);
 // You can retrieve IP location or cookies here.
 if (url.pathname === '/admin') {
 url.pathname = '/';
 }
 return Response.redirect(url);
}

3. If you want to use the Vercel Edge middleware with Astro middleware, you can create a file recognized by the adapter named vercel-edge-middleware.(js|ts) in the srcDir folder. This is where you define your function that produces an Astro.locals object. Here's an example from the Astro documentation (https://docs.astro.build/en/guides/integrations-guide/vercel):

/**
 *
 * @param options.request {Request}
 * @param options.context {import("@vercel/edge").RequestContext}
 * @returns {object}
 */
export default function ({ request, context }) {
 // do something with request and context
 return {
 title: "Spider-man's blog",
 };
}

Remember to adjust your astro.config.mjs file accordingly based on where you place your middleware files.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@hushed lantern kapa.ai is still learning and improving, please let us know how it did by reacting below

[hushed lantern]

@scarlet field I just want to use vercel middleware, what should my astro.config file look like?

[scarlet field]

Let me check the knowledge base for you. One moment! :books:

---

If you're only using Vercel middleware, your astro.config.mjs file should look something like this:

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
 output: 'server',
 adapter: vercel(),
});

This configuration sets the output mode to 'server' and uses the @astrojs/vercel/serverless adapter for your Astro project.

Remember to install the Vercel adapter to your project’s dependencies using your preferred package manager. If you’re using npm or aren’t sure, run this in the terminal:

npm install @astrojs/vercel

For more detailed information, you can refer to the Astro documentation (https://docs.astro.build/en/guides/integrations-guide/vercel).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@hushed lantern kapa.ai is still learning and improving, please let us know how it did by reacting below

[hushed lantern]

@scarlet field i want to use vercel middleware to rewrite urls using the following matcher. I want to be able to pass the parameters (orgId, collection, timestamp) on the astro.locals object. is this possible? '/timeline/:orgId([0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{1,20})/:collection([0-9a-z]{1,20})'

[scarlet field]

Let me check the knowledge base for you. One moment! :books:

---

Yes, it is possible to pass parameters on the Astro.locals object using Vercel middleware. However, there are a few constraints to note:

• Only request and context may be used to produce an Astro.locals object.
• Astro.locals must be serializable. Failing to do so will result in a runtime error. This means that you cannot store complex types like Map, function, Set, etc.

Here's an example of how you can structure your Vercel middleware function:

export const config = {
  // Define your matcher
  matcher: '/timeline/:orgId([0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{1,20})/:collection([0-9a-z]{1,20})',
};

export default function middleware({ request, context }) {
  const url = new URL(request.url);
  const params = url.pathname.split('/').slice(2); // split the pathname and remove the first empty string

  // Create the Astro.locals object
  const locals = {
    orgId: params[0],
    collection: params[1],
    timestamp: params[2],
  };

  // Do something with locals
  // ...

  return new Response(JSON.stringify(locals));
}

This function intercepts a request, extracts the parameters from the URL, and stores them in the Astro.locals object. Please note that this is a simplified example and you might need to adjust it based on your specific needs.

For more detailed information, you can refer to the Astro documentation (https://docs.astro.build/en/guides/integrations-guide/vercel).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@hushed lantern kapa.ai is still learning and improving, please let us know how it did by reacting below

[hushed lantern]

@scarlet field can you give me some examples of rewriting with middleware and vercel please

[scarlet field]

Let me check the knowledge base for you. One moment! :books:

---

Sure, here's an example of how you can use Vercel middleware to rewrite URLs in your Astro application:

export const config = {
  // Only run the middleware on the admin route
  matcher: '/admin',
};

export default function middleware(request) {
  const url = new URL(request.url);
  // You can retrieve IP location or cookies here.
  if (url.pathname === '/admin') {
    url.pathname = '/';
  }
  return Response.redirect(url);
}

In this example, any request to the /admin route is redirected to the root / route. This is a simple rewrite operation.

However, it's important to note that currently, rewriting a request with middleware only works for static files. Also, while developing locally, you can run vercel dev to run middleware. In production, Vercel will handle this for you.

For more detailed information, you can refer to the Astro documentation (https://docs.astro.build/en/guides/integrations-guide/vercel).

Please note that there's a known bug where rewrites inside of a vercel.json file are not applied. You can track the status of this issue on GitHub (https://github.com/withastro/astro/issues/6446).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@hushed lantern kapa.ai is still learning and improving, please let us know how it did by reacting below

[hushed lantern]

@scarlet field the above example is a redirect rather than a rewrite

[scarlet field]

Let me check the knowledge base for you. One moment! :books: