Merge pull request #17 from bitrise-io/integrations-ssr-enablement

Integrations ssr enablement

Author: aorcsik

.gitignore

@@ -4,9 +4,12 @@
 node_modules
 yarn-error.log
 yarn.lock
+/build
 /dist/*.js
 /dist/*.LICENSE.txt
 /dist/maintenance.html
+/dist/integrations.html
+/dist/integrations/*
 /dist/images/*
 /career-maps.json
 /changelog.json

build.js

@@ -1,3 +1,4 @@
+const path = require('path');
 const webpack = require('webpack');
 const webpackConfigBuilder = require('./webpack.config.js');
 
@@ -14,11 +15,38 @@ const webpackBuild = (config) =>
 
 const { build: buildMaintenance } = require('./src/js/maintenance/build.js');
 
+const buildPath = path.resolve(__dirname, 'build');
+
+const ssrWebpackConfig = {
+  target: 'node',
+  mode: 'production',
+  entry: {
+    integrations: path.resolve(__dirname, 'src/js/integrations/ssr.js'),
+  },
+  output: {
+    path: buildPath,
+    filename: '[name]-ssr.js',
+    library: { type: 'commonjs2' },
+  },
+  resolve: {
+    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
+  },
+  externals: ({ request }, callback) => {
+    if (request && /^[a-zA-Z@]/.test(request)) {
+      callback(null, `commonjs2 ${request}`);
+    } else {
+      callback();
+    }
+  },
+};
+
 const build = async () => {
+  const webpackConfig = webpackConfigBuilder('production');
+
   // Build project with Webpack
   let webpackStats;
   try {
-    webpackStats = await webpackBuild(webpackConfigBuilder('production'));
+    webpackStats = await webpackBuild(webpackConfig);
   } catch (error) {
     webpackStats = error;
   }
@@ -29,9 +57,34 @@ const build = async () => {
     process.stdout.write(`Webpack build completed successfully:\n${webpackStats.toString({ colors: true })}\n\n`);
   }
 
+  /** @type {webpack.Stats} */
+  let webpackSsrStats;
+  try {
+    webpackSsrStats = await webpackBuild(ssrWebpackConfig);
+  } catch (error) {
+    webpackSsrStats = error;
+  }
+  if (webpackSsrStats.hasErrors()) {
+    process.stderr.write(`SSR Webpack build failed:\n${webpackSsrStats.toString({ colors: true })}\n\n`);
+    throw new Error('SSR Webpack build failed');
+  } else {
+    process.stdout.write(
+      `SSR Webpack build completed successfully:\n${webpackSsrStats.toString({ colors: true })}\n\n`,
+    );
+  }
+
+  // eslint-disable-next-line global-require
+  const { render: renderIntegrations } = require('./build/integrations-ssr.js');
+  await renderIntegrations({
+    destination: path.resolve(__dirname, webpackConfig.output.path),
+    templateHostname: 'bitrise.io',
+  });
+
   // Build maintenance.html (depends on dist/404.js from webpack)
-  await buildMaintenance();
-  process.stdout.write('Maintenance page build completed successfully.\n\n');
+  await buildMaintenance({
+    distPath: path.resolve(__dirname, webpackConfig.output.path),
+    srcPath: path.resolve(__dirname, 'src'),
+  });
 };
 
 build().catch((error) => {

index.js

@@ -24,6 +24,7 @@ async function importWorker(workerName, workerPath) {
   const workerContent = (await fs.promises.readFile(workerPath, 'utf8'))
     .toString()
     .replaceAll("ORIGIN_HOST = 'bitrise.io'", `ORIGIN_HOST = '${webflowDomain}'`)
+    .replaceAll("PRERENDERED_HOST = 'webflow-scripts.bitrise.io'", `PRERENDERED_HOST = '${hostname}:${port}'`)
     .replaceAll(
       `urlObject.hostname = 'web-cdn.bitrise.io';`,
       `urlObject.hostname = '${hostname}'; urlObject.port = ${port}; urlObject.search = 'cdn=1';`, // TODO: make this switchable
@@ -160,7 +161,11 @@ const { generateMaintenanceHtml } = require('./src/js/maintenance/build.js');
 app.get('/maintenance.html', async (req, res) => {
   try {
     // In dev, skip JS inlining — style-loader's HMR runtime needs publicPath from script.src
-    const html = await generateMaintenanceHtml({ skipJs: true });
+    const html = await generateMaintenanceHtml({
+      skipJs: true,
+      distPath: path.resolve(__dirname, 'dist'),
+      srcPath: path.resolve(__dirname, 'src'),
+    });
     res.setHeader('Content-Type', 'text/html');
     res.end(html);
   } catch (error) {
@@ -183,7 +188,14 @@ app.get(/\/.*/, async (req, res) => {
     res.statusCode = 200;
     const extname = path.extname(urlObject.pathname);
     if (extname === '.js') res.setHeader('Content-Type', 'text/javascript');
-    if (extname === '.html') res.setHeader('Content-Type', 'text/html');
+    if (extname === '.html') {
+      res.setHeader('Content-Type', 'text/html');
+      let body = content.toString();
+      body = body.replace("document.location.host === 'test-e93bfd.webflow.io'", 'true');
+      body = body.replace('https://webflow-scripts.bitrise.io/', '/');
+      res.end(body);
+      return;
+    }
     if (extname === '.json') res.setHeader('Content-Type', 'application/json');
 
     process.stdout.write(`[info] Serving local file ${filePath}\n`);