feat!: Initialize micro-frontend (#17)

* build(web): move web entrypoint to grouped folder

* docs: remove unused devops section in README.md

* build: PoC micro-frontned in prod

* build(web-landing): add ui as dependencies

Author: spicyzboss

.eslintignore

@@ -1 +1,3 @@
 node_modules
+
+vite.config.ts

.github/workflows/main.yml

@@ -12,7 +12,6 @@ env:
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
   CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
   CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-  CLOUDFLARE_PAGES_PROJECT_NAME: ${{ vars.CLOUDFLARE_PAGES_PROJECT_NAME }}
   BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
 
 jobs:
@@ -57,4 +56,6 @@ jobs:
         run: pnpm nx affected -t build
 
       - name: Run deploy task
-        run: pnpm nx affected -t deploy -- --project-name=$CLOUDFLARE_PAGES_PROJECT_NAME --branch=$BRANCH_NAME
+        env:
+          VITE_ROOT_FRAGMENT_URL: ${{ vars.ROOT_FRAGMENT_URL }}
+        run: pnpm nx affected -t deploy -- --branch=$BRANCH_NAME

README.md

@@ -1 +1,13 @@
 <h1 align="center">Producktivity</h1>
+
+## References
+
+### Design
+
+- https://m3.material.io/
+
+### Micro-Frontend
+
+- https://qwik.builder.io/docs/advanced/containers/
+- https://blog.cloudflare.com/better-micro-frontends/
+- https://github.com/gioboa/qwik-dream-demo

apps/web-e2e/.eslintrc.json

@@ -0,0 +1,28 @@
+{
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:qwik/recommended", "../../../.eslintrc.json"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": ["apps/web/landing/tsconfig.*?.json"],
+    "ecmaVersion": 2021,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "plugins": ["@typescript-eslint"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

apps/web-e2e/README.md

@@ -0,0 +1,65 @@
+# Qwik City App ⚡️
+
+- [Qwik Docs](https://qwik.builder.io/)
+- [Discord](https://qwik.builder.io/chat)
+- [Qwik GitHub](https://github.com/BuilderIO/qwik)
+- [@QwikDev](https://twitter.com/QwikDev)
+- [Vite](https://vitejs.dev/)
+
+---
+
+## Project Structure
+
+This project is using Qwik with [QwikCity](https://qwik.builder.io/qwikcity/overview/). QwikCity is just a extra set of tools on top of Qwik to make it easier to build a full site, including directory-based routing, layouts, and more.
+
+Inside your project, you'll see the following directory structure:
+
+```
+├── public/
+│   └── ...
+└── src/
+    ├── components/
+    │   └── ...
+    └── routes/
+        └── ...
+```
+
+- `src/routes`: Provides the directory based routing, which can include a hierarchy of `layout.tsx` layout files, and an `index.tsx` file as the page. Additionally, `index.ts` files are endpoints. Please see the [routing docs](https://qwik.builder.io/qwikcity/routing/overview/) for more info.
+
+- `src/components`: Recommended directory for components.
+
+- `public`: Any static assets, like images, can be placed in the public directory. Please see the [Vite public directory](https://vitejs.dev/guide/assets.html#the-public-directory) for more info.
+
+## Add Integrations and deployment
+
+Use the `pnpm qwik add` command to add additional integrations. Some examples of integrations include: Cloudflare, Netlify or Express server, and the [Static Site Generator (SSG)](https://qwik.builder.io/qwikcity/static-site-generation/static-site-config/).
+
+```shell
+pnpm qwik add # or `yarn qwik add`
+```
+
+## Development
+
+Development mode uses [Vite's development server](https://vitejs.dev/). During development, the `dev` command will server-side render (SSR) the output.
+
+```shell
+npm start # or `yarn start`
+```
+
+> Note: during dev mode, Vite may request a significant number of `.js` files. This does not represent a Qwik production build.
+
+## Preview
+
+The preview command will create a production build of the client modules, a production build of `src/entry.preview.tsx`, and run a local server. The preview server is only for convenience to locally preview a production build, and it should not be used as a production server.
+
+```shell
+pnpm preview # or `yarn preview`
+```
+
+## Production
+
+The production build will generate client and server modules by running both client and server build commands. Additionally, the build command will use Typescript to run a type check on the source code.
+
+```shell
+pnpm build # or `yarn build`
+```

apps/web-e2e/playwright.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: ['apps/web/landing/src/entry.cloudflare-pages.tsx', '@qwik-city-plan'],
+      },
+    },
+    plugins: [cloudflarePagesAdapter()],
+  };
+});

apps/web-e2e/project.json

@@ -0,0 +1,3 @@
+{
+  "name": "web-landing"
+}

apps/web-e2e/src/example.spec.ts

@@ -0,0 +1,110 @@
+{
+  "name": "web-landing",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/web/landing/src",
+  "implicitDependencies": ["ui"],
+  "targets": {
+    "build": {
+      "executor": "qwik-nx:build",
+      "options": {
+        "runSequence": ["web-landing:build.client", "web-landing:build.ssr", "web-landing:build.server", "web-landing:build.bundle"],
+        "outputPath": "dist/apps/web/landing"
+      },
+      "dependsOn": [
+        {
+          "dependencies": true,
+          "target": "build",
+          "params": "ignore"
+        }
+      ],
+      "configurations": {
+        "preview": {}
+      }
+    },
+    "build.client": {
+      "executor": "@nx/vite:build",
+      "options": {
+        "outputPath": "dist/apps/web/landing",
+        "configFile": "apps/web/landing/vite.config.ts"
+      }
+    },
+    "build.ssr": {
+      "executor": "@nx/vite:build",
+      "defaultConfiguration": "preview",
+      "options": {
+        "outputPath": "dist/apps/web/landing"
+      },
+      "configurations": {
+        "preview": {
+          "ssr": "src/entry.preview.tsx",
+          "mode": "production"
+        }
+      }
+    },
+    "build.server": {
+      "executor": "@nx/vite:build",
+      "options": {
+        "outputPath": "dist/apps/web/landing",
+        "configFile": "apps/web/landing/adapters/cloudflare-pages/vite.config.ts"
+      }
+    },
+    "build.bundle": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["mkdir -p dist/apps/web/landing/deploy/", "cp -r dist/apps/web/landing/client/* dist/apps/web/landing/deploy/", "cp -r dist/apps/web/landing/server/ dist/apps/web/landing/deploy/server/", "echo 'Bundled to dist/apps/web/landing/deploy'"],
+        "parallel": false
+      }
+    },
+    "deploy": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "wrangler pages deploy dist/apps/web/landing/deploy --project-name=web-landing"
+      }
+    },
+    "preview": {
+      "executor": "@nx/vite:preview-server",
+      "options": {
+        "buildTarget": "web-landing:build",
+        "port": 4201
+      }
+    },
+    "test": {
+      "executor": "@nx/vite:test",
+      "outputs": ["{options.reportsDirectory}"],
+      "options": {
+        "passWithNoTests": true,
+        "reportsDirectory": "../../../coverage/apps/web/landing"
+      }
+    },
+    "serve": {
+      "executor": "@nx/vite:dev-server",
+      "dependsOn": [
+        {
+          "projects": "ui",
+          "target": "build"
+        }
+      ],
+      "options": {
+        "buildTarget": "web-landing:build.client",
+        "mode": "ssr",
+        "port": 3001
+      }
+    },
+    "serve.debug": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "node --inspect-brk ../../../node_modules/vite/bin/vite.js --mode ssr --force",
+        "cwd": "apps/web/landing"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/web/landing/**/*.{ts,tsx,js,jsx}"]
+      }
+    }
+  },
+  "tags": []
+}

apps/web/landing/.eslintrc.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
+  "name": "qwik-project-name",
+  "short_name": "Welcome to Qwik",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#fff",
+  "description": "A Qwik project app."
+}