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..1214518a8b8 --- /dev/null +++ b/starters/servers/netlify/README.md @@ -0,0 +1,36 @@ +## Netlify + +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. +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 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. 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..16ed0167465 --- /dev/null +++ b/starters/servers/netlify/package.json @@ -0,0 +1,13 @@ +{ + "description": "Netlify Edge Functions.", + "scripts": { + "serve": "netlify dev", + "build.ssr": "vite build --ssr src/entry.netlify.ts" + }, + "devDependencies": { + "@netlify/vite-plugin-netlify-edge": "^1.1.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/entry.netlify.ts b/starters/servers/netlify/src/entry.netlify.ts new file mode 100644 index 00000000000..f683212102d --- /dev/null +++ b/starters/servers/netlify/src/entry.netlify.ts @@ -0,0 +1,27 @@ +import { render } from './entry.ssr'; + +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..fecad8cb0bb --- /dev/null +++ b/starters/servers/netlify/vite.config.ts @@ -0,0 +1,16 @@ +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({ + ssr: { outDir: '.netlify/edge-functions/entry.netlify' }, + }), + netlifyEdge({ + functionName: 'entry.netlify', + }), + ], + }; +});