Skip to content

Commit 41f94f6

Browse files
author
Gianluca La Manna
committed
add vercel edge
1 parent 966c897 commit 41f94f6

File tree

6 files changed

+148
-48
lines changed

6 files changed

+148
-48
lines changed

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -40,3 +40,6 @@ lerna-debug.log*
4040
# Yarn
4141
.yarn/*
4242
!.yarn/releases
43+
44+
# Vercel
45+
.vercel

‎README.md

+44
Original file line numberDiff line numberDiff line change
@@ -63,3 +63,47 @@ The production build will generate client and server modules by running both cli
6363
```shell
6464
npm run build # or `yarn build`
6565
```
66+
67+
## Vercel Edge
68+
69+
This starter site is configured to deploy to [Vercel Edge Functions](https://vercel.com/docs/concepts/functions/edge-functions), which means it will be rendered at an edge location near to your users.
70+
71+
## Installation
72+
73+
The adaptor will add a new `vite.config.ts` within the `adapters/` directory, and a new entry file will be created, such as:
74+
75+
```
76+
└── adapters/
77+
└── vercel-edge/
78+
└── vite.config.ts
79+
└── src/
80+
└── entry.vercel-edge.tsx
81+
```
82+
83+
Additionally, within the `package.json`, the `build.server` script will be updated with the Vercel Edge build.
84+
85+
## Production build
86+
87+
To build the application for production, use the `build` command, this command will automatically run `npm run build.server` and `npm run build.client`:
88+
89+
```shell
90+
npm run build
91+
```
92+
93+
[Read the full guide here](https://github.com/BuilderIO/qwik/blob/main/starters/adapters/vercel-edge/README.md)
94+
95+
## Dev deploy
96+
97+
To deploy the application for development:
98+
99+
```shell
100+
npm run deploy
101+
```
102+
103+
Notice that you might need a [Vercel account](https://docs.Vercel.com/get-started/) in order to complete this step!
104+
105+
## Production deploy
106+
107+
The project is ready to be deployed to Vercel. However, you will need to create a git repository and push the code to it.
108+
109+
You can [deploy your site to Vercel](https://vercel.com/docs/concepts/deployments/overview) either via a Git provider integration or through the Vercel CLI.

‎adapters/vercel-edge/vite.config.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { vercelEdgeAdapter } from "@builder.io/qwik-city/adapters/vercel-edge/vite";
2+
import { extendConfig } from "@builder.io/qwik-city/vite";
3+
import baseConfig from "../../vite.config";
4+
5+
export default extendConfig(baseConfig, () => {
6+
return {
7+
build: {
8+
ssr: true,
9+
rollupOptions: {
10+
input: ["src/entry.vercel-edge.tsx", "@qwik-city-plan"],
11+
},
12+
outDir: ".vercel/output/functions/_qwik-city.func",
13+
},
14+
plugins: [vercelEdgeAdapter()],
15+
};
16+
});

‎package.json

+50-48
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,52 @@
11
{
2-
"name": "storefront-qwik-boilerplate",
3-
"description": "Vue Storefront Qwik Boilerplate",
4-
"engines": {
5-
"node": ">=15.0.0"
6-
},
7-
"private": true,
8-
"scripts": {
9-
"build": "qwik build",
10-
"build.client": "vite build",
11-
"build.preview": "vite build --ssr src/entry.preview.tsx",
12-
"build.types": "tsc --incremental --noEmit",
13-
"deploy": "echo 'Run \"npm run qwik add\" to install a server adapter'",
14-
"dev": "vite --mode ssr",
15-
"dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
16-
"fmt": "prettier --write .",
17-
"fmt.check": "prettier --check .",
18-
"lint": "eslint \"src/**/*.ts*\"",
19-
"preview": "qwik build preview && vite preview --open",
20-
"start": "vite --open --mode ssr",
21-
"qwik": "qwik"
22-
},
23-
"devDependencies": {
24-
"@builder.io/qwik": "^1.2.6",
25-
"@builder.io/qwik-city": "^1.2.6",
26-
"@savvywombat/tailwindcss-grid-areas": "^3.1.0",
27-
"@storefront-ui/react": "^2.5.0",
28-
"@storefront-ui/typography": "^2.3.1",
29-
"@types/eslint": "8.40.2",
30-
"@types/node": "^20.4.0",
31-
"@typescript-eslint/eslint-plugin": "5.61.0",
32-
"@typescript-eslint/parser": "5.61.0",
33-
"autoprefixer": "^10.4.14",
34-
"eslint": "8.44.0",
35-
"eslint-plugin-qwik": "^1.2.6",
36-
"postcss": "^8.4.23",
37-
"prettier": "2.8.8",
38-
"qwik-speak": "^0.15.1",
39-
"tailwindcss": "^3.3.1",
40-
"typescript": "5.1.6",
41-
"undici": "5.22.1",
42-
"vite": "4.4.0",
43-
"vite-tsconfig-paths": "4.2.0"
44-
},
45-
"dependencies": {
46-
"qwik-image": "^0.0.7",
47-
"qwik-storefront-ui": "^0.0.3",
48-
"storefront-qwik-boilerplate": "link:"
49-
}
2+
"name": "storefront-qwik-boilerplate",
3+
"description": "Vue Storefront Qwik Boilerplate",
4+
"engines": {
5+
"node": ">=15.0.0"
6+
},
7+
"private": true,
8+
"scripts": {
9+
"build": "qwik build",
10+
"build.client": "vite build",
11+
"build.preview": "vite build --ssr src/entry.preview.tsx",
12+
"build.server": "vite build -c adapters/vercel-edge/vite.config.ts",
13+
"build.types": "tsc --incremental --noEmit",
14+
"deploy": "vercel deploy",
15+
"dev": "vite --mode ssr",
16+
"dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
17+
"fmt": "prettier --write .",
18+
"fmt.check": "prettier --check .",
19+
"lint": "eslint \"src/**/*.ts*\"",
20+
"preview": "qwik build preview && vite preview --open",
21+
"start": "vite --open --mode ssr",
22+
"qwik": "qwik"
23+
},
24+
"devDependencies": {
25+
"@builder.io/qwik": "^1.2.6",
26+
"@builder.io/qwik-city": "^1.2.6",
27+
"@savvywombat/tailwindcss-grid-areas": "^3.1.0",
28+
"@storefront-ui/react": "^2.5.0",
29+
"@storefront-ui/typography": "^2.3.1",
30+
"@types/eslint": "8.40.2",
31+
"@types/node": "^20.4.0",
32+
"@typescript-eslint/eslint-plugin": "5.61.0",
33+
"@typescript-eslint/parser": "5.61.0",
34+
"autoprefixer": "^10.4.14",
35+
"eslint": "8.44.0",
36+
"eslint-plugin-qwik": "^1.2.6",
37+
"postcss": "^8.4.23",
38+
"prettier": "2.8.8",
39+
"qwik-speak": "^0.15.1",
40+
"tailwindcss": "^3.3.1",
41+
"typescript": "5.1.6",
42+
"undici": "5.22.1",
43+
"vercel": "^29.1.1",
44+
"vite": "4.4.0",
45+
"vite-tsconfig-paths": "4.2.0"
46+
},
47+
"dependencies": {
48+
"qwik-image": "^0.0.7",
49+
"qwik-storefront-ui": "^0.0.3",
50+
"storefront-qwik-boilerplate": "link:"
51+
}
5052
}

‎src/entry.vercel-edge.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/*
2+
* WHAT IS THIS FILE?
3+
*
4+
* It's the entry point for Vercel Edge when building for production.
5+
*
6+
* Learn more about the Vercel Edge integration here:
7+
* - https://qwik.builder.io/docs/deployments/vercel-edge/
8+
*
9+
*/
10+
import {
11+
createQwikCity,
12+
type PlatformVercel,
13+
} from "@builder.io/qwik-city/middleware/vercel-edge";
14+
import qwikCityPlan from "@qwik-city-plan";
15+
import { manifest } from "@qwik-client-manifest";
16+
import render from "./entry.ssr";
17+
18+
declare global {
19+
interface QwikCityPlatform extends PlatformVercel {}
20+
}
21+
22+
export default createQwikCity({ render, qwikCityPlan, manifest });

‎vercel.json

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"headers": [
3+
{
4+
"source": "/build/(.*)",
5+
"headers": [
6+
{
7+
"key": "Cache-Control",
8+
"value": "public, max-age=31536000, s-maxage=31536000, immutable"
9+
}
10+
]
11+
}
12+
]
13+
}

0 commit comments

Comments
 (0)