Fix backend

qwik-graphql-tailwind/.gitignore

@@ -39,4 +39,7 @@ lerna-debug.log*
 .env
 yarn.lock
 
-package-lock.json
+package-lock.json
+
+# Netlify
+.netlify

qwik-graphql-tailwind/.node-version

@@ -0,0 +1 @@
+16

qwik-graphql-tailwind/README.md

@@ -84,3 +84,62 @@ git clone https://github.com/thisdot/starter.dev.git
 ### Demo Implementation
 
 To Be completed
+
+## 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"
+```
+
+### 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.

qwik-graphql-tailwind/adaptors/netlify-edge/vite.config.ts

@@ -0,0 +1,20 @@
+import { netifyEdgeAdaptor } from '@builder.io/qwik-city/adaptors/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: [
+      netifyEdgeAdaptor({
+        staticGenerate: true,
+      }),
+    ],
+  };
+});

qwik-graphql-tailwind/netlify.toml

@@ -0,0 +1,3 @@
+[build]
+publish = "dist"
+command = "npm run build"

qwik-graphql-tailwind/package.json

@@ -13,18 +13,20 @@
   "private": true,
   "scripts": {
     "build": "qwik build",
+    "build-storybook": "build-storybook",
     "build.client": "vite build",
     "build.preview": "vite build --ssr src/entry.preview.tsx",
+    "build.server": "vite build -c adaptors/netlify-edge/vite.config.ts",
     "build.types": "tsc --incremental --noEmit",
     "dev": "vite --mode ssr",
     "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
     "lint": "eslint src/**/*.ts*",
     "prettier": "prettier --write \"**/*.+(ts|tsx)\"",
     "prettier.check": "prettier --check \"**/*.+(ts|tsx)\"",
     "preview": "qwik build preview && vite preview --open",
+    "serve": "netlify deploy",
     "start": "vite --open http://localhost:5173 --mode ssr",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
     "test": "vitest",
     "test.coverage": "vitest --coverage",
     "qwik": "qwik"
@@ -56,6 +58,7 @@
     "eslint-plugin-storybook": "0.6.7",
     "msw": "^0.48.2",
     "msw-storybook-addon": "^1.6.3",
+    "netlify-cli": "^12.0.11",
     "node-fetch": "3.2.10",
     "postcss": "8.4.18",
     "prettier": "2.7.1",

qwik-graphql-tailwind/public/_headers

@@ -0,0 +1,2 @@
+/build/*
+  Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable

qwik-graphql-tailwind/src/entry.netlify-edge.tsx

@@ -0,0 +1,5 @@
+import { createQwikCity } from '@builder.io/qwik-city/middleware/netlify-edge';
+import qwikCityPlan from '@qwik-city-plan';
+import render from './entry.ssr';
+
+export default createQwikCity({ render, qwikCityPlan });

remix-gql-tailwind/package.json

@@ -22,7 +22,7 @@
     "mock": "concurrently -c magenta,cyan \"npm:mock:*\"",
     "mock:remix": "node -r dotenv/config --require ./mocks ./node_modules/@remix-run/dev/cli.js",
     "mock:css": "npm run build:css -- --w",
-    "start": "remix-serve build",
+    "start": "cross-env NODE_ENV=production netlify dev",
     "storybook": "concurrently -n css,storybook -c cyan,magenta \"npm run dev:css\" \"start-storybook -p 6006\"",
     "build-storybook": "build-storybook"
   },
@@ -41,6 +41,8 @@
     "@remix-run/node": "^1.6.1",
     "@remix-run/react": "^1.6.1",
     "@remix-run/serve": "^1.6.1",
+    "@netlify/functions": "^1.3.0",
+    "@remix-run/netlify": "^1.8.1",
     "bcryptjs": "2.4.3",
     "classnames": "^2.3.1",
     "cuid": "^2.1.8",

remix-gql-tailwind/remix.config.js

@@ -8,8 +8,9 @@ module.exports = {
   cacheDirectory: './node_modules/.cache/remix',
   assetsBuildDirectory: 'public/build',
   publicPath: '/_static/build/',
-  serverBuildTarget: 'arc',
-  server: './server.ts',
+  serverBuildTarget: "netlify",
+  server: process.env.NETLIFY || process.env.NETLIFY_LOCAL
+  ? "./server.js" : undefined,
   ignoredRouteFiles: ['**/.*', '**/*.css', '**/*.test.{js,jsx,ts,tsx}'],
   routes(defineRoutes) {
     return defineRoutes((route) => {

remix-gql-tailwind/server.js

@@ -0,0 +1,47 @@
+import { createRequestHandler } from "@remix-run/netlify";
+import * as build from "@remix-run/dev/server-build";
+
+/*
+ * Returns a context object with at most 3 keys:
+ *  - `netlifyGraphToken`: raw authentication token to use with Netlify Graph
+ *  - `clientNetlifyGraphAccessToken`: For use with JWTs generated by
+ *    `netlify-graph-auth`.
+ *  - `netlifyGraphSignature`: a signature for subscription events. Will be
+ *    present if a secret is set.
+ */
+function getLoadContext(event, context) {
+  let rawAuthorizationString;
+  let netlifyGraphToken;
+
+  if (event.authlifyToken != null) {
+    netlifyGraphToken = event.authlifyToken;
+  }
+
+  const authHeader = event.headers["authorization"];
+  const graphSignatureHeader = event.headers["x-netlify-graph-signature"];
+
+  if (authHeader != null && /Bearer /gi.test(authHeader)) {
+    rawAuthorizationString = authHeader.split(" ")[1];
+  }
+
+  const loadContext = {
+    clientNetlifyGraphAccessToken: rawAuthorizationString,
+    netlifyGraphToken: netlifyGraphToken,
+    netlifyGraphSignature: graphSignatureHeader,
+  };
+
+  // Remove keys with undefined values
+  Object.keys(loadContext).forEach((key) => {
+    if (loadContext[key] == null) {
+      delete loadContext[key];
+    }
+  });
+
+  return loadContext;
+}
+
+export const handler = createRequestHandler({
+  build,
+  getLoadContext,
+  mode: process.env.NODE_ENV,
+});

remix-gql-tailwind/yarn.lock

@@ -2667,6 +2667,13 @@
     outvariant "^1.2.1"
     strict-event-emitter "^0.2.0"
 
+"@netlify/functions@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@netlify/functions/-/functions-1.3.0.tgz#4305a3fb6b49caf56cd2be88d4b8534b1d5aff4f"
+  integrity sha512-hN/Fgpz8XIOBfsBPLYUMxVKBlCopgeqGB0popayicnmkFLnvKByTTMYgF01wcF9DBtBQdV0H2h1kPFpMl34I8w==
+  dependencies:
+    is-promise "^4.0.0"
+
 "@nodelib/[email protected]":
   version "2.1.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
@@ -2823,6 +2830,13 @@
   dependencies:
     "@remix-run/node" "1.6.1"
 
+"@remix-run/netlify@^1.8.1":
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/@remix-run/netlify/-/netlify-1.8.2.tgz#709bb73ef8c3313edbc87bb5ef320346f5737f5b"
+  integrity sha512-3x63MglZoYQu3ZAvmybXODmdv6DPTT0/bWpz70Gf3uryh0ihlneVAWpwfrcxQqEv0/gsnvuY/VrhxUmBqigGzg==
+  dependencies:
+    "@remix-run/node" "1.8.2"
+
 "@remix-run/[email protected]", "@remix-run/node@^1.6.1":
   version "1.6.1"
   resolved "https://registry.npmjs.org/@remix-run/node/-/node-1.6.1.tgz"
@@ -2838,6 +2852,21 @@
     source-map-support "^0.5.21"
     stream-slice "^0.1.2"
 
+"@remix-run/[email protected]":
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/@remix-run/node/-/node-1.8.2.tgz#7e8effb3df101f7d24b680d6a4a172272d9f23b0"
+  integrity sha512-I5quBtYVL9jEuToAIcoL5OsyUyC06pr3v619V8/HgrlufBV6fYW6jV6O6GVEf5wpkwEHiCgZQc73jzW6XzqX2Q==
+  dependencies:
+    "@remix-run/server-runtime" "1.8.2"
+    "@remix-run/web-fetch" "^4.3.2"
+    "@remix-run/web-file" "^3.0.2"
+    "@remix-run/web-stream" "^1.0.3"
+    "@web3-storage/multipart-parser" "^1.0.0"
+    abort-controller "^3.0.0"
+    cookie-signature "^1.1.0"
+    source-map-support "^0.5.21"
+    stream-slice "^0.1.2"
+
 "@remix-run/react@^1.6.1":
   version "1.6.1"
   resolved "https://registry.npmjs.org/@remix-run/react/-/react-1.6.1.tgz"
@@ -2846,6 +2875,11 @@
     history "^5.3.0"
     react-router-dom "^6.2.2"
 
+"@remix-run/[email protected]":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.0.5.tgz#d5c65626add4c3c185a89aa5bd38b1e42daec075"
+  integrity sha512-my0Mycd+jruq/1lQuO5LBB6WTlL/e8DTCYWp44DfMTDcXz8DcTlgF0ISaLsGewt+ctHN+yA8xMq3q/N7uWJPug==
+
 "@remix-run/serve@^1.6.1":
   version "1.6.1"
   resolved "https://registry.npmjs.org/@remix-run/serve/-/serve-1.6.1.tgz"
@@ -2869,6 +2903,19 @@
     set-cookie-parser "^2.4.8"
     source-map "^0.7.3"
 
+"@remix-run/[email protected]":
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/@remix-run/server-runtime/-/server-runtime-1.8.2.tgz#87016defd544f936c857fb8fa6236a72e42a474f"
+  integrity sha512-6VLootGC4SyhG1qOOVeXsBrJ3/E3GoQ8YJh5W4IRofO5hNWWy5e4dp/z758RCTGFk4pKGjj64KSnh7NBeS0afA==
+  dependencies:
+    "@remix-run/router" "1.0.5"
+    "@types/cookie" "^0.4.0"
+    "@web3-storage/multipart-parser" "^1.0.0"
+    cookie "^0.4.1"
+    react-router-dom "6.3.0"
+    set-cookie-parser "^2.4.8"
+    source-map "^0.7.3"
+
 "@remix-run/web-blob@^3.0.3", "@remix-run/web-blob@^3.0.4":
   version "3.0.4"
   resolved "https://registry.npmjs.org/@remix-run/web-blob/-/web-blob-3.0.4.tgz"
@@ -2889,6 +2936,19 @@
     data-uri-to-buffer "^3.0.1"
     mrmime "^1.0.0"
 
+"@remix-run/web-fetch@^4.3.2":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@remix-run/web-fetch/-/web-fetch-4.3.2.tgz#193758bb7a301535540f0e3a86c743283f81cf56"
+  integrity sha512-aRNaaa0Fhyegv/GkJ/qsxMhXvyWGjPNgCKrStCvAvV1XXphntZI0nQO/Fl02LIQg3cGL8lDiOXOS1gzqDOlG5w==
+  dependencies:
+    "@remix-run/web-blob" "^3.0.4"
+    "@remix-run/web-form-data" "^3.0.3"
+    "@remix-run/web-stream" "^1.0.3"
+    "@web3-storage/multipart-parser" "^1.0.0"
+    abort-controller "^3.0.0"
+    data-uri-to-buffer "^3.0.1"
+    mrmime "^1.0.0"
+
 "@remix-run/web-file@^3.0.2":
   version "3.0.2"
   resolved "https://registry.npmjs.org/@remix-run/web-file/-/web-file-3.0.2.tgz"
@@ -2903,6 +2963,13 @@
   dependencies:
     web-encoding "1.1.5"
 
+"@remix-run/web-form-data@^3.0.3":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@remix-run/web-form-data/-/web-form-data-3.0.4.tgz#18c5795edaffbc88c320a311766dc04644125bab"
+  integrity sha512-UMF1jg9Vu9CLOf8iHBdY74Mm3PUvMW8G/XZRJE56SxKaOFWGSWlfxfG+/a3boAgHFLTkP7K4H1PxlRugy1iQtw==
+  dependencies:
+    web-encoding "1.1.5"
+
 "@remix-run/web-stream@^1.0.0", "@remix-run/web-stream@^1.0.3":
   version "1.0.3"
   resolved "https://registry.npmjs.org/@remix-run/web-stream/-/web-stream-1.0.3.tgz"
@@ -11283,6 +11350,11 @@ is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
+is-promise@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-4.0.0.tgz#42ff9f84206c1991d26debf520dd5c01042dd2f3"
+  integrity sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==
+
 is-reference@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/is-reference/-/is-reference-3.0.0.tgz"
@@ -15326,6 +15398,14 @@ react-refresh@^0.13.0:
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.13.0.tgz"
   integrity sha512-XP8A9BT0CpRBD+NYLLeIhld/RqG9+gktUjW1FkE+Vm7OCinbG1SshcK5tb9ls4kzvjZr9mOQc7HYgBngEyPAXg==
 
+[email protected], react-router-dom@^6.2.2:
+  version "6.3.0"
+  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz"
+  integrity sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==
+  dependencies:
+    history "^5.2.0"
+    react-router "6.3.0"
+
 react-router-dom@^6.0.0:
   version "6.2.1"
   resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz"
@@ -15334,14 +15414,6 @@ react-router-dom@^6.0.0:
     history "^5.2.0"
     react-router "6.2.1"
 
-react-router-dom@^6.2.2:
-  version "6.3.0"
-  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz"
-  integrity sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==
-  dependencies:
-    history "^5.2.0"
-    react-router "6.3.0"
-
 [email protected], react-router@^6.0.0:
   version "6.2.1"
   resolved "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz"

starter-dev-backend/src/server.js

@@ -30,7 +30,7 @@ app.use(
 );
 app.use(cookieParser(process.env.COOKIE_SECRET));
 app.use(bodyParser.json());
-app.use('/.netlify/functions/server', router); // path must route to lambda
+// app.use('/.netlify/functions/server', router); // path must route to lambda
 
 const router = express.Router();
 router.get('/', (req, res) => {