feat(qwik-nx): netlify integration (#111)

Author: dmitry-stepanenko

e2e/qwik-nx-e2e/tests/qwik-nx-cloudflare.spec.ts

@@ -43,8 +43,6 @@ describe('qwik nx cloudflare generator', () => {
       await runNxCommandAsync(
         `generate qwik-nx:cloudflare-pages-integration ${project} --no-interactive`
       );
-
-      // move header component into the library
     }, DEFAULT_E2E_TIMEOUT);
 
     it(

e2e/qwik-nx-e2e/tests/qwik-nx-netlify.spec.ts

@@ -0,0 +1,79 @@
+import {
+  checkFilesExist,
+  ensureNxProject,
+  runNxCommandAsync,
+  uniq,
+} from '@nx/plugin/testing';
+
+import {
+  runCommandUntil,
+  promisifiedTreeKill,
+  killPort,
+  killPorts,
+  DEFAULT_E2E_TIMEOUT,
+} from '@qwikifiers/e2e/utils';
+
+const NETLIFY_PREVIEW_PORT = 8888;
+
+describe('qwik nx netlify generator', () => {
+  beforeAll(async () => {
+    await killPorts(NETLIFY_PREVIEW_PORT);
+    ensureNxProject('qwik-nx', 'dist/packages/qwik-nx');
+  }, 10000);
+
+  afterAll(async () => {
+    await runNxCommandAsync('reset');
+  });
+
+  describe('should build and serve a project with the netlify adapter', () => {
+    let project: string;
+    beforeAll(async () => {
+      project = uniq('qwik-nx');
+      await runNxCommandAsync(
+        `generate qwik-nx:app ${project} --no-interactive`
+      );
+      await runNxCommandAsync(
+        `generate qwik-nx:netlify-integration ${project} --no-interactive`
+      );
+    }, DEFAULT_E2E_TIMEOUT);
+
+    it(
+      'should be able to successfully build the application',
+      async () => {
+        const result = await runNxCommandAsync(`build-netlify ${project}`);
+        expect(result.stdout).toContain(
+          `Successfully ran target build for project ${project}`
+        );
+        expect(() =>
+          checkFilesExist(`dist/apps/${project}/client/q-manifest.json`)
+        ).not.toThrow();
+        expect(() =>
+          checkFilesExist(
+            `dist/apps/${project}/.netlify/edge-functions/entry.netlify-edge/entry.netlify-edge.js`
+          )
+        ).not.toThrow();
+      },
+      DEFAULT_E2E_TIMEOUT
+    );
+
+    it(
+      'should serve application in preview mode with custom port',
+      async () => {
+        const p = await runCommandUntil(
+          `run ${project}:preview-netlify`,
+          (output) => {
+            console.log(output);
+            return output.includes('Server now ready on http://localhost:8888');
+          }
+        );
+        try {
+          await promisifiedTreeKill(p.pid!, 'SIGKILL');
+          await killPort(NETLIFY_PREVIEW_PORT);
+        } catch {
+          // ignore
+        }
+      },
+      DEFAULT_E2E_TIMEOUT
+    );
+  });
+});

packages/qwik-nx/executors.json

@@ -15,6 +15,11 @@
       "implementation": "./src/executors/micro-frontends-preview-server/executor",
       "schema": "./src/executors/micro-frontends-preview-server/schema.json",
       "description": "Serve a host application along with its known remotes in a preview mode."
+    },
+    "exec": {
+      "implementation": "./src/executors/exec/executor",
+      "schema": "./src/executors/exec/schema.json",
+      "description": "Run a single command using child_process. It is a simplified version of \"nx:run-commands\" executor that allows running interactive commands."
     }
   }
 }

packages/qwik-nx/generators.json

