Deploy Content SDK Angular apps to Vercel or Netlify

Create a Vercel Function that exports the compiled Angular request handler, then configure Vercel to route requests to it. This configuration uses the Node.js runtime.

To deploy your application to Vercel:

1. In the application's root folder, create vercel/index.mjs with the following content:

   export { default } from '../dist/<app-name>/server/server.mjs';

2. In the application's root folder, create vercel.json with the following content:

   {
     "$schema": "https://openapi.vercel.sh/vercel.json",
     "buildCommand": "npm run build",
     "outputDirectory": "dist/<your_app_name>/browser",
     "rewrites": [
       {
         "source": "/(.*)",
         "destination": "/vercel/index"
       }
     ],
     "functions": {
       "vercel/index.mjs": {
         "includeFiles": "dist/<your_app_name>/**"
       }
     }
   }

   The framework setting selects the Other preset for this custom deployment configuration. The includeFiles setting includes the Angular build output in the function so the server can access its runtime files.

3. Commit and push the application changes to your source control repository.

4. In the Vercel dashboard, create a project by importing the repository. Set the Root Directory to the application's root folder, which contains package.json and vercel.json.

5. Add the Content SDK environment variables from Prepare your application for deployment. Make them available in each Vercel deployment environment that you use.

6. Add the following Angular environment variables:

   NG_ALLOWED_HOSTS=*.vercel.app
   NG_TRUST_PROXY_HEADERS=X-FORWARDED-PORT,X-FORWARDED-PATH,X-FORWARDED-FOR,X-FORWARDED-HOST,X-FORWARDED-PROTO

   These settings allow Vercel URLs and prevent Vercel rendering from falling back to CSR.

7. Deploy the project, then verify the deployment.

Use a Netlify Functions v2 handler with the .mts extension to preserve the ECMAScript module (ESM) format required by the compiled Angular server. The handler uses serverless-http to adapt Netlify's web Request and Response objects to the Express request handler.

The named handler export in Netlify's Express deployment example uses the Lambda-compatible API. For this Angular deployment, use the default export shown below. See Netlify function module formats.

To deploy your application to Netlify:

1. The serverless-http module provides the required bridge between Express and Netlify. You should install it alongside few additional dependencies that your Netlify function will use. In the application's root folder, install the function dependencies:

   npm install express serverless-http @netlify/functions @types/express

2. Create netlify/functions/server.mts with the following content:

   import serverless from 'serverless-http';
   import type { Context } from '@netlify/functions';
   import { default as app } from '../../dist/<your_app_name>/server/server.mjs';
   
   const handler = serverless(app);
   const FUNCTION_BASE = '/.netlify/functions/server';
   
   /** serverless-http's result for a Lambda Function URL ("2.0") event. */
   interface LambdaResult {
     statusCode: number;
     headers: Record<string, string>;
     cookies: string[];
     body: string;
     isBase64Encoded: boolean;
   }
   
   export default async (request: Request, context: Context) => {
     const url = new URL(request.url);
     // The netlify.toml rewrite passes the original path; direct invocations
     // arrive prefixed with the function base path — strip it.
     const path = url.pathname.startsWith(FUNCTION_BASE)
       ? url.pathname.slice(FUNCTION_BASE.length) || '/'
       : url.pathname;
   
     // Lambda Function URL ("2.0") event — the leanest shape serverless-http accepts
     const lambdaRequest = {
         version: '2.0',
         rawPath: path,
         rawQueryString: url.searchParams.toString(),
         headers: Object.fromEntries(request.headers),
         requestContext: { http: { method: request.method } },
         body: Buffer.from(await request.arrayBuffer()),
       };
     const result = (await handler(lambdaRequest, context)) as LambdaResult;
   
     // set-cookie comes back separately; `|| null` keeps 204/304 responses body-less.
     const headers = new Headers(result.headers);
     for (const cookie of result.cookies) headers.append('set-cookie', cookie);
     return new Response(
       result.isBase64Encoded ? Buffer.from(result.body, 'base64') : result.body || null,
       { status: result.statusCode, headers }
     );
   };

   The function imports Angular's SSR artifacts and transforms them to be used by serverless-http and v2 functions. These transformations are needed for the Netlify CLI to correctly identify the function as ESM-compatible. This example TypeScript function is assumed to be present inside the netlify/functions/server.mts file.

3. In the application's root folder, create netlify.toml with the following content:

   [build]
     command = "npm run build"
     publish = "dist/content-sdk-angular/browser"
   
   [functions.server]
     # Ship the full dist folder so express.static and any runtime file access work.
     included_files = ["dist/content-sdk-angular/**"]
   
   [[redirects]]
     from = "/*"
     status = 200
     to = "/.netlify/functions/server/:splat"

4. Commit and push the application changes, including the updated dependency files, to your source control repository.

5. In Netlify, create a project from the repository. If the application is in a subfolder, set the Base directory to the application's root folder. Confirm that Netlify uses the build, publish, and functions paths in netlify.toml.

6. Add the Content SDK environment variables from Prepare your application for deployment. Ensure that the connection variables are available during the build and to the deployed function. The build includes public variables in the browser bundle.

7. Add the following Angular environment variables for the deployed function:

   NG_ALLOWED_HOSTS=*.netlify.app
   NG_TRUST_PROXY_HEADERS=X-FORWARDED-PORT,X-FORWARDED-PATH,X-FORWARDED-FOR,X-FORWARDED-HOST,X-FORWARDED-PROTO

   These settings allow netlify URLs and ensure Angular SSR works correctly from behind the Netlify proxy.

8. Deploy the project, then verify the deployment.