From 67c4780170b06060c84fbc2e7a40a9ef337f0517 Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Tue, 10 May 2022 16:19:07 +0100 Subject: [PATCH 1/7] feat: add Netlify starter --- starters/servers/netlify/.node-version | 1 + starters/servers/netlify/README.md | 3 +++ starters/servers/netlify/netlify.toml | 3 +++ starters/servers/netlify/package.json | 12 ++++++++++ starters/servers/netlify/public/_headers | 2 ++ starters/servers/netlify/src/handler.ts | 28 ++++++++++++++++++++++++ starters/servers/netlify/tsconfig.json | 17 ++++++++++++++ starters/servers/netlify/vite.config.ts | 15 +++++++++++++ 8 files changed, 81 insertions(+) create mode 100644 starters/servers/netlify/.node-version create mode 100644 starters/servers/netlify/README.md create mode 100644 starters/servers/netlify/netlify.toml create mode 100644 starters/servers/netlify/package.json create mode 100644 starters/servers/netlify/public/_headers create mode 100644 starters/servers/netlify/src/handler.ts create mode 100644 starters/servers/netlify/tsconfig.json create mode 100644 starters/servers/netlify/vite.config.ts diff --git a/starters/servers/netlify/.node-version b/starters/servers/netlify/.node-version new file mode 100644 index 00000000000..b6a7d89c68e --- /dev/null +++ b/starters/servers/netlify/.node-version @@ -0,0 +1 @@ +16 diff --git a/starters/servers/netlify/README.md b/starters/servers/netlify/README.md new file mode 100644 index 00000000000..6230dd53305 --- /dev/null +++ b/starters/servers/netlify/README.md @@ -0,0 +1,3 @@ +## Netlify + +todo diff --git a/starters/servers/netlify/netlify.toml b/starters/servers/netlify/netlify.toml new file mode 100644 index 00000000000..d1edf8c94fa --- /dev/null +++ b/starters/servers/netlify/netlify.toml @@ -0,0 +1,3 @@ +[build] +publish = "dist" +command = "npm run build" diff --git a/starters/servers/netlify/package.json b/starters/servers/netlify/package.json new file mode 100644 index 00000000000..bf1621fab3e --- /dev/null +++ b/starters/servers/netlify/package.json @@ -0,0 +1,12 @@ +{ + "description": "Netlify Edge Functions.", + "scripts": { + "serve": "netlify dev" + }, + "devDependencies": { + "@netlify/vite-plugin-netlify-edge": "^1.0.0" + }, + "qwik": { + "priority": -1 + } +} diff --git a/starters/servers/netlify/public/_headers b/starters/servers/netlify/public/_headers new file mode 100644 index 00000000000..08e5e27d5e0 --- /dev/null +++ b/starters/servers/netlify/public/_headers @@ -0,0 +1,2 @@ +/build/* + Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable diff --git a/starters/servers/netlify/src/handler.ts b/starters/servers/netlify/src/handler.ts new file mode 100644 index 00000000000..d4bb692eeb6 --- /dev/null +++ b/starters/servers/netlify/src/handler.ts @@ -0,0 +1,28 @@ +// @ts-ignore +import { render } from './entry.server'; + +const handler = async (request: Request) => { + try { + // Handle static files + if (/\.\w+$/.test(request.url)) { + return; + } + + const ssrResult = await render({ + url: request.url, + base: '/build/', + }); + + const response = new Response(ssrResult.html, { + headers: { + 'Content-Type': 'text/html; charset=utf-8', + }, + }); + return response; + } catch (e) { + // 500 Error + return new Response(String(e), { status: 500 }); + } +}; + +export default handler; diff --git a/starters/servers/netlify/tsconfig.json b/starters/servers/netlify/tsconfig.json new file mode 100644 index 00000000000..77e4810e930 --- /dev/null +++ b/starters/servers/netlify/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "target": "ES2017", + "module": "ES2020", + "lib": ["es2020", "DOM"], + "jsx": "react-jsx", + "jsxImportSource": "@builder.io/qwik", + "strict": true, + "resolveJsonModule": true, + "moduleResolution": "node", + "esModuleInterop": true, + "skipLibCheck": true, + "incremental": true, + "types": ["vite/client"] + }, + "include": ["src"] +} diff --git a/starters/servers/netlify/vite.config.ts b/starters/servers/netlify/vite.config.ts new file mode 100644 index 00000000000..a316cbdda3d --- /dev/null +++ b/starters/servers/netlify/vite.config.ts @@ -0,0 +1,15 @@ +import { defineConfig } from 'vite'; +import netlifyEdge from '@netlify/vite-plugin-netlify-edge'; +import { qwikVite } from '@builder.io/qwik/optimizer'; + +export default defineConfig(() => { + return { + plugins: [ + qwikVite({ + outServerDir: '.netlify/edge-functions/handler', + srcEntryServerInput: 'handler.ts', + }), + netlifyEdge(), + ], + }; +}); From d548fa9b4795cd81197bc3a2a8950d03b677a528 Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Tue, 17 May 2022 10:09:17 +0100 Subject: [PATCH 2/7] fix: include manifest --- starters/servers/netlify/src/handler.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/starters/servers/netlify/src/handler.ts b/starters/servers/netlify/src/handler.ts index d4bb692eeb6..94f1af98b5a 100644 --- a/starters/servers/netlify/src/handler.ts +++ b/starters/servers/netlify/src/handler.ts @@ -1,5 +1,6 @@ -// @ts-ignore import { render } from './entry.server'; +import manifest from '../dist/q-manifest.json'; +import type { QwikManifest } from '@builder.io/qwik/optimizer'; const handler = async (request: Request) => { try { @@ -11,6 +12,7 @@ const handler = async (request: Request) => { const ssrResult = await render({ url: request.url, base: '/build/', + manifest: manifest as QwikManifest, }); const response = new Response(ssrResult.html, { From 3b23f12c98dd0bcfe8e8e18346cb9f257ac44a42 Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Tue, 17 May 2022 11:03:38 +0100 Subject: [PATCH 3/7] chore: add Netlify README --- starters/servers/netlify/README.md | 34 +++++++++++++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/starters/servers/netlify/README.md b/starters/servers/netlify/README.md index 6230dd53305..d5de1f298ea 100644 --- a/starters/servers/netlify/README.md +++ b/starters/servers/netlify/README.md @@ -1,3 +1,35 @@ ## Netlify -todo +This site is configured to deploy to [Netlify Edge Functions](https://www.netlify.com/products/edge/), which means it will be rendered at an edge location near to your users. + +The [Netlify CLI](https://docs.netlify.com/cli/get-started/) can be used to preview a production build locally. First build your site, then to start a local server, run: + +```shell +npm run serve +``` + +Then visit [http://localhost:8888/](http://localhost:8888/) to see the site. + +### Deployments + +You can [deploy your site to Netlify](https://docs.netlify.com/site-deploys/create-deploys/) either via a Git provider integration or through the Netlify CLI. This site already includes a `netlify.toml` file to configure your build. + +#### Deploying via Git + +Once your site has been pushed to your Git provider, you can either link it [in the Netlify UI](https://app.netlify.com/start) or use the CLI. To link the site to a Git provider from the Netlify CLI, run the command: + +```shell +netlify link +``` + +It will then deploy the site whenever you push new commits to Git. + +#### Deploying manually via the CLI + +If you wish to deploy from the CLI rather than using Git, you can use the command: + +```shell +netlify deploy --build +``` + +You must ensure you use the `--build` flag whenever you deploy. From 32d67e9e62a77b4bdb807d1df750cc98d088178d Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Tue, 17 May 2022 19:55:29 +0100 Subject: [PATCH 4/7] refactor: changes to reflect new options --- starters/servers/netlify/package.json | 7 ++++--- .../servers/netlify/src/{handler.ts => entry.netlify.ts} | 5 +---- starters/servers/netlify/vite.config.ts | 8 +++++--- 3 files changed, 10 insertions(+), 10 deletions(-) rename starters/servers/netlify/src/{handler.ts => entry.netlify.ts} (72%) diff --git a/starters/servers/netlify/package.json b/starters/servers/netlify/package.json index bf1621fab3e..a0e3072eacf 100644 --- a/starters/servers/netlify/package.json +++ b/starters/servers/netlify/package.json @@ -1,12 +1,13 @@ { "description": "Netlify Edge Functions.", "scripts": { - "serve": "netlify dev" + "serve": "netlify dev", + "build.ssr": "vite build --ssr src/entry.netlify.ts" }, "devDependencies": { - "@netlify/vite-plugin-netlify-edge": "^1.0.0" + "@netlify/vite-plugin-netlify-edge": "^1.1.0" }, "qwik": { "priority": -1 } -} +} \ No newline at end of file diff --git a/starters/servers/netlify/src/handler.ts b/starters/servers/netlify/src/entry.netlify.ts similarity index 72% rename from starters/servers/netlify/src/handler.ts rename to starters/servers/netlify/src/entry.netlify.ts index 94f1af98b5a..f683212102d 100644 --- a/starters/servers/netlify/src/handler.ts +++ b/starters/servers/netlify/src/entry.netlify.ts @@ -1,6 +1,4 @@ -import { render } from './entry.server'; -import manifest from '../dist/q-manifest.json'; -import type { QwikManifest } from '@builder.io/qwik/optimizer'; +import { render } from './entry.ssr'; const handler = async (request: Request) => { try { @@ -12,7 +10,6 @@ const handler = async (request: Request) => { const ssrResult = await render({ url: request.url, base: '/build/', - manifest: manifest as QwikManifest, }); const response = new Response(ssrResult.html, { diff --git a/starters/servers/netlify/vite.config.ts b/starters/servers/netlify/vite.config.ts index a316cbdda3d..8461ee08cb4 100644 --- a/starters/servers/netlify/vite.config.ts +++ b/starters/servers/netlify/vite.config.ts @@ -1,15 +1,17 @@ import { defineConfig } from 'vite'; import netlifyEdge from '@netlify/vite-plugin-netlify-edge'; import { qwikVite } from '@builder.io/qwik/optimizer'; +import manifest from './dist/q-manifest.json'; export default defineConfig(() => { return { plugins: [ qwikVite({ - outServerDir: '.netlify/edge-functions/handler', - srcEntryServerInput: 'handler.ts', + ssr: { outDir: '.netlify/edge-functions/handler', manifestInput: manifest }, + }), + netlifyEdge({ + functionName: 'entry.netlify', }), - netlifyEdge(), ], }; }); From 0fc4986e690a50d52147d0f8cbe96e423d1f3e52 Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Wed, 18 May 2022 08:06:41 +0100 Subject: [PATCH 5/7] fix: make manifest work --- starters/servers/netlify/vite.config.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/starters/servers/netlify/vite.config.ts b/starters/servers/netlify/vite.config.ts index 8461ee08cb4..fecad8cb0bb 100644 --- a/starters/servers/netlify/vite.config.ts +++ b/starters/servers/netlify/vite.config.ts @@ -1,13 +1,12 @@ import { defineConfig } from 'vite'; import netlifyEdge from '@netlify/vite-plugin-netlify-edge'; import { qwikVite } from '@builder.io/qwik/optimizer'; -import manifest from './dist/q-manifest.json'; export default defineConfig(() => { return { plugins: [ qwikVite({ - ssr: { outDir: '.netlify/edge-functions/handler', manifestInput: manifest }, + ssr: { outDir: '.netlify/edge-functions/entry.netlify' }, }), netlifyEdge({ functionName: 'entry.netlify', From 236ddfb4034a483f0a830eb4a6d1d5ee2a431834 Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Wed, 18 May 2022 19:12:09 +0100 Subject: [PATCH 6/7] docs: apply suggestions from code review Co-authored-by: Kyle Rollins --- starters/servers/netlify/README.md | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/starters/servers/netlify/README.md b/starters/servers/netlify/README.md index d5de1f298ea..0ccf9d8871d 100644 --- a/starters/servers/netlify/README.md +++ b/starters/servers/netlify/README.md @@ -1,28 +1,27 @@ ## Netlify -This site is configured to deploy to [Netlify Edge Functions](https://www.netlify.com/products/edge/), which means it will be rendered at an edge location near to your users. +This starter site is configured to deploy to [Netlify Edge Functions](https://www.netlify.com/products/edge/), which means it will be rendered at an edge location near to your users. -The [Netlify CLI](https://docs.netlify.com/cli/get-started/) can be used to preview a production build locally. First build your site, then to start a local server, run: - -```shell -npm run serve -``` - -Then visit [http://localhost:8888/](http://localhost:8888/) to see the site. +### Local development +The [Netlify CLI](https://docs.netlify.com/cli/get-started/) can be used to preview a production build locally. To do so: First build your site, then to start a local server, run: +1. Build your site with `netlify build`. +2. Start a local server with `npm run serve`. + In this project, `npm run serve` uses the `netlify dev` command to spin up a server that can handle Netlify's Edge Functions locally. +3. Visit [http://localhost:8888/](http://localhost:8888/) to check out your site. ### Deployments -You can [deploy your site to Netlify](https://docs.netlify.com/site-deploys/create-deploys/) either via a Git provider integration or through the Netlify CLI. This site already includes a `netlify.toml` file to configure your build. +You can [deploy your site to Netlify](https://docs.netlify.com/site-deploys/create-deploys/) either via a Git provider integration or through the Netlify CLI. This starter site includes a `netlify.toml` file to configure your build for deployment. #### Deploying via Git -Once your site has been pushed to your Git provider, you can either link it [in the Netlify UI](https://app.netlify.com/start) or use the CLI. To link the site to a Git provider from the Netlify CLI, run the command: +Once your site has been pushed to your Git provider, you can either link it [in the Netlify UI](https://app.netlify.com/start) or use the CLI. To link your site to a Git provider from the Netlify CLI, run the command: ```shell netlify link ``` -It will then deploy the site whenever you push new commits to Git. +This sets up [continuous deployment](https://docs.netlify.com/site-deploys/create-deploys/#deploy-with-git) for your site's repo. Whenever you push new commits to your repo, Netlify starts the build process.. #### Deploying manually via the CLI @@ -32,4 +31,4 @@ If you wish to deploy from the CLI rather than using Git, you can use the comman netlify deploy --build ``` -You must ensure you use the `--build` flag whenever you deploy. +You must use the `--build` flag whenever you deploy. This ensures that the Edge Functions that this starter site relies on are generated and available when you deploy your site. From 1168d05c167122b8722f2beb922f3136340b5120 Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Thu, 26 May 2022 08:46:14 +0100 Subject: [PATCH 7/7] chore: format --- starters/servers/netlify/README.md | 4 +++- starters/servers/netlify/package.json | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/starters/servers/netlify/README.md b/starters/servers/netlify/README.md index 0ccf9d8871d..1214518a8b8 100644 --- a/starters/servers/netlify/README.md +++ b/starters/servers/netlify/README.md @@ -3,10 +3,12 @@ This starter site is configured to deploy to [Netlify Edge Functions](https://www.netlify.com/products/edge/), which means it will be rendered at an edge location near to your users. ### Local development + The [Netlify CLI](https://docs.netlify.com/cli/get-started/) can be used to preview a production build locally. To do so: First build your site, then to start a local server, run: + 1. Build your site with `netlify build`. 2. Start a local server with `npm run serve`. - In this project, `npm run serve` uses the `netlify dev` command to spin up a server that can handle Netlify's Edge Functions locally. + In this project, `npm run serve` uses the `netlify dev` command to spin up a server that can handle Netlify's Edge Functions locally. 3. Visit [http://localhost:8888/](http://localhost:8888/) to check out your site. ### Deployments diff --git a/starters/servers/netlify/package.json b/starters/servers/netlify/package.json index a0e3072eacf..16ed0167465 100644 --- a/starters/servers/netlify/package.json +++ b/starters/servers/netlify/package.json @@ -10,4 +10,4 @@ "qwik": { "priority": -1 } -} \ No newline at end of file +}