@@ -53,7 +53,12 @@
     "cloudflare-pages-integration": {
       "factory": "./src/generators/integrations/cloudflare-pages-integration/generator",
       "schema": "./src/generators/integrations/cloudflare-pages-integration/schema.json",
-      "description": "Qwik City Cloudflare Pages adaptor allows you to connect Qwik City to Cloudflare Pages"
+      "description": "Qwik City Cloudflare Pages adapter allows you to connect Qwik City to Cloudflare Pages"
+    },
+    "netlify-integration": {
+      "factory": "./src/generators/integrations/netlify/generator",
+      "schema": "./src/generators/integrations/netlify/schema.json",
+      "description": "Qwik City Netlify Edge adapter allows you to connect Qwik City to Netlify Edge Functions."
     },
     "host": {
       "factory": "./src/generators/host/generator",

packages/qwik-nx/src/executors/exec/executor.ts

@@ -0,0 +1,35 @@
+import { execSync } from 'node:child_process';
+import { ExecExecutorSchema } from './schema';
+import { ExecutorContext } from '@nx/devkit';
+import { isAbsolute, join } from 'path';
+
+const LARGE_BUFFER = 1024 * 1000000;
+
+function calculateCwd(
+  cwd: string | undefined,
+  context: ExecutorContext
+): string {
+  if (!cwd) return context.root;
+  if (isAbsolute(cwd)) return cwd;
+  return join(context.root, cwd);
+}
+
+export default async function runExecutor(
+  options: ExecExecutorSchema,
+  context: ExecutorContext
+) {
+  let success = false;
+  try {
+    execSync(options.command, {
+      stdio: [0, 1, 2],
+      cwd: calculateCwd(options.cwd, context),
+      maxBuffer: LARGE_BUFFER,
+    });
+    success = true;
+  } catch {
+    success = false;
+  }
+  return {
+    success,
+  };
+}

packages/qwik-nx/src/executors/exec/schema.d.ts

@@ -0,0 +1,4 @@
+export interface ExecExecutorSchema {
+  command: string;
+  cwd?: string;
+}

packages/qwik-nx/src/executors/exec/schema.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "version": 2,
+  "title": "Run a single command",
+  "description": "Run a single command using child_process. It is a simplified version of \"nx:run-commands\" executor that allows running interactive commands.",
+  "type": "object",
+  "outputCapture": "direct-nodejs",
+  "properties": {
+    "command": {
+      "type": "string",
+      "description": "Command to run in child process.",
+      "x-priority": "important"
+    },
+    "cwd": {
+      "type": "string",
+      "description": "Current working directory of the commands. If it's not specified the commands will run in the workspace root, if a relative path is specified the commands will run in that path relative to the workspace root and if it's an absolute path the commands will run in that path."
+    }
+  },
+  "required": ["command"]
+}

packages/qwik-nx/src/generators/integrations/cloudflare-pages-integration/generator.ts

@@ -18,6 +18,7 @@ import {
 } from '../../../utils/integration-configuration-name';
 import { nxCloudflareWrangler, wranglerVersion } from '../../../utils/versions';
 import { CloudflarePagesIntegrationGeneratorSchema } from './schema';
+import { isQwikNxProject } from '../../../utils/migrations';
 
 interface NormalizedOptions {
   offsetFromRoot: string;
@@ -34,11 +35,8 @@ export async function cloudflarePagesIntegrationGenerator(
       'Cannot setup cloudflare integration for the given project.'
     );
   }
-  if (config.targets?.['build']?.executor !== 'qwik-nx:build') {
-    throw new Error(
-      'Project contains invalid configuration. ' +
-        'If you encounter this error within a Qwik project, make sure you have run necessary Nx migrations for qwik-nx plugin.'
-    );
+  if (!isQwikNxProject(config)) {
+    throw new Error('Project contains invalid configuration.');
   }
 
   const configurationName = getIntegrationConfigurationName(

packages/qwik-nx/src/generators/integrations/netlify/__snapshots__/generator.spec.ts.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`netlify-integration generator should add required targets 1`] = `
+Array [
+  Object {
+    "path": "apps/test-project/adapters/netlify/vite.config.ts",
+    "type": "CREATE",
+  },
+  Object {
+    "path": "apps/test-project/public/_headers",
+    "type": "CREATE",
+  },
+  Object {
+    "path": "apps/test-project/src/entry.netlify-edge.tsx",
+    "type": "CREATE",
+  },
+]
+`;

packages/qwik-nx/src/generators/integrations/netlify/files/adapters/netlify/vite.config.ts.template

@@ -0,0 +1,39 @@
+import { netlifyEdgeAdapter } from '@builder.io/qwik-city/adapters/netlify-edge/vite';
+import { extendConfig } from '@builder.io/qwik-city/vite';
+import { qwikVite } from '@builder.io/qwik/optimizer';
+import { UserConfig, Plugin } from 'vite';
+import { join } from 'path';
+import baseConfig from '../../vite.config';
+
+const modified: UserConfig = {
+  ...baseConfig,
+  // vite does not override plugins in it's "mergeConfig" util
+  plugins: (baseConfig as UserConfig).plugins?.filter(
+    (p) => (p as Plugin)?.name !== 'vite-plugin-qwik'
+  ),
+};
+export default extendConfig(modified, () => {
+  const outDir = 'dist/<%= projectRoot %>';
+  const ssrOutDir = join(outDir, '.netlify/edge-functions/entry.netlify-edge');
+
+  return {
+    build: {
+      ssr: true,
+      rollupOptions: {
+        input: ['<%= projectRoot %>/src/entry.netlify-edge.tsx', '@qwik-city-plan'],
+      },
+      outDir: ssrOutDir,
+    },
+    plugins: [
+      netlifyEdgeAdapter(),
+      qwikVite({
+        client: {
+          outDir: join('<%= offsetFromRoot %>', outDir, 'client'),
+        },
+        ssr: {
+          outDir: join('<%= offsetFromRoot %>', ssrOutDir),
+        },
+      }),
+    ],
+  };
+});