✨ feat: Add tailwind and cloudflare support

apps/www/.gitignore

@@ -39,3 +39,6 @@ lerna-debug.log*
 # Yarn
 .yarn/*
 !.yarn/releases
+
+# Cloudflare
+functions/**/*.js

apps/www/README.md

@@ -63,3 +63,50 @@ The production build will generate client and server modules by running both cli
 ```shell
 bun build # or `bun build`
 ```
+
+## Cloudflare Pages
+
+Cloudflare's [wrangler](https://github.com/cloudflare/wrangler) CLI can be used to preview a production build locally. To start a local server, run:
+
+```
+bun serve
+```
+
+Then visit [http://localhost:8787/](http://localhost:8787/)
+
+### Deployments
+
+[Cloudflare Pages](https://pages.cloudflare.com/) are deployable through their [Git provider integrations](https://developers.cloudflare.com/pages/platform/git-integration/).
+
+If you don't already have an account, then [create a Cloudflare account here](https://dash.cloudflare.com/sign-up/pages). Next go to your dashboard and follow the [Cloudflare Pages deployment guide](https://developers.cloudflare.com/pages/framework-guides/deploy-anything/).
+
+Within the projects "Settings" for "Build and deployments", the "Build command" should be `bun build`, and the "Build output directory" should be set to `dist`.
+
+### Function Invocation Routes
+
+Cloudflare Page's [function-invocation-routes config](https://developers.cloudflare.com/pages/platform/functions/routing/#functions-invocation-routes) can be used to include, or exclude, certain paths to be used by the worker functions. Having a `_routes.json` file gives developers more granular control over when your Function is invoked.
+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.
+
+By default, the Cloudflare pages adaptor _does not_ include a `public/_routes.json` config, but rather it is auto-generated from the build by the Cloudflare adaptor. An example of an auto-generate `dist/_routes.json` would be:
+
+```
+{
+  "include": [
+    "/*"
+  ],
+  "exclude": [
+    "/_headers",
+    "/_redirects",
+    "/build/*",
+    "/favicon.ico",
+    "/manifest.json",
+    "/service-worker.js",
+    "/about"
+  ],
+  "version": 1
+}
+```
+
+In the above example, it's saying _all_ pages should be SSR'd. However, the root static files such as `/favicon.ico` and any static assets in `/build/*` should be excluded from the Functions, and instead treated as a static file.
+
+In most cases the generated `dist/_routes.json` file is ideal. However, if you need more granular control over each path, you can instead provide you're own `public/_routes.json` file. When the project provides its own `public/_routes.json` file, then the Cloudflare adaptor will not auto-generate the routes config and instead use the committed one within the `public` directory.

apps/www/adapters/cloudflare-pages/vite.config.ts

@@ -0,0 +1,15 @@
+import { cloudflarePagesAdapter } from "@builder.io/qwik-city/adapters/cloudflare-pages/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.cloudflare-pages.tsx", "@qwik-city-plan"],
+      },
+    },
+    plugins: [cloudflarePagesAdapter()],
+  };
+});

apps/www/package.json

@@ -15,20 +15,25 @@
     "build": "qwik build",
     "build.client": "vite build",
     "build.preview": "vite build --ssr src/entry.preview.tsx",
+    "build.server": "vite build -c adapters/cloudflare-pages/vite.config.ts",
     "build.types": "tsc --incremental --noEmit",
-    "deploy": "echo 'Run \"npm run qwik add\" to install a server adapter'",
+    "deploy": "wrangler pages deploy ./dist",
     "dev": "vite --mode ssr",
     "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
     "fmt": "prettier --write .",
     "fmt.check": "prettier --check .",
     "lint": "eslint \"src/**/*.ts*\"",
     "preview": "qwik build preview && vite preview --open",
+    "serve": "wrangler pages dev ./dist --compatibility-flags=nodejs_als",
     "start": "vite --open --mode ssr",
     "qwik": "qwik"
   },
   "devDependencies": {
     "@builder.io/qwik": "^1.8.0",
     "@builder.io/qwik-city": "^1.8.0",
+    "@nestri/eslint-config": "workspace:*",
+    "@nestri/typescript-config": "workspace:*",
+    "@nestri/ui": "workspace:*",
     "@types/eslint": "8.56.10",
     "@types/node": "20.14.11",
     "@typescript-eslint/eslint-plugin": "7.16.1",
@@ -39,6 +44,7 @@
     "typescript": "5.4.5",
     "undici": "*",
     "vite": "5.3.5",
-    "vite-tsconfig-paths": "^4.2.1"
+    "vite-tsconfig-paths": "^4.2.1",
+    "wrangler": "^3.0.0"
   }
 }

apps/www/postcss.config.cjs

@@ -0,0 +1 @@
+module.exports = require("@nestri/ui/postcss");

apps/www/public/_headers

@@ -0,0 +1,9 @@
+# https://developers.cloudflare.com/pages/platform/headers/
+
+/*service-worker.js
+  Cache-Control: no-store
+  Content-Type: application/javascript
+  X-Content-Type-Options: nosniff
+
+/build/*
+  Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable

apps/www/public/_redirects

@@ -0,0 +1 @@
+# https://developers.cloudflare.com/pages/platform/redirects/

apps/www/src/entry.cloudflare-pages.tsx

@@ -0,0 +1,24 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * It's the entry point for Cloudflare Pages when building for production.
+ *
+ * Learn more about the Cloudflare Pages integration here:
+ * - https://qwik.dev/docs/deployments/cloudflare-pages/
+ *
+ */
+import {
+  createQwikCity,
+  type PlatformCloudflarePages,
+} from "@builder.io/qwik-city/middleware/cloudflare-pages";
+import qwikCityPlan from "@qwik-city-plan";
+import { manifest } from "@qwik-client-manifest";
+import render from "./entry.ssr";
+
+declare global {
+  interface QwikCityPlatform extends PlatformCloudflarePages {}
+}
+
+const fetch = createQwikCity({ render, qwikCityPlan, manifest });
+
+export { fetch };

apps/www/src/root.tsx

@@ -7,7 +7,7 @@ import {
 import { RouterHead } from "./components/router-head/router-head";
 import { isDev } from "@builder.io/qwik/build";
 
-import "./global.css";
+import "@nestri/ui/globals.css";
 
 export default component$(() => {
   /**

apps/www/src/routes/index.tsx

@@ -3,14 +3,9 @@ import type { DocumentHead } from "@builder.io/qwik-city";
 
 export default component$(() => {
   return (
-    <>
-      <h1>Hi 👋</h1>
-      <div>
-        Can't wait to see what you build with qwik!
-        <br />
-        Happy coding.
-      </div>
-    </>
+    <div class="bg-primary-500 h-screen w-screen">
+
+    </div>
   );
 });
 

apps/www/tailwind.config.js

@@ -0,0 +1,11 @@
+// import colors from "tailwindcss/colors";
+import baseConfig from "@nestri/ui/tailwind.config";
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./{src,components,app}/**/*.{ts,tsx,html}",
+    "../../packages/ui/src/**/*.{ts,tsx}",
+  ],
+  presets: [baseConfig],
+  plugins: [],
+};

apps/www/tsconfig.json

@@ -21,5 +21,5 @@
     }
   },
   "files": ["./.eslintrc.cjs"],
-  "include": ["src", "./*.d.ts", "./*.config.ts"]
+  "include": ["src", "./*.d.ts", "./*.config.ts", "./*.config.js", "postcss.config.cjs"]
 }