From 3dca476bdfb73cd007014d3d2140ae83819615c6 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Sat, 10 Feb 2024 21:10:47 +0000 Subject: [PATCH] Netlify SSR compatiblity --- web/.gitignore | 3 ++ web/README.md | 65 +++++++++++++++++++++++ web/adapters/netlify-edge/vite.config.mts | 16 ++++++ web/netlify.toml | 3 ++ web/package.json | 4 ++ web/public/_headers | 2 + web/src/entry.netlify-edge.tsx | 22 ++++++++ 7 files changed, 115 insertions(+) create mode 100644 web/adapters/netlify-edge/vite.config.mts create mode 100644 web/netlify.toml create mode 100644 web/public/_headers create mode 100644 web/src/entry.netlify-edge.tsx diff --git a/web/.gitignore b/web/.gitignore index 6186fd1..2b213a9 100644 --- a/web/.gitignore +++ b/web/.gitignore @@ -42,3 +42,6 @@ lerna-debug.log* # Vercel .vercel + +# Netlify +.netlify diff --git a/web/README.md b/web/README.md index b879397..d2db55e 100644 --- a/web/README.md +++ b/web/README.md @@ -107,3 +107,68 @@ Notice that you might need a [Vercel account](https://docs.Vercel.com/get-starte The project is ready to be deployed to Vercel. However, you will need to create a git repository and push the code to it. 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. + +## Netlify + +This starter site is configured to deploy to [Netlify Edge Functions](https://docs.netlify.com/edge-functions/overview/), 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. Install Netlify CLI globally `npm i -g netlify-cli`. +2. Build your site with both ssr and static `npm run build`. +3. 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. +4. Visit [http://localhost:8888/](http://localhost:8888/) to check out your site. + +### Edge Functions Declarations + +[Netlify Edge Functions declarations](https://docs.netlify.com/edge-functions/declarations/) +can be configured to run on specific URL patterns. Each edge function declaration associates +one site path pattern with one function to execute on requests that match the path. A single request can execute a chain of edge functions from a series of declarations. A single edge function can be associated with multiple paths across various declarations. + +This is useful to determine if a page response should be Server-Side Rendered (SSR) or +if the response should use a static-site generated (SSG) `index.html` file instead. + +By default, the Netlify Edge adaptor will generate a `.netlify/edge-middleware/manifest.json` file, which is used by the Netlify deployment to determine which paths should, and should not, use edge functions. + +To override the generated manifest, you can [add a declaration](https://docs.netlify.com/edge-functions/declarations/#add-a-declaration) to the `netlify.toml` using the `[[edge_functions]]` config. For example: + +```toml +[[edge_functions]] + path = "/admin" + function = "auth" +``` + +### Addition Adapter Options + +Netlify-specific option fields that can be passed to the adapter options: + +- `excludedPath` this option accepts a `string` glob pattern that represents which path pattern should not go through the generated Edge Functions. + +### 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 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 your site to a Git provider from the Netlify CLI, run the command: + +```shell +netlify link +``` + +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 + +If you wish to deploy from the CLI rather than using Git, you can use the command: + +```shell +netlify deploy --build +``` + +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. + +Add `--prod` flag to deploy to production. diff --git a/web/adapters/netlify-edge/vite.config.mts b/web/adapters/netlify-edge/vite.config.mts new file mode 100644 index 0000000..9cd985f --- /dev/null +++ b/web/adapters/netlify-edge/vite.config.mts @@ -0,0 +1,16 @@ +import { netlifyEdgeAdapter } from "@builder.io/qwik-city/adapters/netlify-edge/vite"; +import { extendConfig } from "@builder.io/qwik-city/vite"; +import baseConfig from "../../vite.config"; + +export default extendConfig(baseConfig, () => { + return { + build: { + ssr: true, + rollupOptions: { + input: ["src/entry.netlify-edge.tsx", "@qwik-city-plan"], + }, + outDir: ".netlify/edge-functions/entry.netlify-edge", + }, + plugins: [netlifyEdgeAdapter()], + }; +}); diff --git a/web/netlify.toml b/web/netlify.toml new file mode 100644 index 0000000..d1edf8c --- /dev/null +++ b/web/netlify.toml @@ -0,0 +1,3 @@ +[build] +publish = "dist" +command = "npm run build" diff --git a/web/package.json b/web/package.json index 9cd84f0..d42e984 100644 --- a/web/package.json +++ b/web/package.json @@ -5,8 +5,10 @@ "build.client": "vite build", "build.preview": "vite build --ssr src/entry.preview.tsx", "build.server": "vite build -c adapters/vercel-edge/vite.config.mts", + "build.server.netlify": "vite build -c adapters/netlify-edge/vite.config.mts", "build.types": "tsc --incremental --noEmit", "deploy": "vercel deploy", + "deploy.netlify": "netlify deploy --build", "dev": "vite --mode ssr", "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force", "fmt": "prettier --write .", @@ -18,6 +20,7 @@ }, "devDependencies": { "@builder.io/qwik-city": "^1.1.4", + "@netlify/edge-functions": "^2.0.0", "@types/js-yaml": "^4.0.9", "@types/node": "^20.11.16", "@typescript-eslint/eslint-plugin": "^6.20.0", @@ -27,6 +30,7 @@ "eslint": "^8.56.0", "eslint-plugin-qwik": "^1.4.3", "js-yaml": "^4.1.0", + "netlify-cli": "^15.0.0", "postcss": "^8.4.21", "tailwindcss": "^3.2.4", "typescript": "^5.3.3", diff --git a/web/public/_headers b/web/public/_headers new file mode 100644 index 0000000..08e5e27 --- /dev/null +++ b/web/public/_headers @@ -0,0 +1,2 @@ +/build/* + Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable diff --git a/web/src/entry.netlify-edge.tsx b/web/src/entry.netlify-edge.tsx new file mode 100644 index 0000000..38c8e36 --- /dev/null +++ b/web/src/entry.netlify-edge.tsx @@ -0,0 +1,22 @@ +/* + * WHAT IS THIS FILE? + * + * It's the entry point for Netlify Edge when building for production. + * + * Learn more about the Netlify integration here: + * - https://qwik.builder.io/docs/deployments/netlify-edge/ + * + */ +import { + createQwikCity, + type PlatformNetlify, +} from "@builder.io/qwik-city/middleware/netlify-edge"; +import qwikCityPlan from "@qwik-city-plan"; +import { manifest } from "@qwik-client-manifest"; +import render from "./entry.ssr"; + +declare global { + interface QwikCityPlatform extends PlatformNetlify {} +} + +export default createQwikCity({ render, qwikCityPlan, manifest });