feat(demos): enable SSR for FA-in-FA demo and fix externals config (#326

)

packages/demos/src/feature-app-in-feature-app/index.test.ts

@@ -6,6 +6,7 @@ import {Server} from 'http';
 import {AddressInfo} from 'net';
 import {Browser} from '../browser';
 import {startServer} from '../start-server';
+import renderApp from './integrator.node';
 import webpackConfigs from './webpack-config';
 
 jest.setTimeout(60000);
@@ -14,17 +15,32 @@ describe('integration test: "Feature App in Feature App"', () => {
   const browser = new Browser(5000);
 
   let server: Server;
+  let url: string;
 
   beforeAll(async () => {
-    server = await startServer(webpackConfigs, undefined);
+    server = await startServer(webpackConfigs, renderApp);
 
     const {port} = server.address() as AddressInfo;
 
+    url = `http://localhost:${port}/`;
+
     await browser.goto(`http://localhost:${port}`, 60000);
   });
 
   afterAll(done => server.close(done));
 
+  it('loads the server-side rendered HTML of the Feature App with another nested Feature App', async () => {
+    // We need to disable JavaScript for this test to ensure that the server-rendered HTML is observed.
+    await page.setJavaScriptEnabled(false);
+    await browser.goto(url);
+
+    await expect(page).toMatch('Hello, World!');
+
+    // Re-enable JavaScript to restore the default behavior for all other tests.
+    await page.setJavaScriptEnabled(true);
+    await browser.goto(url);
+  });
+
   it('renders a Feature App with another nested Feature App', async () => {
     await expect(page).toMatch('Hello, World!');
   });

packages/demos/src/feature-app-in-feature-app/integrator.node.tsx

@@ -0,0 +1,33 @@
+import {FeatureAppManager, FeatureServiceRegistry} from '@feature-hub/core';
+import {loadCommonJsModule} from '@feature-hub/module-loader-commonjs';
+import {FeatureAppLoader, FeatureHubContextProvider} from '@feature-hub/react';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/server';
+import {AppRendererOptions, AppRendererResult} from '../start-server';
+
+export default async function renderApp({
+  port
+}: AppRendererOptions): Promise<AppRendererResult> {
+  const featureAppNodeUrl = `http://localhost:${port}/feature-app.commonjs.js`;
+  const featureServiceRegistry = new FeatureServiceRegistry();
+
+  const featureAppManager = new FeatureAppManager(featureServiceRegistry, {
+    moduleLoader: loadCommonJsModule
+  });
+
+  // In a real-world integrator, instead of preloading a Feature App manually
+  // before rendering, the Async SSR Manager would be used to handle the
+  // asynchronous server-side rendering (see "Server-Side Rendering" demo).
+  await featureAppManager.preloadFeatureApp(featureAppNodeUrl);
+
+  const html = ReactDOM.renderToString(
+    <FeatureHubContextProvider value={{featureAppManager}}>
+      <FeatureAppLoader
+        src="feature-app.umd.js"
+        serverSrc={featureAppNodeUrl}
+      />
+    </FeatureHubContextProvider>
+  );
+
+  return {html};
+}

packages/demos/src/feature-app-in-feature-app/webpack-config.ts

@@ -2,20 +2,33 @@ import {join} from 'path';
 import {Configuration} from 'webpack';
 import {webpackBaseConfig} from '../webpack-base-config';
 
+const featureAppConfig: Configuration = {
+  ...webpackBaseConfig,
+  entry: join(__dirname, './feature-app-outer.tsx'),
+  externals: {
+    react: 'react',
+    '@feature-hub/react': '@feature-hub/react'
+  }
+};
+
 export default [
   {
-    ...webpackBaseConfig,
-    entry: join(__dirname, './feature-app-outer.tsx'),
-    externals: {
-      react: 'react',
-      '@feature-hub/react': '@feature-hub/react'
-    },
+    ...featureAppConfig,
     output: {
       filename: 'feature-app.umd.js',
       libraryTarget: 'umd',
       publicPath: '/'
     }
   },
+  {
+    ...featureAppConfig,
+    output: {
+      filename: 'feature-app.commonjs.js',
+      libraryTarget: 'commonjs2',
+      publicPath: '/'
+    },
+    target: 'node'
+  },
   {
     ...webpackBaseConfig,
     entry: join(__dirname, './integrator.tsx'),

packages/demos/src/module-loader-commonjs/integrator.node.tsx

@@ -15,6 +15,9 @@ export default async function renderApp({
     moduleLoader: loadCommonJsModule
   });
 
+  // In a real-world integrator, instead of preloading a Feature App manually
+  // before rendering, the Async SSR Manager would be used to handle the
+  // asynchronous server-side rendering (see "Server-Side Rendering" demo).
   await featureAppManager.preloadFeatureApp(featureAppNodeUrl);
 
   const html = ReactDOM.renderToString(

packages/demos/src/server-side-rendering/webpack-config.ts

@@ -2,22 +2,25 @@ import {join} from 'path';
 import {Configuration} from 'webpack';
 import {webpackBaseConfig} from '../webpack-base-config';
 
+const featureAppConfig: Configuration = {
+  ...webpackBaseConfig,
+  entry: join(__dirname, './feature-app.tsx'),
+  externals: {
+    react: 'react'
+  }
+};
+
 export default [
   {
-    ...webpackBaseConfig,
-    entry: join(__dirname, './feature-app.tsx'),
-    externals: {
-      react: 'react'
-    },
+    ...featureAppConfig,
     output: {
       filename: 'feature-app.umd.js',
       libraryTarget: 'umd',
       publicPath: '/'
     }
   },
   {
-    ...webpackBaseConfig,
-    entry: join(__dirname, './feature-app.tsx'),
+    ...featureAppConfig,
     output: {
       filename: 'feature-app.commonjs.js',
       libraryTarget: 'commonjs2',