feat(demo): Add SSR support

angular.json

@@ -22,11 +22,16 @@
           }
         },
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": "dist/apps/demo",
             "index": "apps/demo/src/index.html",
             "browser": "apps/demo/src/main.ts",
+            "server": "apps/demo/src/main.server.ts",
+            "ssr": {
+              "entry": "apps/demo/server/server.ts"
+            },
+            "outputMode": "server",
             "polyfills": [
               "zone.js"
             ],

apps/demo/package.json

@@ -11,6 +11,9 @@
     "targets": {
       "build": {
         "outputs": ["{workspaceRoot}/dist/apps/demo"]
+      },
+      "serve:ssr": {
+        "dependsOn": ["build"]
       }
     }
   },
@@ -19,7 +22,8 @@
     "lint": "npm run lint:scss && cd ../.. && ng lint demo",
     "lint:fix": "npm run lint -- --fix",
     "lint:scss": "stylelint **/*.scss",
-    "test": "ng test demo --watch=false --browsers=ChromeHeadless"
+    "test": "ng test demo --watch=false --browsers=ChromeHeadless",
+    "serve:ssr": "NG_ALLOWED_HOSTS=localhost node ../../dist/apps/demo/server/server.mjs"
   },
   "homepage": "https://github.com/graycoreio/daffodil",
   "description": "A demo implementation of the @daffodil libraries for ecommerce",

apps/demo/server/server.ts

@@ -0,0 +1,53 @@
+import {
+  AngularNodeAppEngine,
+  createNodeRequestHandler,
+  isMainModule,
+  writeResponseToNodeResponse,
+} from '@angular/ssr/node';
+import express from 'express';
+import { join } from 'node:path';
+
+const browserDistFolder = join(import.meta.dirname, '../browser');
+
+const app = express();
+const angularApp = new AngularNodeAppEngine();
+
+/**
+ * Serve static files from /browser
+ */
+app.use(
+  express.static(browserDistFolder, {
+    maxAge: '1y',
+    index: false,
+    redirect: false,
+  }),
+);
+
+/**
+ * Handle all other requests by rendering the Angular application.
+ */
+app.use((req, res, next) => {
+  angularApp
+    .handle(req)
+    .then((response) =>
+      response ? writeResponseToNodeResponse(response, res) : next(),
+    )
+    .catch(next);
+});
+
+/**
+ * Start the server if this module is the main entry point, or it is ran via PM2.
+ * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
+ */
+if (isMainModule(import.meta.url) || process.env['pm_id']) {
+  const port = process.env['PORT'] || 4000;
+  app.listen(port, () => {
+    // eslint-disable-next-line no-console
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}
+
+/**
+ * Request handler used by the Angular CLI (for dev-server and during build) or Firebase Cloud Functions.
+ */
+export const reqHandler = createNodeRequestHandler(app);

apps/demo/src/app/app.component.spec.ts

@@ -19,10 +19,10 @@ describe('AppComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         RouterTestingModule,
+        AppComponent,
         DemoIndicatorComponent,
       ],
       declarations: [
-        AppComponent,
         MockProductGridContainer,
       ],
     }).compileComponents();

apps/demo/src/app/app.component.ts

@@ -1,11 +1,12 @@
 import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+import { DemoIndicatorComponent } from './routing/indicator/indicator.component';
 
 @Component({
   selector: 'demo-app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
-  standalone: false,
+  imports: [RouterOutlet, DemoIndicatorComponent],
 })
-export class AppComponent {
-  title = 'app';
-}
+export class AppComponent {}

apps/demo/src/app/app.config.server.ts

@@ -0,0 +1,19 @@
+import {
+  mergeApplicationConfig,
+  ApplicationConfig,
+} from '@angular/core';
+import {
+  provideServerRendering,
+  withRoutes,
+} from '@angular/ssr';
+
+import { appConfig } from './app.config';
+import { serverRoutes } from './app.server.routes';
+
+const serverConfig: ApplicationConfig = {
+  providers: [
+    provideServerRendering(withRoutes(serverRoutes)),
+  ],
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);

apps/demo/src/app/app.config.ts

