Serve Files in your Astro app hosted on Vercel

See my resume in the top right corner? When you click, you'll be presented with my resume PDF. I'll show you how to do the exact thing.

Astro is capable of doing the same feature but since we're hosted on Vercel, we're going to make use of the Serverless Function feature to be able to serve non-HTML responses whenever we receive a request.

First, set up a Vercel local deployment environment. Serverless functions will not work locally with npm run dev.

Be sure to install vercel globally with the -g flag or the CLI will not run.

npm i -g vercel
vercel dev 

Now place your cv.pdf in the public folder of your project.

api
public/
└── cv.pdf
src
.env
...

Add a directory called "api" in the root of your Astro project and add a JS file named "resume.pdf.js" into that folder.

├── api/
│   └── cv.pdf.js
├── public
├── src
├── .env
└── ...

Next, in the 'cv.pdf.js' file, add the following code snippet:

import { readFileSync } from 'fs';
import path from 'path';

export default function handler(req, res) {
    const file = path.join(process.cwd(), 'public', 'resume.pdf');
    var b = Buffer.from(readFileSync(file, 'binary'), 'binary');
  
    res.setHeader('Content-Type', 'application/pdf');
    return res.end(b);
}

If you're on your local development environment, test the route at http://localhost:3000/api/cv.pdf.

You should see something this:

Viola! File Served with Vercel in an Astro app

I hope you learned something. Thanks for reading!