feat: add SSR support for dev/build (#182)

Closes #21

apps/analog-app/error.ts

@@ -0,0 +1,3 @@
+export default async function errorHandler(error, event) {
+  event.res.end('error' + error.toString());
+}

apps/analog-app/project.json

@@ -6,7 +6,12 @@
   "targets": {
     "build": {
       "executor": "@nrwl/vite:build",
-      "outputs": ["{options.outputPath}"],
+      "outputs": [
+        "{options.outputPath}",
+        "dist/apps/analog-app/.nitro",
+        "dist/apps/analog-app/ssr",
+        "dist/apps/analog-app/server"
+      ],
       "options": {
         "configFile": "apps/analog-app/vite.config.ts",
         "outputPath": "dist/apps/analog-app/client"

apps/analog-app/src/app/routes/(home).ts

@@ -3,6 +3,7 @@ import { NgForOf, NgIf } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { Component, inject } from '@angular/core';
 import { RouterLinkWithHref } from '@angular/router';
+import { catchError, of } from 'rxjs';
 import { ProductAlertsComponent } from '../product-alerts/product-alerts.component';
 import { Product } from '../products';
 
@@ -54,9 +55,12 @@ export default class ProductListComponent {
   http = inject(HttpClient);
 
   ngOnInit() {
-    this.http.get<Product[]>('/api/v1/products').subscribe((products) => {
-      this.products = products;
-    });
+    this.http
+      .get<Product[]>('/api/v1/products')
+      .pipe(catchError(() => of([])))
+      .subscribe((products) => {
+        this.products = products;
+      });
   }
 
   share() {

apps/analog-app/src/app/routes/products.[productId].ts

@@ -5,6 +5,7 @@ import { injectActivatedRoute } from '@analogjs/router';
 import { Product } from '../products';
 import { CartService } from '../cart.service';
 import { HttpClient } from '@angular/common/http';
+import { catchError, of } from 'rxjs';
 
 @Component({
   selector: 'app-product-details',
@@ -33,12 +34,15 @@ export default class ProductDetailsComponent implements OnInit {
     const routeParams = this.route.parent!.snapshot!.paramMap;
     const productIdFromRoute = Number(routeParams.get('productId'));
 
-    this.http.get<Product[]>('/api/v1/products').subscribe((products) => {
-      // Find the product that correspond with the id provided in route.
-      this.product = products.find(
-        (product) => product.id === productIdFromRoute
-      );
-    });
+    this.http
+      .get<Product[]>('/api/v1/products')
+      .pipe(catchError(() => of([])))
+      .subscribe((products) => {
+        // Find the product that correspond with the id provided in route.
+        this.product = products.find(
+          (product) => product.id === productIdFromRoute
+        );
+      });
   }
 
   addToCart(product: Product) {

apps/analog-app/src/main.server.ts

@@ -0,0 +1,28 @@
+import 'zone.js/node';
+import {
+  renderApplication,
+  ɵSERVER_CONTEXT as SERVER_CONTEXT,
+} from '@angular/platform-server';
+import { provideFileRouter } from '@analogjs/router';
+import { withEnabledBlockingInitialNavigation } from '@angular/router';
+
+import { AppComponent } from './app/app.component';
+import { enableProdMode } from '@angular/core';
+
+if (import.meta.env.PROD) {
+  enableProdMode();
+}
+
+export default async function render(url: string, document: string) {
+  const html = await renderApplication(AppComponent, {
+    appId: 'analog-app',
+    document,
+    url,
+    providers: [
+      provideFileRouter(withEnabledBlockingInitialNavigation()),
+      { provide: SERVER_CONTEXT, useValue: 'ssr-analog' },
+    ],
+  });
+
+  return html;
+}

apps/analog-app/src/main.ts

@@ -1,11 +1,10 @@
 import 'zone.js';
-import { importProvidersFrom } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient } from '@angular/common/http';
 import { provideFileRouter } from '@analogjs/router';
 
 import { AppComponent } from './app/app.component';
 
 bootstrapApplication(AppComponent, {
-  providers: [provideFileRouter(), importProvidersFrom(HttpClientModule)],
+  providers: [provideFileRouter(), provideHttpClient()],
 }).catch((err) => console.error(err));

apps/analog-app/tsconfig.app.json

@@ -6,7 +6,7 @@
     "target": "ES2022",
     "useDefineForClassFields": false
   },
-  "files": ["src/main.ts"],
+  "files": ["src/main.ts", "src/main.server.ts"],
   "include": ["src/**/*.d.ts", "src/app/routes/**/*.ts"],
   "exclude": ["**/*.test.ts", "**/*.spec.ts"]
 }

apps/analog-app/vite.config.ts

@@ -7,17 +7,18 @@ import { defineConfig, Plugin, splitVendorChunkPlugin } from 'vite';
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   return {
+    publicDir: 'src/public',
     optimizeDeps: {
       include: ['@angular/common', '@angular/forms'],
     },
     build: {
       target: ['es2020'],
     },
-    resolve: {
-      mainFields: ['module'],
-    },
     plugins: [
       analog({
+        ssr: true,
+        ssrBuildDir: '../../dist/apps/analog-app/ssr',
+        entryServer: 'apps/analog-app/src/main.server.ts',
         vite: {
           inlineStylesExtension: 'scss',
           tsconfig:
@@ -26,11 +27,15 @@ export default defineConfig(({ mode }) => {
               : 'apps/analog-app/tsconfig.app.json',
         },
         nitro: {
-          rootDir: `apps/analog-app/src`,
+          rootDir: 'apps/analog-app',
           output: {
-            dir: `../../../../dist/apps/analog-app/server`,
+            dir: '../../../dist/apps/analog-app/server',
           },
-          buildDir: `../../../dist/apps/analog-app/.nitro`,
+          publicAssets: [{ dir: `../../../dist/apps/analog-app/client` }],
+          serverAssets: [
+            { baseName: 'public', dir: `./dist/apps/analog-app/client` },
+          ],
+          buildDir: '../../dist/apps/analog-app/.nitro',
         },
       }),
       visualizer() as Plugin,

package.json

@@ -11,7 +11,7 @@
     "build": "nx run-many --target build --all",
     "build:vite-ci": "npm run build -- --exclude analog-app,docs-app",
     "test:vite-ci": "npm run test",
-    "e2e": "nx run-many --target e2e --all --parallel=1",
+    "e2e": "nx run-many --target e2e --all --parallel=1 --exclude analog-app-e2e-playwright",
     "test": "nx run-many --target test --all",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
     "contributors:add": "all-contributors add",

packages/platform/src/lib/build-server.ts

@@ -0,0 +1,26 @@
+import { loadEsmModule } from '@angular-devkit/build-angular/src/utils/load-esm';
+import { NitroConfig } from 'nitropack';
+
+import { Options } from './options';
+
+export async function buildServer(
+  options?: Options,
+  nitroConfig?: NitroConfig
+) {
+  const { createNitro, build, prepare, copyPublicAssets, prerender } =
+    await loadEsmModule<typeof import('nitropack')>('nitropack');
+
+  const nitro = await createNitro({
+    dev: false,
+    ...nitroConfig,
+  });
+  await prepare(nitro);
+  await copyPublicAssets(nitro);
+  await prerender(nitro);
+
+  if (!options?.prerender) {
+    await build(nitro);
+  }
+
+  await nitro.close();
+}

packages/platform/src/lib/options.ts

@@ -2,6 +2,10 @@ import type { PluginOptions } from '@analogjs/vite-plugin-angular';
 import { NitroConfig } from 'nitropack';
 
 export interface Options {
+  ssr?: boolean;
+  ssrBuildDir?: string;
+  prerender?: boolean;
+  entryServer?: string;
   vite?: PluginOptions;
   nitro?: NitroConfig;
 }

packages/platform/src/lib/platform-plugin.ts

@@ -3,11 +3,17 @@ import angular from '@analogjs/vite-plugin-angular';
 import { Options } from './options';
 import { viteNitroPlugin } from './vite-nitro-plugin';
 import { routerPlugin } from './router-plugin';
+import { devServerPlugin } from './ssr/dev-server-plugin';
+import { ssrBuildPlugin } from './ssr/ssr-build-plugin';
 
-export function platformPlugin(opts?: Options): Plugin[] {
+export function platformPlugin(opts: Options = {}): Plugin[] {
   return [
-    viteNitroPlugin(opts?.nitro),
-    ...angular(opts?.vite),
+    viteNitroPlugin(opts, opts?.nitro),
+    (opts.ssr ? ssrBuildPlugin() : false) as Plugin,
     ...routerPlugin(),
+    (opts.ssr
+      ? devServerPlugin({ entryServer: opts.entryServer })
+      : false) as Plugin,
+    ...angular(opts?.vite),
   ];
 }

packages/platform/src/lib/router-plugin.ts

@@ -11,11 +11,15 @@ import type { Plugin } from 'vite';
 export function routerPlugin(): Plugin[] {
   return [
     {
-      name: 'analogjs-router-config',
+      name: 'analogjs-router-plugin',
       config() {
         return {
+          ssr: {
+            noExternal: ['@analogjs/router', '@angular/**'],
+          },
           optimizeDeps: {
-            exclude: ['@analogjs/router'],
+            include: ['rxjs'],
+            exclude: ['@analogjs/router', '@angular/platform-server'],
           },
         };
       },

packages/platform/src/lib/runtime/api-middleware.ts

@@ -0,0 +1,7 @@
+import { eventHandler } from 'h3';
+
+export default eventHandler(async (event) => {
+  if (event.req.url?.startsWith('/api')) {
+    return $fetch(`${event.req.url?.replace('/api', '')}`);
+  }
+});

packages/platform/src/lib/runtime/renderer.ts

@@ -0,0 +1,15 @@
+import { eventHandler } from 'h3';
+// @ts-ignore
+import { useStorage } from '#imports';
+
+export default eventHandler(async (event) => {
+  // @ts-ignore
+  const render = (await import('#build/../ssr/main.server.mjs'))['default'];
+
+  // @ts-ignore
+  const template = await useStorage().getItem(`/assets/public:index.html`);
+
+  const html = await render(event.req.url, template);
+
+  return html;
+});

packages/platform/src/lib/ssr/build.ts

@@ -0,0 +1,16 @@
+import { build, mergeConfig, UserConfig } from 'vite';
+import { Options } from '../options';
+
+export async function buildSSRApp(config: UserConfig, options?: Options) {
+  const ssrBuildConfig = mergeConfig(config, {
+    build: {
+      ssr: true,
+      rollupOptions: {
+        input: options?.entryServer || './src/main.server.ts',
+      },
+      outDir: options?.ssrBuildDir || './dist/ssr',
+    },
+  });
+
+  await build(ssrBuildConfig);
+}