@@ -0,0 +1,66 @@
+import {
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
+import {
+  APP_ID,
+  ApplicationConfig,
+  importProvidersFrom,
+} from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import {
+  provideRouter,
+  withInMemoryScrolling,
+} from '@angular/router';
+import { EffectsModule } from '@ngrx/effects';
+import { provideRouterStore } from '@ngrx/router-store';
+import { StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+
+import {
+  DaffAuthorizeNetPaymentStateModule,
+  DaffAuthorizeNetStateModule,
+} from '@daffodil/authorizenet/state';
+import { daffCartProvideRetrievalActions } from '@daffodil/cart/state';
+import { provideExternalRouter } from '@daffodil/external-router';
+import { DaffPaymentStateModule } from '@daffodil/payment/state';
+
+import { appRoutes } from './app.routes';
+import { environment } from '../environments/environment';
+import { DemoCheckoutStepActionTypes } from './checkout/actions/checkout-step.actions';
+import { provideDemoDrivers } from './drivers/driver.providers';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideAnimations(),
+    importProvidersFrom(
+      StoreModule.forRoot({}),
+      EffectsModule.forRoot([]),
+      StoreDevtoolsModule.instrument({
+        maxAge: 25,
+        logOnly: environment.production,
+        connectInZone: true,
+      }),
+      DaffAuthorizeNetPaymentStateModule,
+      DaffAuthorizeNetStateModule,
+      DaffPaymentStateModule,
+    ),
+    provideRouter(
+      appRoutes,
+      withInMemoryScrolling({ scrollPositionRestoration: 'enabled' }),
+    ),
+    provideExternalRouter(),
+    provideRouterStore(),
+    provideHttpClient(withInterceptorsFromDi()),
+    provideDemoDrivers(),
+    daffCartProvideRetrievalActions(
+      { type: DemoCheckoutStepActionTypes.CompleteAddressStepSuccessAction },
+      { type: DemoCheckoutStepActionTypes.CompleteShippingStepSuccessAction },
+      { type: DemoCheckoutStepActionTypes.CompleteBillingStepSuccessAction },
+    ),
+    {
+      provide: APP_ID,
+      useValue: 'serverApp',
+    },
+  ],
+};

apps/demo/src/app/app-routing.module.ts → apps/demo/src/app/app.routes.ts

@@ -1,10 +1,5 @@
-import { NgModule } from '@angular/core';
-import {
-  Routes,
-  RouterModule,
-} from '@angular/router';
+import { Routes } from '@angular/router';
 
-import { provideExternalRouter } from '@daffodil/external-router';
 import { daffExternalMatcherTypeGuard } from '@daffodil/external-router/routing';
 import {
   DaffProductPageIdResolver,
@@ -32,7 +27,7 @@ export const appRoutes: Routes = [
     ],
     children: [
       { path: 'product-grid', component: ProductGridViewComponent },
-      { path: 'cart',       loadChildren: () => import('./cart/cart.routes').then(m => m.demoCartRoutes) },
+      { path: 'cart', loadChildren: () => import('./cart/cart.routes').then(m => m.demoCartRoutes) },
       {
         path: 'product/:id',
         providers: [
@@ -71,18 +66,3 @@ export const appRoutes: Routes = [
     ],
   },
 ];
-
-@NgModule({
-  imports: [
-    RouterModule.forRoot(appRoutes, {
-      scrollPositionRestoration: 'enabled',
-    }),
-  ],
-  providers: [
-    provideExternalRouter(),
-  ],
-  exports: [
-    RouterModule,
-  ],
-})
-export class AppRoutingModule {}

apps/demo/src/app/app.server.routes.ts

@@ -0,0 +1,11 @@
+import {
+  RenderMode,
+  ServerRoute,
+} from '@angular/ssr';
+
+export const serverRoutes: Array<ServerRoute> = [
+  {
+    path: '**',
+    renderMode: RenderMode.Server,
+  },
+];

apps/demo/src/main.server.ts

@@ -0,0 +1,12 @@
+import {
+  BootstrapContext,
+  bootstrapApplication,
+} from '@angular/platform-browser';
+
+import { AppComponent } from './app/app.component';
+import { config } from './app/app.config.server';
+
+const bootstrap = (context: BootstrapContext) =>
+  bootstrapApplication(AppComponent, config, context);
+
+export default bootstrap;

apps/demo/src/main.ts

@@ -1,13 +1,7 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
 
-import { DemoModule } from './app/app.module';
-import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
 
-if (environment.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic()
-  .bootstrapModule(DemoModule)
+bootstrapApplication(AppComponent, appConfig)
   .catch(err => console.error(err));