astro/packages/integrations/vercel/README.md

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

65 lines
2.3 KiB
Markdown
Raw Normal View History

2022-03-30 02:11:27 +00:00
# @astrojs/vercel
2022-03-28 13:05:55 +00:00
2022-03-30 02:11:27 +00:00
Deploy your server-side rendered (SSR) Astro app to [Vercel](https://www.vercel.com/).
2022-03-28 13:05:55 +00:00
2022-03-30 02:11:27 +00:00
Use this integration in your Astro configuration file:
2022-03-28 13:05:55 +00:00
```js
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';
2022-03-28 13:05:55 +00:00
export default defineConfig({
2022-03-31 18:12:43 +00:00
adapter: vercel()
2022-03-28 13:05:55 +00:00
});
```
When you build your project, Astro will know to use the `.vercel/output` folder format that Vercel expects.
2022-03-28 13:05:55 +00:00
## Deploying
2022-04-21 21:31:45 +00:00
You can deploy by CLI (`vercel deploy`) or by connecting your new repo in the [Vercel Dashboard](https://vercel.com/). Alternatively, you can create a production build locally:
```sh
ENABLE_VC_BUILD=1 astro build
vercel deploy --prebuilt
```
2022-04-21 21:31:45 +00:00
## Requirements
2022-03-28 13:05:55 +00:00
**Vercel's [Build Output API](https://vercel.com/docs/build-output-api/v3) must be enabled.** You must enable it yourself by setting the environment variable: `ENABLE_VC_BUILD=1`.
2022-04-21 21:31:45 +00:00
```js
// vercel.json
{
"build": {
"env": {
"ENABLE_VC_BUILD": "1"
2022-04-21 21:31:45 +00:00
}
}
}
2022-03-28 13:05:55 +00:00
```
2022-04-21 21:24:09 +00:00
2022-04-21 21:31:45 +00:00
[Learn more about setting enviroment variables in Vercel](https://vercel.com/docs/concepts/projects/environment-variables).
## Targets
You can deploy to different targes:
- `edge`: SSR inside a [Edge function](https://vercel.com/docs/concepts/functions/edge-functions).
- `serverless`: SSR inside a [Node.js function](https://vercel.com/docs/concepts/functions/serverless-functions).
- `static`: generates a static website following Vercel's output formats, redirects, etc.
> **Note**: deploying to the Edge has [its limitations](https://vercel.com/docs/concepts/functions/edge-functions#known-limitations) — they can't be more than 1 MB in size and they don't support native Node.js APIs, among others.
You can change where to target by changing the import:
```js
import vercel from '@astrojs/vercel/edge';
import vercel from '@astrojs/vercel/serverless';
import vercel from '@astrojs/vercel/static';
```
2022-04-21 21:24:09 +00:00
## Limitations
2022-04-21 21:31:45 +00:00
**A few known complex packages (example: [puppeteer](https://github.com/puppeteer/puppeteer)) do not support bundling and therefore will not work properly with this adapter.** By default, Vercel doesn't include npm installed files & packages from your project's `./node_modules` folder. To address this, the `@astrojs/vercel` adapter automatically bundles your final build output using `esbuild`.